使用ES6新特性开发微信小程序（7）

在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.zip

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