前端设计模式

构造函数模式

constructor ，prototype ，new

function People(name,age){
  this.name = name
  this.age = age
  this.sayHello()
}
People.prototype.sayHello = function(){
  console.log(this.name + ': "Hello"')
}

new People('xww',12)

工厂模式

factory ，创建一个对象，return 出来

function createPeople(name){
  var people = {
    name: name
  }
  people.sayHello = function(){
    console.log(this.name + ': "Hello"')
  }
  return people
}

createPeople('xww')

单例模式

singleton ，创建不同新对象的时候都指向同一个对象，使用一个立刻执行函数，形成闭包，里面的变量不会受外部影响，而创建新对象的时候是访问的闭包里面 return 出来的一个接口，再加上判断语句就可以实现创建不同对象后都指向同一个对象

var People = (function(){
  var instence
  function init(name){
    return {
      name: name
    }
  }
  return {
    createPeople: function(name){
      if(!instence){
        instence = init(name)
      }
      return instence
    }
  }
}())  

People.createPeople('xww')  //{name: 'xww'}
People.createPeople('xwwxww')  //{name: 'xww'}

混合模式

mixin ，处理继承，一般通过构造函数

function People(name){
  this.name = name
}
People.prototype.sayHello = function(){
  console.log(this.name + ': "Hello"')
}

function Person(name,age){

//call 方法让当前的 this 传递给 People 中的 this ，实现属性的继承 
  People.call(this,name)  

  this.age = age
  this.sayHello()
  this.sayYes()
}

//给 Person 的 prototype 赋值，指向 People.prototype，实现方法继承
Person.prototype = create(People.prototype)

function create(obj){
  function f(){}
  f.prototype = obj
  return new f()
} 

//然后才可以给自己写方法
Person.prototype.sayYes = function(){
  console.log(this.name + ': "yes"')
}

new Person('xww',20)

模块模式

module，通过闭包来实现一个模块

var People = (function(){
  var name = 'xww'
  function sayHello(){
    console.log(this.name + ': "Hello"')
  }
  return {
    name: name,
    sayHello: sayHello
  }
})()

Person.name  // 'xww' ，在模块中写好的方法属性，直接使用

订阅发布模式

publish / subscibe
subscibe ：订阅，通过调用这个方法，传入事件名和需要执行的函数，但是不执行
publish ：发布，通过调用这个方法，传入事件名，执行函数

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)  //args表示函数需要传递的所有参数
    }
  }

  function off(evt){
    delete events[evt]  //直接从event对象中将订阅的键值对删除即可
  }

  return {
    on: on,
    fire: fire,
    off: off
  }
})()

订阅发布模式使用

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(evt){
    delete events[evt]
  }

  return {
    on: on,
    fire: fire,
    off: off
  }
})()

Event.on('change',function(){
  console.log('change...  now val is ' + val)
})  //完成订阅

Event.fire('change', '饥人谷')  //发布，执行函数，输出change...  now val is 饥人谷

Event.off('change')  //移除订阅
Event.fire('change')  //由于移除订阅，此时没有输出，返回undefined