JavaScript ES6 module

module

---

系列文章

这是JavaScript系列文章：

• 类
• promise
• async & await
• 原型链与继承
• 闭包
• this
• CommonJS
• ES6 Module

---

---

export

1. 简述
   export 用于从模块中导出 函数 、 对象 或 原始值 ，其他程序可以通过 import 引用。

2. 基础语法

   export { name1, name2, …, nameN };  // 导出 对象
   export { variable1 as name1, variable2 as name2, …, nameN };  // 导出 对象，并起别名
   export let name1, name2, …, nameN; // also var, const  // 导出变量
   export let name1 = …, name2 = …, …, nameN; // also var, const  // 导出变量并起别名
   export function FunctionName(){...}  // 导出函数
   export class ClassName {...}  // 导出类
   
   export default expression;  // 导出默认对象
   export default function (…) { … } // also class, function*  // 导出默认匿名函数
   export default function name1(…) { … } // also class, function*  // 导出默认函数名
   export { name1 as default, … };  // ？？？？？？
   
   export * from …;  // 全部导出
   export { name1, name2, …, nameN } from …;  // 从另一个模块导出
   export { import1 as name1, import2 as name2, …, nameN } from …;  // 从另一个模块导出并起别名
   export { default } from …;  // 从另一个模块导出对象
   

3. 描述
   export { myFunction }; 导出前面生成的函数
   export const foo = Math.sqrt(2); 导出一个变量
   export default function () { } 默认导出（函数）
   export default class { } 默认导出（类）
   命名导出和默认导出区别：命名导出必须使用与对象相同的名称。但是可以使用任何名称使用默认导出。

   let a; export default a = 12;  // in file test.js
   import m from './test.js';  // 因为a是默认导出的，所以可以随意起新的名字。
   console.log(m);  // output: 12
   

   默认导出只能有一个
   导出默认值：export { default } from 'mod';

4. 示例一
   导出文件a.js

   // file a.js
   function fa(x) {
   	return x * x * x;
   }
   
   const foo = Math.PI + Math.SQRT2;
   
   var graph = {
   	options:  {
   		color: 'white',
   		thickness: '2px'
   	},
   	draw: function () {
   		console.log('From graph draw function');
   	}
   }
   
   export { fa, foo, graph };  // 导出 fa、foo、graph
   

   导入文件b.js

   import { fa, foo, graph } from 'a';
   
   graph.options =  {
   	color: 'blue',
   	thickness: '3px'
   };
   graph.draw();
   console.log(fa(3));  // 27
   console.foo(foo);  // 4.555806215962888
   

5. 示例二
   如果需要导出一个值或者一个模块，可以使用默认导出

   // file a.js
   export default function fa(x) {
   	return x * x * x;
   }
   

   导入文件

   // file b.js
   import cube from 'a';
   console.log(cube(3));  // output: 27
   

   注意，不能使用 var、let 或 const 用于导出默认值 export default。

6. 示例三：模块重定向

   export { default } from './other-module';
   export * from './other-module';
   

export default

1. export 有个缺陷就是必须要知道原先的模块内参数名，export default 实际上是默认把一些其他参数赋值给一个名为 default 变量。

2. 规定 export default 后面不能跟 var、let、const。

3. 且不使用大括号。

4. 只能声明一个 export default

5. 示例一

   // 1. 导出匿名函数
   export default function () {
   	console.log('test');
   }
   
   // 2. 导出非匿名函数，但是这里声明的函数名是没用的，依然视为匿名函数
   export default function foo () {
   	console.log('foo');
   }
   
   // OR
   
   function foo () {
   	console.log('foo');
   }
   export default foo;
   

6. 示例二： 同时引入默认和导出模块
   file a.js

   export default function (obj) {
     // ···
   }
   
   export function each(obj, iterator, context) {
     // ···
   }
   
   // 暴露出forEach接口，默认指向each接口，即forEach和each指向同一个方法。
   export { each as forEach };  
   

   import defaultFunc, { each, forEach } from 'a'; // file b.js

import

1. 用于引用模块

2. 这通常是包含模块的.js文件的 相对 或 绝对 路径名，不包括 .js 扩展名。

3. 基础语法

   // 引用的默认输出
   import defaultExport from "module-name";
   
   // 全部引用并使用别名 ‘name’
   import * as name from "module-name";
   
   // 引用 export 变量、函数
   import { export } from "module-name";
   
   // 引用 export 并使用别名 ‘alias’
   import { export as alias } from "module-name";
   
   // 引用两个
   import { export1 , export2 } from "module-name";
   
   // 从绝对路径引用
   import { foo , bar } from "module-name/path/to/specific/un-exported/file";
   
   // 引用多个
   import { export1 , export2 as alias2 , [...] } from "module-name";
   
   // ？？？？？？
   import defaultExport, { export [ , [...] ] } from "module-name";
   
   // 同时引用默认和其他非默认的
   import defaultExport, * as name from "module-name";
   
   // ？？？？？？	
   // 仅为副作用而导入一个模块
   // 模块仅为副作用（中性词，无贬义含义）而导入，而不导入模块中的任何内容。 这将运行模块中的全局代码, 但实际上不导入任何值。
   import "module-name";
   
   // 将引用的值赋值给另一个值
   var promise = import("module-name");
   

4. 示例一：动态import

   import('/modules/my-module.js')
     .then((module) => {
       // Do something with the module.
     });
   
   // OR
   
   let module = await import('/modules/my-module.js');
   

5. FAQ

   • import defaultExport, { export [ , [...] ] } from "module-name";
     可以同时将default语法与上述用法（命名空间导入或命名导入）一起使用。在这种情况下，default导入必须首先声明。

   • import "module-name";
     模块仅为副作用（中性词，无贬义含义）而导入，而不导入模块中的任何内容。 这将运行模块中的全局代码, 但实际上不导入任何值。

模块的继承

模块之间的变量是可以继承的

示例一：
a.js --> b.js --> c.js

• a.js

  export let a = 42;
  export function foo () {
  	console.log('foo');
  }
  

• b.js

  export * from './a';
  

• c.js

  export * as b from './b';
  

跨模块常量

参考了阮老师的示例，感觉很有用，特摘录于此：
项目里总会有超多的常量，但是放在同一个js文件里，会显得臃肿，不利于区分和查找。这个时候就可以使用js文件拆分，然后在一个 index.js 文件里统一对外访问。

1. 文件目录:

   example
   ├── variable
   │	├── date.js
   │	├── location.js 	
   │   └── index.js
   └── useVariable.js
   

2. date.js

   export const date = {
   	now: '2019-03-22',
   	time: '12:43'
   };
   

3. location.js

   export const location = ['北京市', '上海市', '重庆市'];
   

4. index.js

   export { date } from './date';
   export { location } from './location';
   

5. 使用（useVariable.js）
   import { date, location } from './variable/index';

参考链接

[1] 阮一峰. Module 的语法
[2] 阮一峰. Module 的加载实现
[3] MDN. import
[4] MDN. export

感谢