關于JS模塊模式的寫法和作用

前言

本來對于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,節約了內存。

后面還有比較高級的擴展方法,不過此文章只為了闡述基礎,而且已經滿足了大部分情況的使用了,倘若以后在實際開發中用到了高級擴展的寫法,再進行總結。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容