前端常用的设计模式

1. 模块模式
   
   函数表达式中定义的变量和方法在外界是访问不到的,只能通过其向外部提供的接口(  return ),"有限制"地访问.通过函数作用域解决了属性和方法的封装问题.
    

      var Person  = (function (){
           var name = "han";
           var age = 22;
           function getName(){
               return name;
           }
           function getAge(){
               return age;
           }
           return {
               getName: getName,
               getAge: getAge,
               name:name
           }
      })();
   
       // console.log(age); // 报错:age未定义
       // console.log(name); // 报错:name未定义
       console.log(Person.age); // undefined
       console.log(Person.name); // undefined
       console.log(Person.getName()); // xin
       console.log(Person.getAge()); // 22

    

2.  工厂模式
   
    

   function Person(name, age){
       var person = new Object();
       person.name = name;
       person.age = age;
       person.printName = function(){
           console.log(this.name);
       };
       person.printAge = function(){
           console.log(this.age);
       }
       return person;  // 将对象设置为接口
   }
   
   var person = Person('han',22);

    

3. 发布-订阅模式
   
   发布-订阅模式又叫做观察者模式,定义了对象之间一对多的依赖关系,当一个对象的状态发生改变时,所有依赖与它的对象都将得到通知.
    

   定义：对象间的一种一对多的依赖关系。
   需求：当一个对象的状态发生变化时，所有依赖于他的对象都将得到通知。
    

   /**
    * 发布订阅模式
    */
   var EventCenter = (function(){
       var events = {};
       /*
       {
         my_event: [{handler: function(data){xxx}}, {handler: function(data){yyy}}]
       }
       */
       // 绑定事件 添加回调
       function on(evt, handler){
           events[evt] = events[evt] || [];
           events[evt].push({
               handler:handler
           })
       }
       function fire(evt, arg){
           if(!events[evt]){
               return 
           }
           for(var i=0; i < events[evt].length; i++){
               events[evt][i].handler(arg);
           }
       }
       function off(evt){
           delete events[evt];
       }
       return {
           on:on,
           fire:fire,
           off:off
       }
   }());
   
   var number = 1;
   EventCenter.on('click', function(data){
       console.log('click 事件' + data + number++ +'次');
   });
   EventCenter.off('click');   //  只绑定一次
   EventCenter.on('click', function(data){
       console.log('click 事件' + data + number++ +'次');
   });
   
   EventCenter.fire('click', '绑定');