前端子產品化

子產品化的開發方式可以提高代碼複用率，友善進行代碼的管理。通常一個檔案就是一個子產品，有自己的作用域，隻向外暴露特定的變量和函數。目前流行的js子產品化規範有CommonJS,AMD,CMD,ES6子產品系統

nodeJS是commonJS規範的主要實踐者，他有四個重要的環境變量為子產品化的實作提供支援：<code>module</code>,<code>exports</code>,<code>require</code>,<code>global</code>

1.概述

Node應用由子產品組成，采用CommonJS規範。每個檔案就是一個子產品，有自己的作用域。在一個檔案裡面定義的變量，函數，類都是私有的，對其他檔案不可見。在伺服器端，子產品的加載是運作時同步加載的；在浏覽器端，子產品需要提前打包編譯。

2.特點

所有代碼都運作在子產品作用域，不會污染全局作用域。

子產品可以多次加載，但是隻會在第一次加載時運作一次，然後運作結果就被緩存了，以後再加載，就直接讀取緩存結果。要想讓子產品再次運作，必須清除緩存。

子產品加載的順序，按照其在代碼中出現的順序。

3.基本文法

暴露子產品：<code>module.exports = value</code>或<code>exports.xxx = value</code>

引入子產品：<code>require(xxx)</code>，如果是第三方子產品，xxx為子產品名；如果是自定義子產品，xxx為子產品檔案路徑

4.子產品的加載機制

CommonJS子產品的加載機制是，輸入的是被輸出的值的拷貝。也就是說，一旦輸出一個值，子產品内部的變化就影響不到這個值。這點與es6子產品化有重大差異。

ES6子產品的設計思想是盡量的靜态化，使得編譯時就能确定子產品的依賴關系，以及輸入和輸出的變量。CommonJS和AMD子產品，都隻能在運作時确定這些東西。

1.基本文法

子產品功能主要由兩個指令組成：<code>export</code>和<code>import</code>。<code>export</code>指令用于規定子產品的對外接口，<code>import</code>指令用于輸入其他子產品提供的功能。<code>export default</code>指令，為子產品指定預設輸出。

一個子產品就是一個獨立的檔案。該檔案内部所有的變量，外部無法擷取。如果你希望外部能夠讀取子產品内部的某個變量，就必須使用<code>export</code>關鍵字輸出該變量。下面是一個 JS 檔案，裡面使用<code>export</code>指令輸出變量。

ES6子產品是編譯時加載，使得靜态分析稱為可能

不再需要<code>UMD</code>子產品格式了，将來伺服器和浏覽器都會支援 ES6 子產品格式。目前，通過各種工具庫，其實已經做到了這一點。

将來浏覽器的新 API 就能用子產品格式提供，不再必須做成全局變量或者<code>navigator</code>對象的屬性。

不再需要對象作為命名空間（比如<code>Math</code>對象），未來這些功能可以通過子產品提供。

CommonJS規範加載子產品是同步的，也就是說，隻有加載完成，才能執行後面的操作。AMD規範則是非同步加載子產品，允許指定回調函數。由于Node.js主要用于伺服器程式設計，子產品檔案一般都已經存在于本地硬碟，是以加載起來比較快，不用考慮非同步加載的方式，是以CommonJS規範比較适用。但是，如果是浏覽器環境，要從伺服器端加載子產品，這時就必須采用非同步模式，是以浏覽器端一般采用AMD規範。此外AMD規範比CommonJS規範在浏覽器端實作要來着早。

CMD規範專門用于浏覽器端，子產品的加載是異步的，子產品使用時才會加載執行。CMD規範整合了CommonJS和AMD規範的特點。在 Sea.js 中，所有 JavaScript 子產品都遵循 CMD子產品定義規範。

作者：前端南玖

出處：https://www.cnblogs.com/songyao666/

-------------------------------------------

個性簽名：智者創造機會，強者把握機會，弱者坐等機會。做一個靈魂有趣的人！

如果覺得這篇文章對你有小小的幫助的話，可以關注下方公衆号，在該公衆号同樣會推送技術文章給大家，謝謝～

歡迎加入前端技術交流群：928029210