国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Javascript設(shè)計模式學(xué)習(xí)之Module(模塊)模式

付永剛 / 2159人閱讀

摘要：實現(xiàn)模塊的幾種方法對象字面量表示法模式模式模式模塊對象字面量對象字面量型完整版配置對象基本方法根據(jù)配置信息輸出內(nèi)容重寫當(dāng)前的配置信息輸出結(jié)果值模式最初被定義為一種在傳統(tǒng)軟件工程中為類提供私有和公有封裝的方法。該模式返回一個對象。

javascript實現(xiàn)模塊的幾種方法:



對象字面量表示法


Module模式


AMD模式


CommonJS模式


ECMAScript Harmony模塊
1. 對象字面量 
/*1.對象字面量型*/
var myObjectLiteral = {

    variableKey: variableValue,

    functionKey: function(){

    }
}

//完整版
var myModule = {

    myProperty: "someValue",

    //配置對象
    myConfig: {
        useCaching: true,
        language: "zh-cn"
    },

    //基本方法
    myMethod: function(){
        //todo ..
    },

    //根據(jù)配置信息輸出內(nèi)容
    myMethod2: function(){
        console.log("caching is:"+(this.myConfig.useCaching)?"enabled":"disabeld");
    },

    //重寫當(dāng)前的配置信息
    myMethod3: function(newConfig){
        if(typeof newConfig === "object"){
            this.myConfig = newConfig;
            console.log(this.myConfig.language);
        }
    }


};

/*輸出結(jié)果值*/
myModule.myMethod();
myModule.myMethod2();  //caching is enabled;
var config = {
    useCaching: false,
    language: "en"
}
myModule.myMethod3(config);  //en
2. Module模式 
最初被定義為一種在傳統(tǒng)軟件工程中為類提供私有和公有封裝的方法。
方式: Module模式用于進(jìn)一步模擬類的概念,
好處: 能夠使一個多帶帶的對象擁有公有/私有方法和變量,從而屏蔽來自全局作用域的特殊部分
結(jié)果: 函數(shù)名與在頁面上其他腳本定義的函數(shù)沖突的可能性降低
2.1 私有

只需要返回一個公有API,其他的一切都可以放在私有必包里。該模式返回一個對象。

var testModule = (function(){
     var counter = 0;
     
     return {
         incrementCounter: function(){
              return ++counter;
         },
         resetCounter: function(){ 
              console.log("value: "+counter);
              counter = 0;
         }
    }
})();
console.log(testModule);  //打印出來的結(jié)果是一個對象
//Object {} incrementCounter: () resetCounter: ()

testModule.incrementCounter();    //增加計數(shù)器
testModule.resetCounter();        //充值計數(shù)器

在上面的例子中,counter變量實際上完全與全局作用域隔離,進(jìn)而表現(xiàn)的像一個私有變量。代碼的其他部分無法直接讀取incrementCounter()和resetCounter()。

包含命名空間,公有和私有變量的Module模式:

var myNamespace = (function(){
    var myPrivateVar = 0;
    var myPrivateMethod = function(foo){
        console.log(this+"/"+arguments.caller+"/"+arguments.callee);
        console.log(foo);
        console.log(myPrivateVar);
    };
    
    return {
         //公有變量
         myPublicVar: "foo",
         //調(diào)用私有變量和私有方法的公有函數(shù)
         myPublicFunction: function(bar){
              myPrivateVar++;
              myPrivateMethod(bar);
         }
    };
})();
console.log(myNamespace);
myNamespace.myPublicFunction("liuyidi");
2.2 使用Module模式實現(xiàn)一個購物車模塊 
var basketModule = (function(){
    //定義一個私有數(shù)組
    var basket = [];
    
    function doSomethingPrivate(){
       //...
    }
    
    function doSomethingElsePrivate(){
       //...
    }
    
    //返回一個暴露出的公有對象
    return {
       //添加item到購物車
       addItem: function(values){
          basket.push(values);
       },
       
       //從購物車刪除item
       delItem: function(values){
          basket.pop(values);
       },
       
       //獲取購物車?yán)锏膇tem數(shù)
       getItemCount: function(){
          return basket.length;
       },
       
       //私有函數(shù)的公有形式別名
       doSomething: doSomethingPrivate,
       
       //獲取購物車?yán)锼衖tem的價格總值
       getTotal: function(){
          var itemCount = this.getItemCount(),
              total = 0;
          while(itemCount--){
              total += basket[itemCount].price;
          }
          
          return total;
       }
    };    
})();
console.log(basketModule);
basketModule.addItem({item:"xs",price: 0.5});
basketModule.addItem({item:"bc",price: 0.6});
basketModule.addItem({item:"dj",price: 0.8});
console.log(basketModule.getItemCount());
console.log(basketModule.getTotal());
basketModule.delItem({item:"bc",price: 0.6});

