1. 寫出 構(gòu)造函數(shù)模式、混合模式、模塊模式、工廠模式、單例模式、發(fā)布訂閱模式的范例。

1. 模塊模式
   var Person = (function(){
   var name = 'liqi';
   function sayName(){
   console.log(name)
   }
   return {
   name: name,
   sayName: sayName
   }
   })() //把一個(gè)立即執(zhí)行函數(shù)賦給對(duì)象，對(duì)象的屬性隱藏在函數(shù)的return中，
   //利用外部無(wú)法訪問(wèn)函數(shù)內(nèi)的局部變量的特性，起到了封裝的作用
   Person.sayName() //liqi

2. 構(gòu)造函數(shù)模式
   function Person(name,age){
   this.name = name;
   this.age = age;
   }
   Person.prototype.sayName = function(){
   return(this.name)
   };

    var person = new Person('liqi',24);
    console.log(person) //Person {name: "liqi", age: 24}
    person.sayName('liqi') //'liqi'
   

3. 混合模式，同時(shí)使用構(gòu)造函數(shù)模式和繼承
   function Person(name,age){
   this.name = name;
   this.age = age;
   }
   Person.prototype.sayName = function(){
   console.log(this.name)
   };

    var Student = function(name,age,grade){
        Person.call(this,name,age) //使Person的this指向Student,使Student構(gòu)造的對(duì)象繼承Person的name, sex屬性
        this.grade = grade;
    };
    Student.prototype = Object.create(Person.prototype); //指定Student的原型為Person，實(shí)現(xiàn)繼承Person原型里的屬性和方法
    Student.prototype.sayGrade = function(){
        console.log(this.grade)
    }
    var student = new Student('liqi',24,'senior');
    console.log(student)
   

4. 工廠模式
   function createPerson(options){
   var person = {
   name: options.name || 'Mr.Lee',
   age: options.age || '18'
   }
   person.sayName = function(){
   console.log(this.name)
   }
   return person
   }

    var p1 = createPerson({name: 'liqi', age: 24}); //以傳入的參數(shù)創(chuàng)建對(duì)象 
    p1.sayName() //liqi
   

5. 單例模式
   var singlePerson = (function(){
   var exist;
   function init(){
   //定義局部變量
   return{
   //定義屬性和方法
   };
   }
   return{
   isExist: function(){
   if(!exist){ //第一次創(chuàng)建對(duì)象,exist不存在，調(diào)用init()
   exist = init();
   }
   return exist; //第二次創(chuàng)建，exist存在，返回相同的init()
   }
   };
   })();
   var p1 = singlePerson.isExist();
   var p2 = singlePerson.isExist(); //p1 === p2 ,true,兩次創(chuàng)建的對(duì)象，屬性和方法相同

6. 發(fā)布訂閱模式 解耦代碼
   var EventCenter = (function(){
   var events = {};

        function on(e,fn){  //'event'==>e ,function(data){}==>fn
            events[e] = events[e] || []; //判斷events中是否存在{ event: [] },沒(méi)有則創(chuàng)建
            events[e].push({ 
                handler: fn  //events：[ { handler: fn } ]
            });
        }
        function fire(evt,args){
            if(events[evt]){
                return;
            }
            for (var i = 0; i < events[evt].length; i++) { //遍歷events[evt]，有handler則執(zhí)行handler：fn(args){}
                events[evt][i].handler(args);
            }
            }
        }
   
        return {
            on: on,
            fire: fire
        }
    })();
   
    EventCenter.on('event',function(data){
        console.log('event start')
    })
    EventCenter.fire('event')
   

2. 使用發(fā)布訂閱模式寫一個(gè)事件管理器，可以實(shí)現(xiàn)如下方式調(diào)用

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(e,fn){  //'event'==>e ,function(data){}==>fn
        events[e] = events[e] || []; //判斷events中是否存在{ event: [] },沒(méi)有則創(chuàng)建
        events[e].push({ 
            handler: fn  //events：[ { handler: fn } ]
        });
    }
    function fire(evt,args){
        if(events[evt]){
            return;
        }
        for (var i = 0; i < events[evt].length; i++) { //遍歷events[evt]，有handler則執(zhí)行handler：fn(args){}
            events[evt][i].handler(args);
        }
        }
    }
    function off(evt,args){
        delete events[e]
    }

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

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