前端设计模式

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

1. 模块模式
   var Person = (function(){
   var name = 'liqi';
   function sayName(){
   console.log(name)
   }
   return {
   name: name,
   sayName: sayName
   }
   })() //把一个立即执行函数赋给对象，对象的属性隐藏在函数的return中，
   //利用外部无法访问函数内的局部变量的特性，起到了封装的作用
   Person.sayName() //liqi

2. 构造函数模式
   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. 混合模式，同时使用构造函数模式和继承
   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构造的对象继承Person的name, sex属性
        this.grade = grade;
    };
    Student.prototype = Object.create(Person.prototype); //指定Student的原型为Person，实现继承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}); //以传入的参数创建对象 
    p1.sayName() //liqi
   

5. 单例模式
   var singlePerson = (function(){
   var exist;
   function init(){
   //定义局部变量
   return{
   //定义属性和方法
   };
   }
   return{
   isExist: function(){
   if(!exist){ //第一次创建对象,exist不存在，调用init()
   exist = init();
   }
   return exist; //第二次创建，exist存在，返回相同的init()
   }
   };
   })();
   var p1 = singlePerson.isExist();
   var p2 = singlePerson.isExist(); //p1 === p2 ,true,两次创建的对象，属性和方法相同

6. 发布订阅模式 解耦代码
   var EventCenter = (function(){
   var events = {};

        function on(e,fn){  //'event'==>e ,function(data){}==>fn
            events[e] = events[e] || []; //判断events中是否存在{ event: [] },没有则创建
            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则执行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. 使用发布订阅模式写一个事件管理器，可以实现如下方式调用

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: [] },没有则创建
        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则执行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');