# module 模块化 --- 在 ES6 前， 前端就使用 RequireJS 或者 seaJS 实现模块化， requireJS 是基于 AMD 规范的模块化库， 而像 seaJS 是基于 CMD 规范的模块化库,现在 ES6 自带了模块化， 也是 JS 第一次支持 module, 进行模块化操作 **注意,使用 import 以及 export 方法时,首先要了解对象结构知识** #### 模块化设计思想 >ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量. [示例源地址](https://github.com/ruanyf/es6tutorial/blob/gh-pages/docs/module.md) ```javascript // CommonJS模块 实例, 缺点:动态加载,无法在加载时进行 静态优化,因为完全是在运行时才可以得到这个对象 let { stat, exists, readFile } = require('fs'); // 等同于 let _fs = require('fs'); let stat = _fs.stat; let exists = _fs.exists; let readfile = _fs.readfile; // es6 import { stat, exists, readFile } from 'fs'; ``` #### es6 module 的基本规则 1. 每一个模块只加载一次， 每一个 JS 只执行一次， 如果下次再去加载同目录下同文件，直接从内存中读取。 一个模块就是一个单例，或者说就是一个对象 2. 每一个模块内声明的变量都是局部变量， 不会污染全局作用域 3. 模块内部的变量或者函数可以通过 export 导出 4. 模块内可以导入其他的模块并使用 5. es模块内默认为严格模式(模块内顶层this指向为undefined)而非window,需要了解 #### 引入以及导出的常用方法 ```javascript // 1. export {} form 'xxxx' 导出 import {xxx} from 'xx' 导入 //a.js let a = 'a' let fn = _ =>{ console.log('fn') } export {a,fn} //main.js import {a,fn} from './a' console.log(a,fn()) // a fn //2. 别名 使用 as 关键字 //a.js let a = 'a' let fn = _ =>{ console.log('fn') } export {b as a ,newfn as fn } //这里修改导出为 b,newfn,导入时不可使用a,fn 需要使用 as 关键字前面的别名 //main.js import {c as b ,oldfn as new fn} from './a' //引入时也可使用 as关键字进行修改 console.log(c,oldfn) // a,fn // 3. export 直接导出 //a.js export let a = 'a', fn = _ => { console.log(fn)} //main.js import { a,fn } from "./a"; // 4.匿名默认导出 如果模块仅有一个功能需要暴露出去则可使用该方法 //a.js export default 'i am a.js' //main.js import one from './a' console.log(one) // i am a.js //5 使用通配符, 在其他模块重新导出指定模块所有属性 // a.js let fn = _ =>{ console.log('fn') } let fn1 = _ =>{ console.log('fn1') } let a = 'a.js' export {fn,fn1,a} //b.js export * from './a' // main.js import {fn,fn1,a} from './b' console.log(fn(),fn1(),a) // fn fn1 a.js //这里也可使用通配符把所有导入的属性放入对象保存 import * as obj from './b' console.log(obj.fn,obj.fn1,obj.a); ``` > ES6 导入的模块都是属于引用：每一个导入的 js 模块都是活的， 每一次访问该模块的变量或者函数都是最新的， 这个是原生 ES6 模块 与 AMD 和 CMD 的区别之一 ```javascript //a.js export let counter = 3; export function incCounter() { counter++; } export function setCounter(value) { counter = value; } //main.js import { counter, incCounter, setCounter } from './a'; console.log(counter); // 3 incCounter(); console.log(counter); // 4 setCounter(0); console.log(counter); // 0 //在main.js中， counter一直指向a.js中的局部变量counter ```