14.module與模塊化 · 牛云輝學習筆記

# 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 ```