(未完待續(xù))

2.3 Module模式變化 2.3.1 引入混入 
var myModule = (function($,_){
    
    function privateMethod1(){
        $(".container").html("test");
    }
    
    function privateMethod2(){
        console.log(_.min([10, 5, 100, 2, 1000]));
    }
    
    return {
        publicMethod: function(){
           privateMethod1();
        }
    }
})(jQuery,_);
2.3.2 引出 
聲明一個全局對象之后,再返回
var myModule = (function(){
   //模塊對象
   var module = {},
       privateVar = "hello,world";
   
   function privateMethod(){
      //...
   }

   module.publicProperty = "Foobar";
   module.publicMethod = function(){
      console.log(privateVar);
   };

   return module;
})();
2.3.3 工具包和特定框架的Module模式實現(xiàn) 
Dojo,ExtJS,YUI,jQuery

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/78852.html

相關(guān)文章

  • Javascript設(shè)計模式學(xué)習(xí)之Decorator(裝飾者)模式

    摘要：抽象模式使用的裝飾者模式允許我們在運(yùn)行時或者在隨后一個點(diǎn)上動態(tài)地將兩個或兩個以上的對象和它們的屬性一起擴(kuò)展或合并為一個單一對象。定義三個對象目的是為了裝飾對象將的額外功能附加到上。 抽象decorator模式 使用jQuery的裝飾者模式 jQuery.extend()允許我們在運(yùn)行時或者在隨后一個點(diǎn)上動態(tài)地將兩個或兩個以上的對象(和它們的屬性)一起擴(kuò)展(或合并）為一個單一對象。 定義...

    Joyven 評論0 收藏0

  • Javascript設(shè)計模式學(xué)習(xí)之Observer(觀察者)模式

    摘要：一個對象維持一系列依賴于它觀察者的對象，將有關(guān)狀態(tài)的任何變更自動通知給它們。觀察者模式的實現(xiàn)模擬擁有的一系列依賴使用擴(kuò)展對象模擬目標(biāo)和在觀察者列表上添加刪除或通知觀察者 一個對象（subject)維持一系列依賴于它(觀察者）的對象，將有關(guān)狀態(tài)的任何變更自動通知給它們。 當(dāng)一個目標(biāo)需要告訴觀察者發(fā)生了什么有趣的事情,它會向觀察者廣播一個通知 當(dāng)我們不再希望某個特定的觀察者獲取其注冊目...

    DevWiki 評論0 收藏0

  • Javascript學(xué)習(xí)之創(chuàng)建對象

    摘要：在中，除了幾種原始類型外，其余皆為對象，，既然對象如此重要，那就列舉一下在中如何創(chuàng)建對象通過構(gòu)造函數(shù)創(chuàng)建對象實例對象字面量對象字面量是對象定義的一種簡寫形式，目的在于簡化創(chuàng)建包含大量屬性的對象的過程。 在Javascript中，除了幾種原始類型外，其余皆為對象（Object，Array ...），既然對象如此重要，那就列舉一下在Javascript中如何創(chuàng)建對象： 通過Object構(gòu)造...

    jollywing 評論0 收藏0

  • MongoDB學(xué)習(xí)之Mongoose的使用

    摘要：文檔是的核心概念，是鍵值對的一個有序集，在里文檔被表示成對象。創(chuàng)建集合數(shù)據(jù)庫中的集合名稱當(dāng)我們對其添加數(shù)據(jù)時如果已經(jīng)存在，則會保存到其目錄下，如果未存在，則會創(chuàng)建集合，然后在保存數(shù)據(jù)。使用創(chuàng)建，如下示例連接成功許巍男保存成功保存失敗參考 mongoose簡介 mongoose網(wǎng)站：https://mongoosejs.com/ 為什么要用Mongoose Mongoose就是一個讓我們...

    qieangel2013 評論0 收藏0

  • 【搶先領(lǐng)】《React 學(xué)習(xí)之道》我們翻譯了一本最簡單，且最實用的 React 實戰(zhàn)教程……

    摘要：學(xué)習(xí)之道簡體中文版通往實戰(zhàn)大師之旅掌握最簡單，且最實用的教程。前言學(xué)習(xí)之道這本書使用路線圖中的精華部分用于傳授，并將其融入一個獨(dú)具吸引力的真實世界的具體代碼實現(xiàn)。完美展現(xiàn)了的優(yōu)雅。膜拜的學(xué)習(xí)之道是必讀的一本書。 《React 學(xué)習(xí)之道》The Road to learn React (簡體中文版) 通往 React 實戰(zhàn)大師之旅：掌握 React 最簡單，且最實用的教程。 showIm...

    oneasp 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<