设计模式

构造函数模式

 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,"男");

混合模式

混合模式就是构造函数模式和原型模式的混合,在混合模式中,构造函数用于定义实例属性,而原型模式用于定义方法和共享的属性。

    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

工厂模式

工厂模式抽象了具体对象的过程,函数可以接受传来的参数构建一个包含所有必要信息的对象,可以无数次的调用这个函数,每次都返回一个包含属性和方法的对像的引用。

  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,"男");

单例模式

单例模式就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。


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

发布订阅模式

在发布订阅者模式中订阅者事件的触发是订阅者通过监听一个特定的消息(这个消息一般包含名称和订阅者所需要的参数)来触发的。可以理解为订阅者监听的不是发布者,而是消息池,只要消息池里有它关心的消息,即触发事件,不管这个消息是谁发布过去的。发布者和订阅者是解耦的。

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.使用发布订阅模式写一个事件管理器,可以实现如下方式调用

 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');
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,907评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,987评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,298评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,586评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,633评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,488评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,275评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,176评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,619评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,819评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,932评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,655评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,265评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,871评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,994评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,095评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,884评论 2 354

推荐阅读更多精彩内容