前端设计模式

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

工厂模式

<script>
    // 缺点：无法知道实例是由哪个构造函数创建的
    function Person(name,age){
        var message = {};
        message.name = name;
        message.age = age;
        message.sayAge = function(){
            console.log(this.age);
        }
        return message
    }
    var Person1 = Person('xiaoming',22);
    Person1.name; //xiaoming
    Person1.age;  //22
    Person1.sayAge();  //22
</script> 

模块模式

<script>
  var Person = (function(){
     var name = 'xiaoming',
         age = 22;

     function sayAge(){
        console.log(name);
     };

     return {
        name:name,
        age:age,
        sayAge:sayAge
     }
  })()

  Person.name; //xiaoming
  Person.age;  //22
  Person.sayAge();  //xiaoming
</script>

构造函数模式

<script>
  function Person(name,age){
     this.name = name;
     this.age = age;
  };
  Person.prototype.sayAge = function(){
     console.log(this.age)
  };
  var person1 = new Person('xiaoming',22)
  person1.sayAge(); //22
</script>

混合模式==继承

<script>
    function Person(name,age){
     this.name = name;
     this.age = age;
    };
    Person.prototype.sayAge = function(){
     console.log(this.age);
    };

    function Student(name,age,score){
     Person.call(this,name,age);
     this.score = score
    };

    Student.prototype = Object.create(Person.prototype);
    Student.prototype.constructor = Student;

    Student.prototype.sayScore = function(){
     console.log(this.score);
    };

    var student1 = new Student('xiaoming',22,88);
    student1.sayAge(); //22
    student1.sayScore(); //88
</script>

单例模式

 <script>
      var Person = (function(){
         var temp;
         function init(name,age){
            return {
               name:name,
               age:age,
               sayName:function(){
                  console.log(this.name);
               }
            }
         };
         return {
            createPerson:function(name,age){
               if(!temp){
                  temp = init(name,age);
               }
               return temp;
            }
         }
      }());

      var person1 = Person.createPerson('xiaoming',22);
      var person2 = Person.createPerson('xiaohong',10);
   </script>

Paste_Image.png

发布订阅模式

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

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

  EventCenter.on('change',function(val){
     console.log('change... now val is' + val);
  });
   EventCenter.on('change',function(val){
     console.log('change2... now val is' + val);
  });
  EventCenter.fire('change','jirengu'); 
  //打印结果 change... now val isjirengu
  //change2... now val isjirengu
  EventCenter.off('change');

</script>

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

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

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

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

  EventCenter.on('change',function(val){
     console.log('change... now val is ' + val);
  });
   EventCenter.on('change',function(val){
     console.log('change2... now val is ' + val);
  });
  EventCenter.fire('change','杭州'); 
  //打印结果 change... now val is 杭州
  //change2... now val is 杭州
  EventCenter.off('change');

</script>

---