設(shè)計模式

構(gòu)造函數(shù)模式

 function Person(name,age,sex){
        this.name=name;
        this.age=age;
        this.sex=sex;
    }
    Person.prototype.eat=function(){
        console.log("吃東西");
    }
    var p1=new  Person("小明",18,"男");

混合模式

混合模式就是構(gòu)造函數(shù)模式和原型模式的混合,在混合模式中,構(gòu)造函數(shù)用于定義實例屬性,而原型模式用于定義方法和共享的屬性。

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

    Person.prototype.getName = function(){
        console.log(this.name)
    };

    Person.prototype.getAge = function(){
        console.log(this.age);
    };
    var p1=new Person("小明",19,"男");
   p1.getAge();//19

模塊模式

模塊模式能夠使一個單獨的對象擁有公有/私有方法和變量,從而屏蔽來自全局作用域的特殊部分

var Goods=(function(){
          //聲明私有成員
           var price=100;
          function getPrice(){
                 console.log(price);
            }
         // 暴露公開的成員
         return{
             getPrice:getPrice
         }
    })()
    var p=Goods.getPrice();
    console.log(p)//100

工廠模式

工廠模式抽象了具體對象的過程,函數(shù)可以接受傳來的參數(shù)構(gòu)建一個包含所有必要信息的對象,可以無數(shù)次的調(diào)用這個函數(shù),每次都返回一個包含屬性和方法的對像的引用。

  function createPerson(name,age,sex){
        var person={
            name:name,
            age:age,
            sex:sex,
             sayName:function(){
                 console.log(this.name)
             }
        }
        return person;
    }
    var p1=createPerson("小明",28,"男");

單例模式

單例模式就是保證一個類只有一個實例,實現(xiàn)的方法一般是先判斷實例存在與否,如果存在直接返回,如果不存在就創(chuàng)建了再返回,這就確保了一個類只有一個實例對象。


1.
var mySingleton = function () {
        /* 這里聲明私有變量和方法 */
        var privateV = 'private';
        function showPrivate() {
            console.log(privateV);
        }

        /* 公有變量和方法(可以訪問私有變量和方法) */
        return {
            publicMethod: function () {
                showPrivate();
            };
        };
    };

    var single = mySingleton();
    single.publicMethod();  // 輸出  private

2.
var Singleton = (function () {
    var instantiated;
    function init() {
        return {
            publicMethod: function () {
                console.log('hello world');
            },
            publicProperty: 'test'
        };
    }
    return {
        getInstance: function () {
            if (!instantiated) {
                instantiated = init();
            }
            return instantiated;
        }
    };
})();

發(fā)布訂閱模式

在發(fā)布訂閱者模式中訂閱者事件的觸發(fā)是訂閱者通過監(jiān)聽一個特定的消息(這個消息一般包含名稱和訂閱者所需要的參數(shù))來觸發(fā)的。可以理解為訂閱者監(jiān)聽的不是發(fā)布者,而是消息池,只要消息池里有它關(guān)心的消息,即觸發(fā)事件,不管這個消息是誰發(fā)布過去的。發(fā)布者和訂閱者是解耦的。

var PubSub = function(){
      this.eventPool = {}; 
    };
    PubSub.prototype.off = function(topicName){
        delete this.eventPool[topicName]
    };
    PubSub.prototype.on = function(topicName,callback){
        var  topic = this.eventPool[topicName] ; 
        if(!topic){
            this.eventPool[topicName] =[] 
        }
        this.eventPool[topicName].push(callback)
    }
    PubSub.prototype.trigger = function(){
        var _arg = [].slice.call(arguments);
        var topicName=_arg.shift();
        var callbackArg = _arg;
        var topicCallback = this.eventPool[topicName]
        if(topicCallback){
             topicCallback.forEach(function(callback){
                callback.apply(this,callbackArg)
             });
        }
    };

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

 var Event = (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
        }
    })();


Event.on('change', function(val){
    console.log('change...  now val is ' + val);  
});
Event.fire('change', '饑人谷');
Event.off('changer');
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容