前端设计模式

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

• 构造函数模式

写一个函数，把私有属性绑定到函数内部的this上，
把一些私有方法写到函数的原型链上, 然后通过new 关键字来创建一个实例对象。

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);

• 混合模式

建立在构造函数模式的基础上，实现子类继承父类的属性和方法，子类可以在扩展属性和方法。

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);

• 模块模式

使用立即执行函数包裹代码段，使内部的私有变量和方法不会暴露出来，通过return函数给外部提供使用内部方法的接口。
这样的好处是不会污染全局变量，外部无法访问或者改变模块内部的变量和方法。

var Pepole = (function(){
  var name = "xsnowholy";
  return {
    sayName : function() {
      console.log(name);
    },
    changeName : function(newName) {
      name = newName;
    }
  }
})();
Pepole.sayName();
Pepole.changeName("萧雪圣");
Pepole.sayName();

• 工厂模式

工厂模式可以算是构造函数模式的基础版，
需要一个对象的时候可以通过这个函数创建一个对象，
但是这个对象没有构造函数，无法用 instanceof 的方法判断是否为实例。

   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: '萧雪圣'});

• 单例模式

单例模式就是，如果你要使用这个函数创建一个对象，如果这个对象存在则直接返回这个对象，如果对象不存在则创建这个对象。
无论你使用这个函数多少次，得到的都是同一个对象。

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();

• 发布订阅模式

发布订阅模式，可以自定义发布事件，事件处理函数，通过订阅事件来触发事件，执行函数。

var EventCenter = (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.length; i++) {
      events[evt][i].handler(args);               // 执行事件的多个方法
     }
  }

  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...");
    })
    //发布事件

EventCenter.fire("myEvent");
    //订阅事件，如果该事件被添加发布过，则执行相应的函数方法

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

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

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) {               // 发布事件
      events[evt] = events[evt] || [];
      events[evt].push({                    //   同一个事件绑定多个方法
          handler: handler
      })
  }

  function fire(evt, args) {                     //  订阅事件
      if(!events[evt]) return;
      for (var i=0; i<events.length; i++) {
      events[evt][i].handler(args);               // 执行事件的多个方法
     }
  }

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

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

})();

Event.on('change', function(val){                                // 发布事件
    console.log('change...  now val is ' + val);  
});
Event.fire('change', '饥人谷');            // 订阅事件 输出结果: change...  now val is 饥人谷
Event.off('change');                       // 删除事件