一、網站越來越復雜,js代碼、js文件也越來越多,會遇到什么問題?
1.命名沖突
2.文件依賴問題:由于js文件是按順序執行的,若多個js文件相互依賴,則必須寫好他們的順序。
二、 什么是模塊化
1.職責單一
2.生產效率高
3.便于后期維護
三、模塊化開發演變
-全局函數
-對象封裝-命名空間
-私有共有成員分離
-模塊化規范AMD和CMD
四、非模塊化開發的問題
命名沖突
文件依賴的問題
五、對象封裝
- 用命名空間的方式進行封裝
- 先約定命名的規范的形式
- 對象里面的屬性和方法很容易被修改掉,很不安全
六、劃分私有空間
-通過匿名函數自執行的方法封裝模塊,
-可以保護私有變量和方法
例如劃分:命名空間
-a)var name = {}
-b)通過約定的方式定義的
-c)可以解決命名沖突的問題,但是不好
-d)駝峰命名和匈牙利命名
-e)缺點:沒法做私有性封裝
七、模塊的維護擴展
- 開閉原則,對修改關閉,對擴展開放。
- 增加了代碼的健壯性和容錯性
八、模塊的第三方依賴
- 模塊職責唯一性
- 把依賴的模塊,通過依賴注入的形式,在你的參數上進行體現。
// 封裝性 劃分私有空間
// 封裝性 劃分私有空間
// 開閉原則 對直接修改關閉、拓展開放
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.$);// 還可以引入第三方jquery插件
// 拓展
calculator.mutiply = function(a, b) {
return a*b;
}
// 調用
calculator.add(1,3);
九、總結
- 最大的問題,規范的問題
- 如果在多人協作開發過程中,會有很大的問題
- 多人協作開發過程中:代碼的風格一定要統一