js模塊模式

一、Module模式

最初被定義為一種在傳統軟件工程中為類提供私有和公有封裝的方法。

在js中,Module模式用于進一步模擬類的概念,通過這種方式,能夠使一個單獨的對象用于公有/私有方法和變量,從而屏蔽來自全局作用域的特殊部分。產生的結果是:函數名與在頁面上其他腳本定義的函數沖突的可能性降低。

  var myNamespace=(function(){
    //私有計數器變量
    var myPrivateVar=0;
    //記錄所有參數的私有函數
    var myPrivateMethod=function(foo){
      console.log(foo);
    }
    return{
      //公有變量
      myPublicVar:"foo",
      //調用私有變量和方法的公有函數
      myPublicFunction:function(bar){
          //增加私有計數器值
          myPrivateVar++;
          //傳入bar調用私有方法
          myPrivateMethod(bar);
      }
  };
})();

二、私有

Module模式使用閉包封裝“私有”狀態和組織。它提供了一種包裝混合公有/私有方法和變量的方式,防止其泄露至全局作用域,并與別的開發人員的接口發生沖突。通過該模式,只需返回一個公有API,而其他的一切則都維持在私有閉包里 。

 var basketModule=(function(){
    //私有
    var basket=[];
    function doSomethingPrivate(){
        console.log("private");
    }
    function doSomethingElsePrivate(){
        //
    }
    //返回一個暴露出的公有對象
    return{
        //添加item到購物車
        addItem:function(values){
            basket.push(values);
        },
        //獲取購物車里的item數
        getItemCount:function(){
            return basket.length;
        },
        //私有函數的公有形式別名,
        // doSomething:doSomethingPrivate自動調用doSomethingPrivate函數
        doSomething:doSomethingPrivate,
        //獲取購物車里所有item的價格總值
        getTotal:function(){
            var itemCount=this.getItemCount(),total=0;
            while(itemCount--){
                total+=basket[itemCount].price;
            }
            return total;
        }
    };
})();

//basketModule返回了一個擁有公用API的對象
basketModule.addItem({
    item:"bread",
    price: 0.5
});
basketModule.addItem({
    item:"butter",
    price:0.3
});
console.log(basketModule.getItemCount());
console.log(basketModule.getTotal());
//會打印一個private和一個undefined,原因不明
console.log(basketModule.doSomething());
console.log(basketModule.basket);
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 在js的懶漢式單例模式中,其實也用到了另一種設計模式,即模塊模式。在傳統軟件工程中,模塊模式被定義為給類提供私有和...
    200813閱讀 469評論 0 0
  • 前言 本來對于js中模塊模式這個詞還沒有很清晰的定義,但在看一個小項目的時候發現了用模塊模式定義工具函數的作用,而...
    一點紅3340閱讀 550評論 0 0
  • 當一個javascript文件很大的時候,會出現一些問題:1.里面定義了大量的變量,你不得不把變量的名字寫的越來越...
    我是漸漸呀閱讀 404評論 0 0
  • 定義函數的方式有兩種:函數聲明和函數表達式。 函數聲明的一個重要特征就是函數聲明提升,意思是在執行代碼前會先讀取函...
    oWSQo閱讀 686評論 0 0
  • リオデジャネイロ:RiodeJaneiro(リオ) せいか:聖火 リレー:relay 受け継いで次々に渡していくこ...
    咬牙堅持到最后閱讀 241評論 0 0