常用设计模式

//构造函数
//通过 new 返回一个新的对象
function Person(name,age) {
    this.name = name
    this.age = age
}
Person.prototype.sayName = function() {
    console.log(this.name)
}
var person1 = new Person('xiaoming',2)
var person2 = new Person('xiaohong',3)


//混合模式
//构造函数以及继承
function Person(name,age) {
    this.name = name
    this.age = age
}
Person.prototype.sayName = function() {
    console.log(this.name)
}
function Student(name,age,number) {
    Person.call(this,name,age)
    this.number = number
}
Student.prototype = Object.create(Person.prototype)
Student.prototype.sayNumber = function() {
    console.log(this.number)
}
var student1 = new Student('xiaoming',3,4)


//模块模式
//主要是用闭包立即执行函数实现
var Person = (function(){
    var name = 'xiaoming'
    var sayName = function(){
        console.log(name)
    }
    return {
        name:name,
        sayName:sayName
    }
})()
Person
Person.sayName()


//工厂模式
function createPerson(name) {
    var person = {
        name: name
    }
    person.sayName = function() {
        console.log(this.name)
    }
    return person
}
var person3 = createPerson('xiaoming')
person3.sayName()


//单例模式
var Person = (function() {
    var instance
    function init(name) {
        return {
            name: name
        }
    }
    return {
        createPerson: function(name) {
            if(!instance){
                instance = init(name)
            }
            return instance
        }
    }
})()
Person.createPerson('xioming') //{"name" :"xiaoming"}
Person.createPerson('xiohong') //{"name" :"xiaoming"}

//发布订阅模式
var EvenCenter = (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.fire('change', '饥人谷');
EventCenter.off('changer');
//
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容