前端設計模式

1.寫出 構造函數模式、混合模式、模塊模式、工廠模式、單例模式、發布訂閱模式的范例。

//構造函數模式
 function Person(name){
    this.name=name
  }
  Person.prototype.sayHello=function(){
    console.log('My name is '+this.name)
  }
  new Person('Tim').sayHello()//My name is Tim

//混合模式
 function People(name, age) {
        this.name = name;
        this.age = age;
    }
    People.prototype.sayMyName = function() {
        console.log('my name is ' + this.name);
    }
    //混合模式常用于實現繼承
    //Student繼承People
    function Student(name, age, major) {
        People.call(this);
        this.major = major;
    }
    //繼承People的prototype
    Student.prototype = Object.create(People.prototype);
    Student.prototype.constructor = Student;
    Student.prototype.myMajor = function() {
        console.log('my major is ' + this.major);
    }
    var tom = new Student('tom', '11', 'run');
    tom.sayMyName();
    tom.myMajor();

 //模塊模式
  var person=(function(){
    var name='XiaoMing'
    function sayHello(){
      console.log('My name is '+this.name)
    }
    return{
      name:name,
      sayHello:sayHello
    }
  })()

  //工廠模式
  function creatPerson(opts){
    opts=opts||{}
    var person={
      name:opts.name||'XiaoMing',
    }
    person.sayHello=function(){
      console.log('My name is '+this.name)
    }
    return person
  }
  
  var p1=creatPerson({name:'Tim'})
  var p2=creatPerson()

 //單例模式
  var people=(function(){
    var name
    function init(){
      name='XiaoMing'
      return name
    }
    return{
      sayHello:function(name){
        if(!name){
          name=init()
        }
        return name
      }
    }
  })()

 //發布訂閱模式  
  var Event=(function(){
    var events={}
    //掛載事件
    function on(event,handler){
      events[event]=events[event]||[]
      events[event].push({
        handler:handler
      })
    }
    //觸發事件
    function fire(event,args){
      if (!events[event]) return
      for (var i = 0; i < events[event].length; i++) {
        events[event][i].handler(args)
      }
    }
    //清除事件
    function off(event){
      events[event]=[]
    }
    return{
      on:on,
      fire:fire,
      off:off
    }
  })()

2.使用發布訂閱模式寫一個事件管理器,可以實現如下方式調用

 var Event=(function(){
    var events={}
    //掛載事件
    function on(event,handler){
      events[event]=events[event]||[]
      events[event].push({
        handler:handler
      })
    }
    //觸發事件
    function fire(event,args){
      if (!events[event]) return
      for (var i = 0; i < events[event].length; i++) {
        events[event][i].handler(args)
      }
    }
    //清除事件
    function off(event){
      events[event]=[]
    }
    return{
      on:on,
      fire:fire,
      off:off
    }
  })()
  Event.on('change', function(val){
    console.log('change...  now val is ' + val);  
  });
  Event.fire('change', '饑人谷');
  Event.off('changer');
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1. 寫出 構造函數模式、混合模式、模塊模式、工廠模式、單例模式、發布訂閱模式的范例。 構造函數模式 寫一個函數,...
    蕭雪圣閱讀 257評論 0 0
  • 1.寫出 構造函數模式、混合模式、模塊模式、工廠模式、單例模式、發布訂閱模式的范例。 構造函數胡模式(constr...
    饑人谷_NewClass閱讀 399評論 0 1
  • 寫出 構造函數模式、混合模式、模塊模式、工廠模式、單例模式、發布訂閱模式的范例。 工廠模式(factory) 缺點...
    放風箏的小小馬閱讀 361評論 0 2
  • 1.寫出 構造函數模式、混合模式、模塊模式、工廠模式、單例模式、發布訂閱模式的范例。 構造函數模式 構造函數模式是...
    hellowade閱讀 275評論 0 0
  • 一、構造函數模式、混合模式、模塊模式、工廠模式、單例模式、發布訂閱模式的范例 單例模式單例就是保證一個類只有一個實...
    任少鵬閱讀 392評論 0 0