欢迎光临,了解微信小程序开发,就上易用通!

使用ES6新特性开发微信小程序(7)

发布:2018-01-24 15:00浏览: 来源:网络 作者:tianshu

在ES6之前,社区制定了一些模块加载方案,最主要的有CommonJS和AMD两种。前者用于服务器,后者用于浏览器。ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案。

Modules(模块)

每一个ES6模块都是一个包含JS代码的文件,模块本质上就是一段脚本,而不是用 module 关键字定义一个模块。默认情况下模块都是在严格模式下运行。模块功能主要由两个命令构成:export和import。export命令用于用户自定义模块,规定对外接口;import命令用于输入其他模块提供的功能,同时创造命名空间(namespace),防止函数名冲突。

export

export用于从给定文件(或模块)导出函数和对象。
  1.  
  2.     export { name1, name2, …, nameN };
  3.     export { variable1 as name1, variable2 as name2, …, nameN };
  4.     export let name1, name2, …, nameN; // also var
  5.     export let name1 = …, name2 = …, …, nameN; // also var, const
  6.     export default expression;
  7.     export default function (…) { … } // also class, function*
  8.     export default function name1(…) { … } // also class, function*
  9.     export { name1 as default, … };
  10.     export * from …;
  11.     export { name1, name2, …, nameN } from …;
  12.     export { import1 as name1, import2 as name2, …, nameN } from …;
  13.  


单个导出

  1.  
  2.     // export.js
  3.     export let firstName = 'Michael';
  4.     export let lastName = 'Jackson';
  5.     export let year = 1958;
  6.     function add(x, y) {
  7.         return x + y;
  8.     }
  9.     export { add };
  10.     export function multiply(x, y) {
  11.         return x * y;
  12.     };
  13.  
  14.  


    批量导出
  1.  
  2.     // export.js
  3.     let firstName = 'Michael';
  4.     let lastName = 'Jackson';
  5.     let year = 1958;
  6.     function multiply(x, y) {
  7.         return x * y;
  8.     }
  9.     export {firstName, lastName, year, multiply};
  10.  


重命名导出

  1.  
  2.     let n = 1;
  3.     function f()) {    
  4.     }
  5.     export { n as m, f as g};
  6.  


默认导出,每个模块只能有一个默认导出:

  1.  
  2.     // exportDefault.js
  3.     function f() {  
  4.     }  
  5.     export default f;  
  6.     export{ f as default }; 
  7.  


import

import用于从外部模块、其他脚本中导入函数、对象或者原型,这些被导入的模型必须在其他的模块或者脚本中被导出的。

  1.  
  2.     import defaultMember from "module-name";
  3.     import * as name from "module-name";
  4.     import { member } from "module-name";
  5.     import { member as alias } from "module-name";
  6.     import { member1 , member2 } from "module-name";
  7.     import { member1 , member2 as alias2 , [...] } from "module-name";
  8.     import defaultMember, { member [ , [...] ] } from "module-name";
  9.     import defaultMember, * as name from "module-name";
  10.     import "module-name";
  11.  


无对象导入,如果模块包含一些逻辑要执行,且不会导出任何对象,此类对象也可以被导入到另一模块中。

  1.  
  2.     import './module'; 
  3.  


导入默认对象,采用Default导出方式导出对象,该对象在import声明中将直接被分配给某个引用。

  1.  
  2.     import d from './exportDefault'; 
  3.  


批量导入

  1.  
  2.     import {firstName, lastName, year, multiply} from './export';
  3.  


重命名导入

  1.  
  2.     import { lastName as surname } from './export';
  3.  
 

导入所有对象

  1.  
  2.     import * as o from './export';
  3.  


import命令导入的对象可能是一个变量,也可能是一个函数,或者一个类,要视具体情况而定。import与require的差异较大,好不要混用。

实例

f10_modules_math.js

  1.  
  2. export function sum(...x) {
  3.         return x.reduce((m, n) => m + n);
  4. }
  5. export var pi = 3.141593;
  6.  


f10_modules_app.js

  1.  
  2. import * as math from "f10_modules_math";
  3. function execute() {
  4.         console.log("π = " + math.sum(math.pi));
  5.         console.log("2π = " + math.sum(math.pi, math.pi));
  6.         console.log("3π = " + math.sum(math.pi, math.pi, math.pi));
  7.         console.log("4π = " + math.sum(math.pi, math.pi, math.pi, math.pi));
  8. }
  9. export { execute };
  10.  
  11.  


f10_modules.js

  1.  
  2. import * as app from "f10_modules_app";
  3. function f10_modules() {
  4.         console.log("\nf10:Modules");
  5.  
  6.         app.execute(); // 输出:π = 3.141593 2π = 6.283186 3π = 9.424779 4π = 12.566372
  7. }
  8.  


完整代码:
使用ES6新特性开发微信小程序(7)(图1) ES6.zip





免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。