一.模組開發的概念

模組化開發是什麼：模組化開發是一種生產方式，這種方式生產效率高，維護成本低。從軟體開發的角度說，模組化開發是一種開發模式，寫程式碼的一種方式，開發效率高，維護成本低。

為什麼需要模組化開發：當一個專案開發的越來越複雜的時候，會遇到一些問題,比如命名衝突（重新命名），檔案依賴（程式碼重用時，引入的js檔案少了或者順序不對都會造成js無法執行，例如 jq必須要在bootstrap之前先引入）

二.模組開發的演變過程  

1.全域性函式：早期開發就是將一些重複的程式碼封裝到函式中，然後將函式放到一個檔案中，這種情況下只能認為他們是一個模組，這沒有任何模組的概念，

存在的問題：汙染全域性變數，可能導致命名衝突，模組成員之間看不出聯絡（？）

2.物件封裝--名稱空間    利用單例模式進行模組化開發

var calculator = { 
    add: function(a, b) { return parseFloat(a) + parseFloat(b); }, 
    subtract: function(a, b) {}, 
    multiply: function(a, b) {}, 
    divide: function(a, b) {} 
};

通過新增名稱空間的方式從某種程度上解決了命名衝突的問題，但是並不能從根本上解決命名衝突（？）。不過此時從程式碼上可以看書那些函式屬於同一模組

存在問題：暴露了所有的模組成員，內部狀態可以被改寫，不安全

3.私有公有成員分離

var calculator = (function () { 
    // 這裡形成一個單獨的私有的空間 
    // 私有成員的作用： 
    // 1、將一個成員私有化 
    // 2、抽象公共方法（其他成員中會用到的） 
    // 私有的轉換邏輯 
    function convert(input){ return parseInt(input); } 
    function add(a, b) { return convert(a) + convert(b); } 
    function subtract(a, b) {} 
    function multiply(a, b) {}
    function divide(a, b) {} 
    return { add : add, subtract : subtract, multiply : multiply, divide : divide } 
})();

 

     1.利用此種方式將函式包裝成一個獨立的作用域，私有空間的變數和函式不會影響到全域性作用域

     2.可以有選擇的對外暴露成員方法或者成員屬性

     3.從某種意義上 解決了變數名衝突的問題

4. 模組的擴充套件與維護

// 計算模組
(function (calculator) {
    function convert(input) {
        return parseInt(input);
    }
    calculator.add = function(a, b) {
        return convert(a) + convert(b);
    }
    window.calculator = calculator;
})(window.calculator || {});

// 新增需求
(function (calculator) {
    calculator.remain = function (a , b) {
        return a % b;
    }
    window.calculator = calculator;
})(window.calculator || {});
        
alert(calculator.remain(4,3));

1. 利用此種方式，有利於對龐大的模組的子模組劃分。
2. 實現了開閉原則：對新增開發，對修改關閉。對於已有檔案儘量不要修改，通過新增新檔案的方式新增新功能。

總結：在什麼場景下使用模組化開發

• 業務複雜
• 重用邏輯非常多
• 擴充套件性要求較

單例模式：

用單例模式來實現模組化開發

把描述同一個物體相同的屬性和方法放在同一個名稱空間下，且名稱空間都是單獨的個體，並且名稱空間之間相互獨立不衝突  這叫做單例模式

通俗點說單例模式就是一個破物件