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

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

function Person(name) {
    this.name = name;
}

Person.prototype.sayName = function(){
    console.log(this.name)
}

var person = new Person('gaoyang')
person.sayName();

混合模式

function Person(name) {
    this.name = name;
}

Person.prototype.sayName = function(){
    console.log(this.name)
}

function Student(name,age) {
    Person.call(this,name);
    this.age = age;
}
Student.prototype = Object.create(Person.prototype)
Student.prototype.sayAge = function(){
    console.log(this.age)
}

var student = new Student('gaoyang','18')
student.sayName();
student.sayAge();

模塊模式

var Person = (function(){
     var name = 'gaoyang'
     function sayName() {
         console.log(name);
     }
     return {
         name: name,
         sayName: sayName
     }
})()
Person.sayName()

工廠模式

function createPerson(obj){
     var name = obj.name||'gaoyang'
     function sayName() {
         console.log(obj.name);
     }
     return {
         name: name,
         sayName: sayName
     }
}
var person = createPerson({name: 'gaoyang'})
person.sayName();

單例模式

var Person = (function(){
    var instance;
    function init(){
        return {name: 'gaoyang'}
    }
    function getInstance() {
       if(!instance){
         instance = init();
       }
       return instance;
    }
    return {
        getInstance: getInstance
    }
})()
console.log(Person.getInstance() === Person.getInstance())

發(fā)布訂閱模式

var Person = (function(){
    var events = {};
    var oneEvent = {};
    function on(event,handle){
        events[event] = events[event] || [];
        events[event].push({handle:handle})
    }
    function one(event,handle) {
        oneEvent[event] = events[event] || [];
        oneEvent[event] = {handle : handle}
    }
    function performance(event,name) {
       if(events[event].length === 0){
           return;
       }
       for(var i = 0;i<events[event].length; i++){
           events[event][i].handle(name)
       }
    }
    function performanceOne(event,name) {
       if(oneEvent[event].length === 0){
           return;
       }
       
       oneEvent[event].handle(name)
       
    }
    return {
        on: on,
        one: one,
        performance: performance,
        performanceOne: performanceOne
    }
})()

Person.on('myEvent',function(name){
  console.log(name)
})
Person.on('myEvent',function(name){
  console.log(name)
})
Person.one('myEvent2',function(name){
  console.log(name)
})
Person.one('myEvent2',function(name){
  console.log(name)
})
Person.performance('myEvent','gaoyang')
Person.performanceOne('myEvent2','gaoyang2')

任務(wù)2

var Event = (function () {
   var events = {};
   function on(event,handle) {
       events[event] = events[event] || [];
       events[event].push({handle:handle})
   }
   function off(event) {
      events[event] = [];
   }
   function fire(event,data){
       if(events[event].length === 0){
           return;
       }
       for(var i=0;i<events[event].length;i++){
           events[event][i].handle(data)
       }
   }
   return {
       on: on,
       off: off,
       fire: fire
   }
     
})()




Event.on('change', function(val){
    console.log('change...  now val is ' + val);  
});
Event.fire('change', '饑人谷');

//不執(zhí)行它,會打印三次,第一個fire執(zhí)行一次,第二個執(zhí)行兩次  ,,,,加上他執(zhí)行兩次,第一次執(zhí)行完就置空了
Event.off('change');

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

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

  • 1. 寫出 構(gòu)造函數(shù)模式、混合模式、模塊模式、工廠模式、單例模式、發(fā)布訂閱模式的范例。 構(gòu)造函數(shù)模式 寫一個函數(shù),...
    蕭雪圣閱讀 289評論 0 0
  • 1.寫出 構(gòu)造函數(shù)模式、混合模式、模塊模式、工廠模式、單例模式、發(fā)布訂閱模式的范例。 構(gòu)造函數(shù)胡模式(constr...
    饑人谷_NewClass閱讀 448評論 0 1
  • 1.寫出 構(gòu)造函數(shù)模式、混合模式、模塊模式、工廠模式、單例模式、發(fā)布訂閱模式的范例。 構(gòu)造函數(shù)模式 構(gòu)造函數(shù)模式是...
    hellowade閱讀 342評論 0 0
  • 模塊模式 工廠模式 構(gòu)造函數(shù)模式 混合模式 單例模式 發(fā)布訂閱模式 模塊模式 用于模塊封裝,用立即執(zhí)行的函數(shù)嵌套一...
    輝夜乀閱讀 372評論 0 0
  • 一、構(gòu)造函數(shù)模式、混合模式、模塊模式、工廠模式、單例模式、發(fā)布訂閱模式的范例 單例模式單例就是保證一個類只有一個實(shí)...
    任少鵬閱讀 446評論 0 0

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