JS的模塊化編程

 

今天學了一下JS的模塊化編程，感受JavaScript真的是博大精深，CommonJS，requireJS，NodeJS，Seajs，在此記錄一下經驗。JavaScript設計之初並非一種模塊化編程語言，不支‘類’和‘模塊’的概念，但ES6中卻將正式支持"類"和"模塊"。有了模塊，咱們能夠更方便地使用別人的代碼，想要什麼功能，就加載什麼模塊。 不過這樣作的前提是你們必須以一樣的方式編寫模塊，考慮到Javascript模塊如今尚未官方規範，所以各類規範應運而生。

 

 咱們先來看看什麼是模塊化？

 模塊化是一種將系統分離成獨立功能部分的方法，可嚴格定義模塊接口、模塊間具備透明性。模塊化思想在後臺語言中應用比較常見。

模塊化有什麼優缺點呢？

優勢：

（1）可維護性  能夠靈活架構，實現焦點分離，方便單個模塊功能調試、升級，方便模塊間組合、分解，多人協做互不干擾 。

（2）可分單元測試 。

缺點：

（1）對dom操做支持較弱，固然也可使用jq；
（2）Html中過多指令、事件綁定的操做，耦合度較高

下面介紹兩個概念：

內聚度 指模塊內部實現，它是信息隱藏和局部化概念的天然擴展，它標誌着一個模塊內部各成分彼此結合的緊密程度。

好處也很明顯，當把相關的任務分組後去閱讀就容易多了。

設計時應該儘量的提升模塊內聚度，從而得到較高的模塊獨立性。 

耦合度 則是指模塊之間的關聯程度的度量。耦合度取決於模塊之間接口的複雜性，進入或調用模塊的位置等。

與內聚度相反，在設計時應儘可能追求鬆散耦合的系統。

 

目前，通行的Javascript模塊規範共有兩種：CommonJS和AMD+CMD。

CommonJS 

 

2009年，美國程序員Ryan Dahl創造了node.js項目，將javascript語言用於服務器端編程。 這標誌"Javascript模塊化編程"正式誕生。

由於在瀏覽器環境下，有沒有模塊並不會形成多大影響；可是在服務器端，必定要有模塊，與操做系統和其餘應用程序互動，不然根本無法編程。

node.js的模塊系統，就是參照CommonJS規範實現的。如今比較火的 React 及周邊類庫，就是直接使用 CommonJS 的模塊體系，使用 npm 管理模塊，使用 Browserify 打包輸出模塊。

 

在CommonJS中，有一個全局性方法require()，用於加載模塊。

好比：要加載一個「math」模塊，並使用裏面的方法：

　　

　　var math = require('math'); 

　　math.add(2,3); // 5 

 

CommonJS規範有一個很大的侷限性，因爲他是同步加載，受網速快慢的影響很是大，若是長時間不能從服務器得到相應的資源，頁面就會一直阻塞，不能正常加載。因爲CommonJS規範的侷限性，使得它並不適用於瀏覽器環境myapp，因此這個時候就出現了AMD和CMD；

 

CMD是國內玉伯大神在開發SeaJS的時候提出來的，屬於CommonJS的一種規範，此外還有AMD，是RequireJS在推廣的時候提出的一種規範，也使用require（）來加載模塊。兩者都是異步模塊定義（Asynchronuous Module Definition）的一個實現，不會影響其後的語句執行；

 

CMD和AMD的區別:

 

　　CMD至關於按需加載，定義一個模塊的時候不須要當即制定依賴模塊，在須要的時候require就能夠了，比較方便；

　　AMD則相反，定義模塊的時候須要制定依賴模塊，並以形參的方式引入factory中。

　　CMD 推崇依賴就近，AMD 推崇依賴前置。

 

推薦閱讀 阮一峯老師的文章 感受講的十分詳盡。