美文网首页
JS设计模式(6种类型)

JS设计模式(6种类型)

作者: YQY_苑 | 来源:发表于2017-12-24 21:22 被阅读0次

1.构造函数模式:返回一个新对象

constructor
通过new来实现

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

var student = new Person("YQY",22);

2.工厂模式:返回一个新对象

factory

function createPerson(name){
    var person= {
        name: name,
        sayName:function(){
            console.log(this.name);
        }
    };
    return person;
}
//对象调用模式
createPerson("YQY").sayName() // YQY
createPerson("xiaoming").sayName()  //xiaoming
//函数调用模式
var t = createPerson("YQY").sayName()
t()   //undefined    
//原因为createPerson中的sayName方法中的this此时指向window

3.单例模式

singleton

var People = (function(){
    var instance;
    function init(name){
        return{
            name: name
        };
    }

    return{
        createPeople : function(name){
            if(!instance){
                instance = init(name);
            }
            return instance
        }
    }
}());

People.createPeople("YQY") //{"name" :"YQY"}
People.createPeople("xiaoming") //{"name" :"YQY"}

4.混合模式

mix in
继承

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 = Object.create(Person.prototype)
Student.prototype = create(Person.prototype);

function create(parentObj){
    function F(){}
    F.prototype = parentObj;
    return new F();
};

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

var student = new Student("YQY",22,95);

5.模块模式:通过闭包来实现一个模块

module

var Person = (function(){
    var name = "YQY";
    function sayName(){
        console.log(name);
    }
    return {
        name:name,
        sayName:sayName
    }
})()

Person //{name:name,sayName:sayName}

6.订阅发布模式

publish/subscribe

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

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

相关文章

  • 前端设计模式

    JS设计模式一:工厂模式jS设计模式二:单例模式JS设计模式三:模块模式JS设计模式四:代理模式JS设计模式五:职...

  • 《JS设计模式》读书笔记(一)

    标签:JS 设计模式 《JS设计模式》读书笔记(二) 《JS设计模式》读书笔记(三) 《JS设计模式》读书笔记(四...

  • 《JS设计模式》读书笔记(六)

    标签:JS 设计模式 读书笔记链接: 《JS设计模式》读书笔记(一) 《JS设计模式》读书笔记(二) 《JS设计模...

  • 《JS设计模式》读书笔记(二)

    标签:JS 设计模式 读书笔记链接: 《JS设计模式》读书笔记(一) 《JS设计模式》读书笔记(三) 《JS设计模...

  • 《JS设计模式》读书笔记(三)

    标签:JS 设计模式 读书笔记链接: 《JS设计模式》读书笔记(一) 《JS设计模式》读书笔记(二) 《JS设计模...

  • 《JS设计模式》读书笔记(四)

    标签:JS 设计模式 读书笔记链接: 《JS设计模式》读书笔记(一) 《JS设计模式》读书笔记(二) 《JS设计模...

  • 《JS设计模式》读书笔记(五)

    标签:JS 设计模式 读书笔记链接: 《JS设计模式》读书笔记(一) 《JS设计模式》读书笔记(二) 《JS设计模...

  • 实习第七十四天(设计模式)

    参考 《JS设计模式》读书笔记(二) 《JS设计模式》读书笔记(三) 《JS设计模式》读书笔记(四) 《JS设计模...

  • 《JS设计模式》读书笔记(七-完结)

    标签:JS 设计模式 其他读书笔记链接: 《JS设计模式》读书笔记(一) 《JS设计模式》读书笔记(二) 《JS设...

  • js中的继承

    上篇说了js的设计模式,现在再说说继承(不理解设计模式的可以看上篇)。1、原型链 缺点:引用类型属性被实例共享;创...

网友评论

      本文标题:JS设计模式(6种类型)

      本文链接:https://www.haomeiwen.com/subject/owzhgxtx.html