计算机应用前端设计,前端设计模式

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

function createPerson(opt){    var person = function(){

name = opt.name || 'huang'

}

person.sayName = function(){      console.log(this.name);

}

}  var p1 = createPerson({name:'ruoyu'});  var p2 = createPerson({name:'饥人谷'})//  构造函数模式

function Person(name,age){        this.name = name;        this.age = age;

}

Person.prototype.sayName = function(){        return this.name;

}    var p1 = new Person('ruoyu',30);    console.log(p1);//  模块模式

var Person = (function(){        var name = 'ruoyu';        function sayName(){            return this.name;

}        return {            name:name,            sayName:sayName

}

})();    var p1 = Person.sayName;    console.log(p1)//  混合模式

var Person = function(name,age){        this.name = name;        this.age = age;

}

Person.prototype.sayName = function(){        console.log(this.name)

}    var Student = function(name,age,score){

Person.call(this,name,age);        this.score = score;

}

Student.prototype = create(Person.prototype);    function create(parentObject){        function fn(){};

fn.prototype = parentObject;        return new fn();

}

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

}    var student = new Student('ruoyu',30,90);    console.log(student)//  单例模式

var Person = (function(){        var instance;        function init(){            //define private methods and properties

//do something

return {                //define public methods and properties

};

}        return {

createPerson:function(){                if(!instance){

instance = init();

}                return instance;

}

}

})()    var p1 = Person.createPerson();//  发布订阅模式

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][i].handler(args);

}

}        return {

on:on,

fire:fire

}

})()

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(evt,handle){

events[evt] = events[evt] || [];

events[evt].push({                handle:handle

})

}        function fire(evt,arges){            if(!events[evt]){                return;

}            for(var i = 0; i 

events[evt][i].handle(arges);

}

}        function off(evt){            delete events[evt];

}        return {            on:on,            fire:fire,            off:off

}

})()

Event.on('change', function(val){        console.log('change...  now val is ' + val);

});

Event.fire('change', '饥人谷');

Event.off('changer');

作者：饥人谷_米弥轮

链接：https://www.jianshu.com/p/814301e9c910