js模組化開發

標籤：

為什麼要進行模組化開發？

1.當你寫了一個這樣的comm.js檔案時，裡面有function tab(){}方法，這時，你給你的同事用，你同事把這個comm.js引入頁面後，在頁面上又寫了一個function tab(){}，這時，就會覆蓋你在comm.js中的tab方法。因為這個同事不知道你comm.js中有tab這個方法名。

2.如果你同事在頁面上引入了你寫的comm.js後，又引入了一個第三方外掛程式xxx，而這個xxx外掛程式裡面剛好也有tab方法，那這時就會出現問題。你同事就會找你，說你寫的comm.js有問題。

這時，你可能會這樣寫comm.js。

var chaojidan = {};

chaojidan.tab = function(){};

這種命名空間的方式，可以降低衝突，但是無法避免衝突。

3.假如你的comm.js中現在有20個方法，但是我們的頁面現在只需要tab這個功能，也就是只需要調用tab方法。那麼，這時，你可能會把comm.js分成多個js檔案，比如:tab.js，comm.js，drag.js。這時，你的頁面就會出現引入多個js的情況，比如：

<script src="a.js"></script>

<script src="b.js"></script>

<script src="c.js"></script>

<script src="d.js"></script>

但是，如果這時a.js依賴於d.js的話，就會出現問題。

4.上面的依賴問題，有人說，可以把d.js放在a.js上面不就行了。但是這不能解決依賴問題，比如：當你這樣寫好一個頁面後，產品經理要你添加功能，這時你又添加了一個e.js，而e.js依賴於a.js。這時，你在新頁面添加新功能時，你必須把d.js，a.js，e.js按順序進行載入。當出現大規模的依賴時，你就會奔潰了。

模組化的庫，sea.js（CMD），require.js（AMD）。

我們來看看sea.js如何解決js模組化開發：

1.引入sea.js庫。

2.如何變成模組，通過define方法。比如:

define(function(require,exports,module){

　　function tab(){

　　　　....

　　}

　　exports.tab= tab;

})

這時，你在這裡定義一個function tab(){}，不會跟define裡面的那個tab方法起衝突。

3.如何調用模組？通過seajs.use()方法，比如：

seajs.use("./comm.js",function(ex){

　　ex.tab();

})

4.如何解決模組間的依賴問題，通過require方法。比如：

a.js

define(function(require,exports,module){

　　var d = require("./d.js");     //模組a相依模組d。

　　function tab(){

　　　　d.drag();

　　}

　　exports.tab= tab;

})

d.js

define(function(require,exports,module){

　　function drag(){

　　　　....

　　}

　　exports.drag= drag;

})

上面的require方法載入模組是同步的，而require.async()方法，載入模組是非同步。

他們之間的區別是什麼呢？舉個例子：

a.js

define(function(require,exports,module){

　　var d = require("./d.js");     //模組a相依模組d。

　　var ele = document.getElementById("input");   //當你在頁面上調用seajs.use("./a.js")時，頁面上的input元素就綁定了click事件。但是這時d.js，b.js，以及a.js都從伺服器下載到瀏覽器端了。儘管這時還不需要b.js模組，只有點擊了input元素才需要。這時，我們只需要把require("./b.js").scale(); 改成require.async("./b.js",function(ex){ex.scale()});這時，只會下載d.js和a.js，而b.js不會下載，只有等你click元素input時，才會去下載b.js，然後執行b.js，執行結束後，就會調用回呼函數，這時，就調用ex.scale()方法了。這叫做按需載入。

　　ele.onclick = function(){

　　　　require("./b.js").scale();       

　　}

})

b.js

define(function(require,exports,module){　　

　　function scale(){

　　　　....

　　}

　　exports.scale= scale;

})

js模組化的發展:

node.js是最早使用模組化進行開發的，遵循的規範是：CommonJS，這是服務端的模組化規範，伺服器使用此規範進行開發，是因為它所需要的檔案就在伺服器本地。而瀏覽器端需要的檔案在伺服器端，不在瀏覽器本地，因此就出現了AMD規範。

require.js遵守AMD規範，在瀏覽器端進行模組化開發的庫。

sea.js遵守CMD規範，在瀏覽器端進行模組化開發的庫。

我們開發網頁一般要遵守這種開發模式就行了：

1.底層庫jQuery

2.組件開發，可以基於jQuery

3.業務應用開發，基於jQuery和組件

通過sea.js等模組化庫，把上面所有的模組連起來。

模組化在前端開發中還是很重要的，ECMAScript第六版將正式支援模組化文法，也就是說不用利用模組化庫，就能實現模組化的功能。

 

 

 

加油！

js模組化開發