web中模塊化開發理解

1、什麼是模塊化開發？

1.web開發中將項目的實現劃分爲許多模塊，模塊其實就是將功能相關的代碼封裝在一塊兒，方便維護
，重用；模塊之間經過API進行重組。

2、爲何要經過模塊化的方式進行開發？

1.高內聚低耦合，有利於團隊做戰，當項目很複雜的時候，將項目劃分爲子模塊分給不一樣的人開發

，最後再組合在一塊兒，這樣能夠下降模塊與模塊之間的依賴關係體現低耦合，模塊又有特定功能體

現高內聚。

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

一個特定的模塊來實現該功能，這樣只須要在兩個項目中都引入這個模塊就可以實現該功能，不需

要書寫重複性的代碼；而且當需求變動該功能須要改變的時候，咱們直接修改該模塊，這樣就可以

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

3.模塊化開發會引起大量的js被引入到頁面，而這些模塊之間仍是有依賴關係，體如今引入的順序

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

3、模塊化開發的實現方式：

1.函數方式：將某種功能的代碼邏輯封裝到函數裏面，而後再將這些函數抽取到一個獨立的文件，

實現重用。可是這種方式會致使暴露的全局函數數據量太多，會污染全局。

2.命名空間方式：其實就是暴露一個全局對象，而後把實現功能的函數掛到該對象下面，最爲對象

的方法。缺點是對於某些函數咱們並不想爲外界所調用，而自定義對象的方法對外都是公開的沒法

保證該函數不被調用。

3.使用具備私有空間的對象來實現：這種方式解決了以上幾種方式沒解決的問題，可是不具有擴展

性。

var demo = (function() {

    function private() {

    }
    function public() {

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

4.使用自執行函數和window對象來實現：好比要製做一個demo模塊

• 自執行函數傳入window.demo||{}表示若是原來全局中存在demo模塊，那麼就將其進行擴展，如

沒有則建立一個空對象做爲demo來初始化

• 一樣的傳參數的方式也能夠下降對第三方框架的依賴，好比該模塊是在jquery的基礎上面開發

的也就是說模塊是調用jquery得api實現，若是有一個框架和jquery的api實現同樣的功能此時咱們

就能夠將這個模塊依賴的框架修改成另外一個框架，經過改變全局對象的傳入，而不影響模塊的功能

(function(demo,$) {

    function private() {

    }
    demo.public:function () {
          $('.div').html('公有函數');
    }
    // 建立或者更新window的demo模塊
    window.demo = demo;
})(window.demo || {}，jQuery);
// 好比在此處修改傳入的jQuery對象爲zepto