一、網(wǎng)站越來越復(fù)雜，js代碼、js文件也越來越多，會遇到什么問題？

1.命名沖突

2.文件依賴問題：由于js文件是按順序執(zhí)行的，若多個js文件相互依賴，則必須寫好他們的順序。

二、 什么是模塊化

1.職責(zé)單一

2.生產(chǎn)效率高

3.便于后期維護(hù)

三、模塊化開發(fā)演變

-全局函數(shù)
-對象封裝-命名空間
-私有共有成員分離
-模塊化規(guī)范AMD和CMD

四、非模塊化開發(fā)的問題

• 命名沖突

• 文件依賴的問題

五、對象封裝

• 用命名空間的方式進(jìn)行封裝
• 先約定命名的規(guī)范的形式
• 對象里面的屬性和方法很容易被修改掉，很不安全

六、劃分私有空間

-通過匿名函數(shù)自執(zhí)行的方法封裝模塊，
-可以保護(hù)私有變量和方法

例如劃分：命名空間

-a）var name = {}
-b）通過約定的方式定義的
-c）可以解決命名沖突的問題，但是不好
-d）駝峰命名和匈牙利命名
-e）缺點(diǎn)：沒法做私有性封裝

七、模塊的維護(hù)擴(kuò)展

• 開閉原則，對修改關(guān)閉，對擴(kuò)展開放。
• 增加了代碼的健壯性和容錯性

八、模塊的第三方依賴

• 模塊職責(zé)唯一性
• 把依賴的模塊，通過依賴注入的形式，在你的參數(shù)上進(jìn)行體現(xiàn)。

// 封裝性 劃分私有空間
// 封裝性 劃分私有空間
// 開閉原則 對直接修改關(guān)閉、拓展開放
var calculator = (function(cal) {
    cal.add = function(a, b) {
        return a+b;
    }
    cal.substract = function(a, b) {
        return a-b;
    }
    return {
        add: cal.add,
        substract: cal.substract
    };
})(window.calculator || {}, window.$);// 還可以引入第三方j(luò)query插件
// 拓展
calculator.mutiply = function(a, b) {
    return a*b;
}
// 調(diào)用
calculator.add(1,3);

九、總結(jié)

• 最大的問題，規(guī)范的問題
• 如果在多人協(xié)作開發(fā)過程中，會有很大的問題
• 多人協(xié)作開發(fā)過程中：代碼的風(fēng)格一定要統(tǒng)一