JS设计模式

*工厂模式factory

DEMO                                         使用场景：创建一个简单的对象
   function Person(name) {                  
     var temp={                           
       temp.name=name;
       temp.sayName=function () {
         console.log(this.name);
       }
     };
     return temp;
   }
   createPerson("Lucy");                     生成实例 = 创建一个新的引用方式
   createPerson("Eall");                                 开辟新的内存空间

   与构造函数同为 引用类型 ； 但无法知道实例是由哪个构造函数创建的

*构造函数模式constructor

DEMO                                          使用场景：创建一个复杂的对象，可以添加方法
   function People(name,age){                  
       this.name = name;                      写一个函数
       this.age = age;                         绑定this
   }
   People.prototype.sayName = function(){      将方法挂在函数原型上
        console.log(this.name)
   }
   var singer = new People('Jay','33');        使用new生成实例 开辟内存空间
   singer.sayName();

*单例模式single

DEMO                                 使用场景：只需出现一次，独一无二的组件
    var Person=(function () {                 一个立即执行函数
      var temp;
      function init(name,age) {                
        return {
            name:name,
            age:age,
            sayName:function () {
                console.log(this.name);       return出来的值是 闭包里的变量
             }
          }
       }
       return {
          createPerson:function (name,age) {
            if(!temp){                        // 如果没有temp就初始化
                temp=init(name,age);       
            }                             // 所以第一次调用就初始化，之后不再执行这段代码
            return temp;                      
          }                                  单例就是只开辟了一个内存空间
       }                                     第一次传入的值被储存下来
    }());                                    之后生成的实例全都指向同样的地方 
    Person.createPerson("lucy",23); // lucy
    Person.createPerson("lily",24);// lucy

*混合模式mixin

DEMO                                            使用场景：可继承的公用方法
   function Person(name,age) {                           构造函数 1
       this.name=name;
       this.age=age;
   }
   Person.prototype.sayName=function () {                 
       console.log(this.name);
   }

   function Student(name,age,score) {                    构造函数 2
       Person.call(this,name,age);
       this.score=score;
   } 
   Student.prototype.sayScore=function () {     
       console.log(this.score);
   }

inherit 1：
   function inherit(parent,sun) {                        
       sun.prototype=Object.create(parent.prototype);    差异化继承
       sun.prototype.constructor=sun;
   }
   inherit(Person,Student);                              2就继承了 1
inherit 2：
   student.prototype=create(parent.prototype); 
   function creat(parentObj){
       function F(){}//新建一个空对象
       F.prototype=parentObj;//原型指向参数
       return new F;//实例化一个原型指向参数的空对象
   }

   var student1=new Student("lucy",24,100);
   student1.sayScore();
   student1.sayName();

*模块模式moudle

DEMO                                       使用场景：需要封装的组件
   var person=(function () {
        var name="lucy",            一个模块 = 一个私有作用域 = 一个匿名函数
        age=23;
      function sayName() {
        console.log(name);
      }// 词法作用域：一个函数可以访问到的上下文环境由它所定义的位置决定。
      return{                                     
        name:name,                      留出接口
        age:age,
        sayName:sayName
      }
   })();
   person.sayName();

*发布订阅模式subscribe publish

DEMO
    var EventCenter=(function () {  // 新建订阅中心

      var events={};                // 新建缓存列表，存储订阅者的回调函数

      function on(evt,handler) {    // 添加消息：绑定事件
        events[evt]=events[evt]||[];// 检查事件列表events{}里是否有这个key 
                                       *如果有，那就是这个事件了；
                                       *如果没有，就初始化这个数组，加入事件
        events[evt].push({          // 在[]里增加一个函数
            handler:handler         // 即 events={evt:[handler:handler]}
        })                               events={事件：[订阅者1：function(args){...}; 
       }                                               订阅者2：function(args){...};
                                                                                  ] }
      function off(evt) {           // 解除订阅：移除事件
        delete events[evt];
      }
      function fire(evt,args) {     // 发布订阅：触发事件
        if(!events[evt]){           // 如果evt不存在，就返回
            return;
        }                           // 如果存在，遍历列表events，依次执行处理程序
        for(var i=0;i<events[evt].length;i++){
            events[evt][i].handler(args);
        }
      }
      return {
        on:on,                       // 导出接口
        off:off,
        fire:fire
      }
    })();
    EventCenter.on('change', function(val){
      console.log('change...  now val is ' + val);
    });
    EventCenter.fire('change', '饥人谷'); //change...  now val is 饥人谷
    EventCenter.off('change');

    优点：代码解耦；异步使用；实现自定义组件