前端模塊化

下圖轉載於: https://juejin.im/post/5c17ad756fb9a049ff4e0a62#heading-31

一、模塊化的理解

將一個複雜的程序依據一定的規則(規範)封裝成幾個塊(文件), 並進行組合在一起
塊的內部數據與實現是私有的, 只是向外部暴露一些接口(方法)與外部其它模塊通信

下面按ppt的形式總結：

二、模塊化規範的萌芽歷程

node module的源碼解析：參考於 https://github.com/Aus0049/blog/blob/master/201805/module.js#L389

三、服務端的模塊化規範與實現

【 CommonJS的提出主要是彌補當時js沒有標準的缺陷，不應只是停留在小腳本程序階段。他們期望那些用CommonJS API 寫出的應用可以具備跨宿主環境執行的能力。】

【核心模塊的優先級僅次於緩存加載，且再Node的源代碼編譯過程中已經編譯爲二進制代碼，加載過程最快。】

【require 並不是全局性命令，而是每個模塊提供的一個內部方法，也就是說，只有在模塊內部才能使用 require 命令（唯一的例外是 REPL 環境）。另外，require 其實內部調用 Module._load 方法。】

【大概看了Module.js的源碼，整理了一下require方法的實現邏輯。】

四、瀏覽器端的模塊化規範與實現

【AMD:是將所有文件同時加載,一次性引入,推崇依賴前置,也就是在定義模塊時要先聲明其依賴的模塊,加載完模塊後會立馬執行該模塊(運行時加載)】

【通過對 RequireJS 的分析我們發現一個問題，就是在用 RequireJS 聲明一個模塊時要提前指定所有的依賴，這些依賴項會被當做形參傳到 define() 方法中，這加大了開發的難度，因爲依賴的模塊會優先全部加載，那麼在閱讀代碼的時候要先把依賴模塊都閱讀一次（因爲這些依賴模塊是初始化的時候執行的）。偷懶是開發者提高效率的初衷，那麼如果可以在業務代碼中使用到依賴模塊的時候再去加載該模塊這樣就不必提前閱讀全部依賴模塊代碼了。這樣 Sea.js 就出現了，在使用上可以理解 Sea.js 是 CommonJS 和 AMD 的結合。

CMD：按需引入,推崇依賴就近】

【ES6模塊的設計思想是儘量的靜態化，使得編譯時就能確定模塊的依賴關係，以及輸入和輸出的變量(如果你的模塊在運行過程中修改了導出的變量值，就會反映到使用模塊的代碼中去。所以，不推薦在模塊中修改導出值，導出的變量應該是靜態的。)
參考：http://es6.ruanyifeng.com/#docs/module-loader】