[TOC] >[success] # js 模塊化 1. 模塊化出發點，**像后臺一樣將復雜的程序依據一定的規則（規范）封裝成幾個塊（文件）**，并進行組合在一起的**內部數據/實現是私有的**，只是想**外部暴露一些接口（方法）與外部的模塊通信**，讓代碼達到'**解耦的需要**' 2. 模塊化的步驟就是 先將程序分成**一個個小的結構**，這個**結構**有自己邏輯代碼，有自己的作用域，定義變量名詞時不會影響到其他的結構，還可以對外暴露的變量、函數、對象等導出給其結構使用，也可以導入另外結構中的**變量、函數、對象** 3. web端模塊化之后將文件大小縮小，并且利用減少文件大小，節約 Http 請求時間 >[danger] ##### 最初階段實現模塊化開發方式 -- stage-1 ~~~ 1.在早期開發，開發人員會將各部分的邏輯代碼封裝成，對應的js文件，通過文件的形式來進行代碼 模塊化的開發，當使用某個模塊的時候通過'script'標簽引入這些文件，一個 script 標簽就對應一個模塊 '缺點'： 1.1.所有的模塊都直接在全局范圍去工作，并沒有一個獨立的私有空間，導致模塊當中所有的成員都可以 -在模塊外部被任意的訪問或修改，也就是污染全局作用域， 1.2.模塊多了過后還會存在命名沖突問題，也無法管理模塊依賴的關系。它完全依靠約定， 項目一但上了體量，就徹底不行了 ~~~ * 這個階段的代碼 ~~~ ├── src // 源碼文件 | ├── index.html | └── module-a.js | └── module-b.js ~~~ * index.html ~~~ <script src="module-a.js"></script> <script src="module-b.js"></script> <script> // 命名沖突 function method1(){ } // 模塊成員可以被修改 name = 'foo' </script>- ~~~ * module-a.js ~~~ let a = 1 // module a 相關狀態數據和功能函數 var name = 'module-a' function method1 () { console.log(name + '#method1') } function method2 () { console.log(name + '#method2') } ~~~ * module-b.js ~~~ console.log(a) // 1 可以打印出a文件中的let 定義a變量 // module b 相關狀態數據和功能函數 var name = 'module-b' function method1 () { console.log(name + '#method1') } function method2 () { console.log(name + '#method2') } ~~~ >[danger] ##### 解決變量名沖突采用對象的形式-- stage-2 ~~~ 1.為了解決命名沖突的問題，采用每個模塊只暴露一個全局對象，所有模塊成員都掛載到這個對象中， 通過將每個模塊「包裹」為一個全局對象的形式實現，有點類似于為模塊內的成員添加了「命名空間」的形式， 雖然解決了命名沖突的問題，但是'缺點': 1.1.沒有私有空間，所有模塊成員也可以在模塊外部被訪問或者修改， 1.2.無法管理模塊之間的依賴關系 ~~~ * 這個階段的代碼 ~~~ ├── src // 源碼文件 | ├── index.html | └── module-a.js | └── module-b.js ~~~ * index.html ~~~ <script src="module-a.js"></script> <script src="module-b.js"></script> <script> moduleA.method1() moduleB.method1() // 模塊成員可以被修改 moduleA.name = 'foo' </script> ~~~ * module-a.js ~~~ // module a 相關狀態數據和功能函數 var moduleA = { name: 'module-a', method1: function () { console.log(this.name + '#method1') }, method2: function () { console.log(this.name + '#method2') } } ~~~ * module-b.js ~~~ // module b 相關狀態數據和功能函數 var moduleB = { name: 'module-b', method1: function () { console.log(this.name + '#method1') }, method2: function () { console.log(this.name + '#method2') } } ~~~ >[danger] ##### 解決模塊變量被全局訪問的問題 -- stage-3 ~~~ 1.這個階段使用立即執行函數表達式（IIFE：Immediately-Invoked Function Expression）為模塊提供私有空間， 立即執行函數利用的就是函數執行后，執行函數內部變量就會被銷毀因此實現了私有。 2.這種方式實現步驟： 2.1.將每個模塊成員都放在一個函數提供的私有作用域中， 2.2.對于需要暴露給外部的成員，通過掛在到全局對象上的方式實現 ~~~ [立即執行函數](https://developer.mozilla.org/zh-CN/docs/Glossary/%E7%AB%8B%E5%8D%B3%E6%89%A7%E8%A1%8C%E5%87%BD%E6%95%B0%E8%A1%A8%E8%BE%BE%E5%BC%8F) [執行函數內部變量被銷毀](http://www.hmoore.net/cyyspring/more/1314922) * index.html ~~~ <script src="module-a.js"></script> <script src="module-b.js"></script> <script> moduleA.method1() moduleB.method1() // 模塊私有成員無法訪問 console.log(moduleA.name) // => undefined </script> ~~~ * module-a.js ~~~ // module a 相關狀態數據和功能函數 ;(function () { var name = 'module-a' function method1 () { console.log(name + '#method1') } function method2 () { console.log(name + '#method2') } window.moduleA = { method1: method1, method2: method2 } })() // 也可以用下面的形式聲明變量接受返回立即執行返回值 let newsModule = (function () { let time = new Date(); const query = function query() { // ... }; const handle = function handle() { // ... }; // 把供其它板塊調用的方法，暴露到全局對象上「局限：暴露的內容比較多，則還會引發全局變量沖突」 // window.query = query; return { // query:query query, handle }; })(); ~~~ * module-b.js ~~~ // module b 相關狀態數據和功能函數 ;(function () { var name = 'module-b' function method1 () { console.log(name + '#method1') } function method2 () { console.log(name + '#method2') } window.moduleB = { method1: method1, method2: method2 } })() ~~~ * 這種形式如何解決管理模塊之間的依賴關系 ~~~ 1.module-a.js 需要jq ，在文件引入的時候也需要按照執行順序先引入'jq',配合立即執行函數傳入 jq對象，這樣a.js 就和jq形成了依賴關系 ~~~ ~~~ <script src="https://unpkg.com/jquery"></script> <script src="module-a.js"></script> <script src="module-b.js"></script> <script> moduleA.method1() moduleB.method1() </script> ~~~ ~~~ // module a 相關狀態數據和功能函數 ;(function ($) { var name = 'module-a' function method1 () { console.log(name + '#method1') $('body').animate({ margin: '200px' }) } function method2 () { console.log(name + '#method2') } window.moduleA = { method1: method1, method2: method2 } })(jQuery) ~~~ >[danger] ##### 引入模塊化期待解決的問題 ~~~ 避免命名沖突（減少命名空間污染） 更好的分離，按需加載 更高復用性 高可復用性 ~~~ >[danger] ##### 實際前期模塊化出現問題 ~~~ 1.我對模塊化的理解，前端在嘗試像后臺一樣采用將代碼以模塊為單位分離做了多次嘗試，雖然每次都解決 了部分問題但依舊存在幾個比較常見的問題 1.1.加載的時候會停止渲染網頁，引入的js文件越多，網頁失去響應的時間越長； 1.2.會污染全局變量； 1.3.js文件之間存在依賴關系，加載是有順序的，依賴性最大的要放到最后去加載；當項目規模較大時， 依賴關系變得錯綜復雜。 1.4.要引入的js文件太多，不美觀，代碼難以管理。 從而引發'請求過多'、'依賴模糊'、'難以維護' 2.由此出現了 cjs 、AMD 、CMD、ESM 、UMD 等解決方案，這里三大模塊體系中，只有首字母不一樣， 而后兩個字母則都是 Module Definition 的縮寫 ~~~