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第六版將正式支持模塊化語法，也就是說不用利用模塊化庫，就能實現模塊化的功能。

 

 

 

加油！