前端设计模式

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

• 构造函数模式

var person = function(name,age){
    this.name = name;
    this.age = age;
    console.log(this.name,this.age);
}
var a = new person("小明",18) 

• 混合模式

var Person = function(name,age){
    this.name = name;
    this.age = age;
    console.log(this.name,this.age);
}
Person.prototype.sayNameAge = function(){
    console.log('my name is ' + this.name + ',' + this.age + 'years old')
}
var Student = function(name,age,subject){
    Person.call(this,name,age);
    this.subject = subject;
}
Student.prototype.saySubject = function(){
    console.log('I like' + this.subject);
}
/*function create (parentObj){
    function F(){}
    F.prototype = parentObj;
    return new F();
};*/
var a = new Student('小明',18,'哲学');
console.log(a.saySubject());

• 模块模式

var Person = (function(){
    var name = '小明';
    function sayName(){
        console.log(name);
    }
    function changeName(newName){
                name = newName
        }
    return {
        name: name,
                changeName : changeName,
        sayName: sayName
    }
})()
Person.sayName();
Person.changeName('小黑');
Person.sayName();

• 工厂模式

   function createPerson(opts){
     var person = {
       name: opts.name||'hunger',
       age: opts.age||20
     };
     person.sayNameAge = function(){
       console.log(this.name,this.age);
     }
     return person;
   }
   var p1 = createPerson({name:'小明',age : 18});
    var p2 = createPerson({name:'小王'});

• 单例模式

var People = (function(){
    var instance;
    function init(name) {
        
        return {
            name : name
        };
    }
    return {
        createPeople: function(name) {
            if (!instance) {
                instance = init(name);
            }
            return instance;
        }
    };
}());
People.createPeople('小明'); //{name :小明}
People.createPeople('123'); //{name :小明}

• 发布订阅模式

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[evt].length; i++){
      events[evt][i].handler(args);
    }
  }

  function off(name){
    delete events[name];
  }
  return {
    on: on,
    fire: fire,
    off: off
  }
})();
EventCenter.on('my_event', function(data){
  console.log('my_event received...');
});
EventCenter.on('my_event', function(data){
  console.log('my_event2 received...');
});
EventCenter.fire('my_event');// my_event received... , my_event2 received...   undefined
EventCenter.off('my_event'); // undefined

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

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

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[evt].length; i++){
      events[evt][i].handler(args);
    }
  }

  function off(name){
    delete events[name];
  }
  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');