JS模塊化編程

開頭內容：

模塊化編程：將有利於咱們的代碼的功能的單一可複用性，因此不少的書本中將模塊化編程定位編程路途上的一個高點。

學習內容：

什麼事模塊化編程呢，爲何咱們須要模塊化的編程方式呢。

1. 隨着前段程序的組件的複雜化，咱們的代碼的閱讀維護和測試的工做將會變得愈來愈困難而且耗時間。這樣就迫使咱們對於前端的編程須要更多的考慮程序的各個功能之間的耦合性的下降，和內聚性的增長，由於只有這樣纔會簡化咱們的後期維護的工做，並使得開發的速度大大的增長（由於模塊化編寫的代碼能夠被複用，從而簡化了咱們的開發步驟）。這邊是爲何咱們須要模塊化的編程。

2. 那到底什麼是模塊話的編程呢。模塊化編程，在我我的的感受中，更像是使得部分功能函數脫離出對頁面的需求，抽象化的一套對於或者幾個模塊的功能性強，的功能代碼。並進行適當的封裝。固然在與此同時咱們也應該考慮到函數之間的關聯不該該太過於緊密，而是應該使得它們的自身的功能屬性更爲的內聚。

 

在js當中想要作到模塊化的編程是比較困難的，雖然其版本的不斷的更替，其中體現的面相對象的思想愈來愈清晰，可是因爲在js中咱們是沒有真真的類的概念（雖然有思想）和模塊的概念，因此比較難完成模塊化編程的任務。

在js權威指南中有這樣一句話描述模塊的概念。模塊就是一個能夠獨立的js的文件，其中能夠包含一個類的定義，或是一組相關的類，一個實用函數庫或者是一些待執行的代碼。

 

針對於模塊化咱們其實能夠有許多種的實現的方式：

1.最爲原始的方法，功能函數的寫法。

1 function test1(){
2     /*.......*/
3 }
4 
5 var test2 = function(){
6     /*.......*/  
7 }

以上是直接經過在全局變量中定義功能函數的方式編寫功能性質的模塊，可是咱們實際上不推崇這樣作的，由於這樣污染了全局環境，在函數化編程規範中，咱們應該聽從不污染全局變量的原則（由於污染全局變量可能會使得當前的聲明的函數與其餘模塊聲明的函數有衝突。）

 

2.使用對象的概念：

將功能性的函數存儲在對象之中能夠必定程度上避免上述的問題。

1 var testone = {
2     name: "Arvin";
3     showTime:function(){
4         alert(name);
5     }    
6 };

上面能夠看見，咱們將功能函數的封裝見有效的減小當前的全局變量中的內容，而且使得相關的功能更爲的內聚。可是與此同時是存在問題的，由於js中並無公私有的聲明，因此實際上在對象中咱們不論公有屬性或者是私有屬性將會對用戶盡收眼底。因此這也是一個安全隱患所在。

 

3.使用即執行函數對模塊進行封裝：

 1 var testtwo = (function(){
 2     
 3     var name = "Arvin";
 4 
 5     return {
 6         showTime:function(){
 7             alert(name);
 8         }
 9 
10 })();    

以上代碼中咱們能夠看到，name變量時定義在匿名函數中的，因此在返回的額對象中咱們是查找不到相應的屬性內容的，可是因爲js的數據鏈的原理，咱們的在testTwo對象的方法中其實是能夠訪問這一屬性內容的，因此這樣就造就成了一種私有屬性的形式。禁止了用戶對於這一屬性的訪問，可是與此同咱們又能夠經過對象的方法來進行屬性的訪問。這樣就很好的規避了上面的兩個問題內容。

 

4.方法3的進階

對於方法3中的對象的聲明其實是有的時候咱們須要對於它在額外的添加一些內容是的其更爲的複合咱們的需求。

1 var module = (function(mod){
2 
3     /*......*/
4     return mod;
5 
6 })(window.module || {})

經過傳遞如相關的組件的內容並以此來進行方法函數或是屬性的定義，以此來進行相關的內容的添加，固然咱們當前的對象中進行了元素的傳入，這是由於在網絡加載組件的時候並不知道組件加載的前後順序，若是直接使用當前的對象單是組件文件尚未加載完成的話，則會形成添加的變量報錯。

 

5.在咱們編寫的模塊的時候模塊的獨立性將會是十分鐘要的一個屬性，咱們在編寫的時候應該對其進行仔細的考量。獨立性好的對象能夠很好的實現複用並方便進行單元的功能測試。

在許多的文章中介紹到。在咱們編寫模塊並在其中使用到全集變量的時候，咱們應該吧全局變量做爲參數傳遞進入當前模塊。代碼以下：

1 var module1 = (function ($, YAHOO) {
2         //...
3 })(jQuery, YAHOO);

由上方可見，模塊函數中傳遞了jquery和YAHOO的全局變量，當咱們在模塊中使用的時候，是經過形參進行調用的。

 

以上只是一些模塊化的簡單的說明，若是想要更深刻的瞭解模塊化的話，咱們仍是應該在去看一看其餘的模塊化規範或者是工具。

實際上如今就有許多的模塊化的規範例如CommonJS（大名鼎鼎的node.js就是使用了這一規範）， AMD和CMD等等。請參考其它文章謝謝。

文章連接：http://www.cnblogs.com/dolphinX/p/4381855.html