常见设计模式

1.写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。

//1.构造函数模式
//构造函数模式就是使用this声明变量，然后使用new声明新对象

function f1(name,age){
  this.age = age;
  this.name = name;
}
var p1 = new f1('envy',24);

//2.混合构造函数和原型模式
//在构造模式的基础上添加了原型模式，使用到原型的就是原型模式

function f2(name,age){
  this.name = name;
  this.age = age;
}
f2.prototype.sayName = function(){
  console.log(this.name);
}

var p2 = new f2("envy",23);

//3.模块模式
//为对象添加私有变量和方法，并采用对象字面量的格式返回公有的方法或属性

var f3 = function(){
  var age = 10;
  function sayAge(){
    console.log(age);
  };
  return{
    sayAge: sayAge
  }
}()
f3.sayAge;

//4.工厂模式

function f4(name,age){
  var o = new Object();
  o.name = name;
  o.age = age;
  return o;
}
var p3 = f4('greed',25);

//5.单例模式

var house = function(){
  var instance;
  function house(){

  }
  house.prototype = {
    setPrice: function(price){
      this.price = price;
    },
    available: function(state){
      this.state = state;
    },
    announce: function(){
      console.log('price is: ' + this.price + ', available: ' + this.state);
    }
  };
  if (!instance) {
    instance = new house();
  }
  return instance;
}();
house.setPrice(200);
house.available('yes');
house.announce();

//6.发布订阅模式

var EventManager = function(){
  var events = {};
  function on(evt,handler){
    events[evt] = events[evt] || [];
    events[evt].push({handler})
  }
  function fire(evt,args){
    if (!events[evt]) {
        return;
    }
    for (var i = 0; i < events[evt].length; i++) {
      events[evt][i].handler[args]
    }
  }
  return {
    on:on,
    fire:fire
  }
}();

2.使用发布订阅模式写一个事件管理器，可以实现如下方式调用。

Paste_Image.png

var EventManager = (function(){
  var events = {};
  function on(evt,handler){
    events[evt] = events[evt] || [];
    events[evt].push({handler:handler})
  }
  function fire(evt,args){
    if (!events[evt]) {
        return;
    }
    for (var i = 0; i < events[evt].length; i++) {
      events[evt][i].handler[args]
    }
  }
  function off(evt){
    if (!events[evt]) {
      return;
    }else{
      delete events[evt];
    }

  }
  return {
    on:on,
    fire:fire,
    off:off
  }
})();
EventManager.on('text:change',function(val){console.log('text:change... now val is' + val);});
EventManager.fire('text:change','饥人谷');
EventManager.off('text:change');

版权归ENVY和饥人谷所有，转载请注明出处。