前言
本來對于js中模塊模式這個詞還沒有很清晰的定義,但在看一個小項目的時候發現了用模塊模式定義工具函數的作用,而且已經被很多大公司使用的ECMAScript標準第六版,正式支持"類"和"模塊",下面這種寫法可能以后會被取代吧,不過也是目前流行的寫法,暫且記錄著。
簡介
首先我們來看看Module模式的基本特征:
- 模塊化,可重用
- 封裝了變量和function,減少全局變量的使用(不遺留和污染全局變量)
- 私有方法和私有變量全部隱藏(更安全),并提供公有接口
Module模式最簡單的方式:
var Calculator = function (eq) {
//這里可以聲明私有成員
var eqCtl = document.getElementById(eq);
return {
// 暴露公開的成員
add: function (x, y) {
var val = x + y;
eqCtl.innerHTML = val;
}
};
};
需要如此調用:
var calculator = new Calculator('eq');
calculator.add(2, 2);
每次用的時候都要new一下,也就是說每個實例在內存里都是一份copy,浪費了很多內存
立即執行函數寫法:
var module1 = (function(){
var _count = 0;
var m1 = function(){
//...內部代碼
};
var m2 = function(){
//...內部代碼
};
return {
m1 : m1,
m2 : m2
};
})();
使用上面的閉包寫法,外部代碼無法讀取內部的_count變量,并且私有方法m1和m2不會暴露,而且函數會立即執行,將私有方法集合保存到module1變量(module1本來是一個方法,因為它立即執行,所以會偽裝成一個變量),之后使用module1.m1()或module1.m2()的方式訪問私有變量(_count)并且可以傳入參數執行內部代碼,這樣的調用方法會讓內存中只存在一份copy,節約了內存。
后面還有比較高級的擴展方法,不過此文章只為了闡述基礎,而且已經滿足了大部分情況的使用了,倘若以后在實際開發中用到了高級擴展的寫法,再進行總結。