前端設(shè)計(jì)模式

1. 寫出 構(gòu)造函數(shù)模式、混合模式、模塊模式、工廠模式、單例模式、發(fā)布訂閱模式的范例。

  • 構(gòu)造函數(shù)模式

寫一個(gè)函數(shù),把私有屬性綁定到函數(shù)內(nèi)部的this上,
把一些私有方法寫到函數(shù)的原型鏈上, 然后通過new 關(guān)鍵字來創(chuàng)建一個(gè)實(shí)例對(duì)象。

function Pepole(name, age) {
  this.name = name;
  this.age = age;
}

Pepole.prototype.sayName = funcion() {
   return this.name;
};
var student = new Pepole("xsnowholy", 22);
console.log(student);
  • 混合模式

建立在構(gòu)造函數(shù)模式的基礎(chǔ)上,實(shí)現(xiàn)子類繼承父類的屬性和方法,子類可以在擴(kuò)展屬性和方法。

var Person = function(name, age) {
    this.name = name;
    this.age = age;
};
Person.prototype.sayName = function(){
  console.log(this.name);
}
var Student = function(name, age,  score) {
    Person.call(this, name, age);
    this.score = score;
};
//Student.prototype = Object.create(Person.prototype); //ES5方法,原型鏈繼承
Student.prototype = create(Person.prototype);
function create (parentObj){                         // 兼容IE
    function F(){}
    F.prototype = parentObj;
    return new F();
};
Student.prototype.sayScore = function(){
  console.log(this.score);
}
var student = new Student("xsnowholy", 22, 95);
console.log(student);
  • 模塊模式

使用立即執(zhí)行函數(shù)包裹代碼段,使內(nèi)部的私有變量和方法不會(huì)暴露出來,通過return函數(shù)給外部提供使用內(nèi)部方法的接口。
這樣的好處是不會(huì)污染全局變量,外部無法訪問或者改變模塊內(nèi)部的變量和方法。

var Pepole = (function(){
  var name = "xsnowholy";
  return {
    sayName : function() {
      console.log(name);
    },
    changeName : function(newName) {
      name = newName;
    }
  }
})();
Pepole.sayName();
Pepole.changeName("蕭雪圣");
Pepole.sayName();
  • 工廠模式

工廠模式可以算是構(gòu)造函數(shù)模式的基礎(chǔ)版,
需要一個(gè)對(duì)象的時(shí)候可以通過這個(gè)函數(shù)創(chuàng)建一個(gè)對(duì)象,
但是這個(gè)對(duì)象沒有構(gòu)造函數(shù),無法用 instanceof 的方法判斷是否為實(shí)例。

   function createPerson(opts){
     var person = {
       name: opts.name||'xsnowholy'
     };
     person.sayName: function(){
       console.log(this.name);
     }
     return person;
   }
   var p1 = createPerson({name:'xsnowholy'});
   var p2 = createPerson({name: '蕭雪圣'});
  • 單例模式

單例模式就是,如果你要使用這個(gè)函數(shù)創(chuàng)建一個(gè)對(duì)象,如果這個(gè)對(duì)象存在則直接返回這個(gè)對(duì)象,如果對(duì)象不存在則創(chuàng)建這個(gè)對(duì)象。
無論你使用這個(gè)函數(shù)多少次,得到的都是同一個(gè)對(duì)象。

var People = (function(){
    var instance;
    function init() {
        //define private methods and properties
        //do something
        return {
            //define public methods and properties
        };
    }
    return {
        createPeople: function() {
            if (!instance) {
                instance = init();
            }
            return instance;
        }
    };
}());
var obj1 = People.createPeople();
var obj2 = People.createPeople();
  • 發(fā)布訂閱模式

發(fā)布訂閱模式,可以自定義發(fā)布事件,事件處理函數(shù),通過訂閱事件來觸發(fā)事件,執(zhí)行函數(shù)。

var EventCenter = (function() {
  var events = {};
  function on(evt, handler) {               // 發(fā)布事件
      events[evt] = events[evt] || [];
      events[evt].push({                    //   同一個(gè)事件綁定多個(gè)方法
          handler: handler
      })
  }

  function fire(evt, args) {                     //  訂閱事件
      if(!events[evt]) return;
      for (var i=0; i<events.length; i++) {
      events[evt][i].handler(args);               // 執(zhí)行事件的多個(gè)方法
     }
  }

  function off(evt) {                   // 刪除事件
      if(!events[evt]) return;
      delete events[evt];
  }

  return {
      on: on,
      fire: fire,
      off: off;  
  }

})();

EventCenter.on("myEvent", function(data){
        console.log("myEvent received...");
    })
    //發(fā)布事件

EventCenter.fire("myEvent");
    //訂閱事件,如果該事件被添加發(fā)布過,則執(zhí)行相應(yīng)的函數(shù)方法

EventCenter.off("myEvent");
    //刪除事件 myEvent 事件

2. 使用發(fā)布訂閱模式寫一個(gè)事件管理器,可以實(shí)現(xiàn)如下方式調(diào)用

Event.on('change', function(val){
    console.log('change...  now val is ' + val);  
});
Event.fire('change', '饑人谷');
Event.off('change');
var Event = (function() {
  var events = {};
  function on(evt, handler) {               // 發(fā)布事件
      events[evt] = events[evt] || [];
      events[evt].push({                    //   同一個(gè)事件綁定多個(gè)方法
          handler: handler
      })
  }

  function fire(evt, args) {                     //  訂閱事件
      if(!events[evt]) return;
      for (var i=0; i<events.length; i++) {
      events[evt][i].handler(args);               // 執(zhí)行事件的多個(gè)方法
     }
  }

  function off(evt) {                   // 刪除事件
      if(!events[evt]) return;
      delete events[evt];
  }

  return {
      on: on,
      fire: fire,
      off: off;  
  }

})();

Event.on('change', function(val){                                // 發(fā)布事件
    console.log('change...  now val is ' + val);  
});
Event.fire('change', '饑人谷');            // 訂閱事件 輸出結(jié)果: change...  now val is 饑人谷
Event.off('change');                       // 刪除事件
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 工廠模式類似于現(xiàn)實(shí)生活中的工廠可以產(chǎn)生大量相似的商品,去做同樣的事情,實(shí)現(xiàn)同樣的效果;這時(shí)候需要使用工廠模式。簡單...
    舟漁行舟閱讀 8,140評(píng)論 2 17
  • 一、6種設(shè)計(jì)模式 構(gòu)造函數(shù)constructor模式 構(gòu)造函數(shù)模式是創(chuàng)建特定類型的對(duì)象的一種模式,把私有屬性綁定到...
    yuhuan121閱讀 422評(píng)論 0 2
  • 1.寫出 構(gòu)造函數(shù)模式、混合模式、模塊模式、工廠模式、單例模式、發(fā)布訂閱模式的范例。 構(gòu)造函數(shù)胡模式(constr...
    饑人谷_NewClass閱讀 454評(píng)論 0 1
  • 一、構(gòu)造函數(shù)模式、混合模式、模塊模式、工廠模式、單例模式、發(fā)布訂閱模式的范例 單例模式單例就是保證一個(gè)類只有一個(gè)實(shí)...
    任少鵬閱讀 449評(píng)論 0 0
  • When I read the paper3,I get thecontention of the feature...
    sunsimple閱讀 388評(píng)論 0 0

友情鏈接更多精彩內(nèi)容