web中模塊化開發(fā)理解

一、什么是模塊化開發(fā)？

1.web開發(fā)中將項目的實現(xiàn)劃分為許多模塊，模塊其實就是將功能相關(guān)的代碼封裝在一起，方便維護
，重用；模塊之間通過API進行重組。

二、為什么要通過模塊化的方式進行開發(fā)？

1.高內(nèi)聚低耦合，有利于團隊作戰(zhàn)，當項目很復雜的時候，將項目劃分為子模塊分給不同的人開發(fā)

，最后再組合在一起，這樣可以降低模塊與模塊之間的依賴關(guān)系體現(xiàn)低耦合，模塊又有特定功能體

現(xiàn)高內(nèi)聚。

2.可重用，方便維護，模塊的特點就是有特定功能，當兩個項目都需要某種功能的時候，我們定義

一個特定的模塊來實現(xiàn)該功能，這樣只需要在兩個項目中都引入這個模塊就能夠?qū)崿F(xiàn)該功能，不需

要書寫重復性的代碼；并且當需求變更該功能需要改變的時候，我們直接修改該模塊，這樣就能夠

修改所有項目的功能，維護起來很方便。

3.模塊化開發(fā)會引發(fā)大量的js被引入到頁面，而這些模塊之間還是有依賴關(guān)系，體現(xiàn)在引入的順序

，其實就是模塊管理的問題，

三、模塊化開發(fā)的實現(xiàn)方式：

1.函數(shù)方式：將某種功能的代碼邏輯封裝到函數(shù)里面，然后再將這些函數(shù)抽取到一個獨立的文件，

實現(xiàn)重用。但是這種方式會導致暴露的全局函數(shù)數(shù)據(jù)量太多，會污染全局。

2.命名空間方式：其實就是暴露一個全局對象，然后把實現(xiàn)功能的函數(shù)掛到該對象下面，最為對象

的方法。缺點是對于某些函數(shù)我們并不想為外界所調(diào)用，而自定義對象的方法對外都是公開的無法

保證該函數(shù)不被調(diào)用。

3.使用具有私有空間的對象來實現(xiàn)：這種方式解決了以上幾種方式?jīng)]解決的問題，但是不具備擴展

性。

var demo = (function() {

    function private() {

    }
    function public() {

    }
    return {
        public: public
    }
})();

4.使用自執(zhí)行函數(shù)和window對象來實現(xiàn)：比如要制作一個demo模塊

• 自執(zhí)行函數(shù)傳入window.demo||{}表示如果原來全局中存在demo模塊，那么就將其進行擴展，如

沒有則創(chuàng)建一個空對象作為demo來初始化

• 同樣的傳參數(shù)的方式也可以降低對第三方框架的依賴，比如該模塊是在jquery的基礎(chǔ)上面開發(fā)

的也就是說模塊是調(diào)用jquery得api實現(xiàn)，如果有一個框架和jquery的api實現(xiàn)一樣的功能此時我們

就可以將這個模塊依賴的框架修改為另一個框架，通過改變?nèi)謱ο蟮膫魅?#xff0c;而不影響模塊的功能

(function(demo,$) {

    function private() {

    }
    demo.public:function () {
          $('.div').html('公有函數(shù)');
    }
    // 創(chuàng)建或者更新window的demo模塊
    window.demo = demo;
})(window.demo || {}，jQuery);
// 比如在此處修改傳入的jQuery對象為zepto