JS常见设计模式

常见的一些设计模式

构造函数模式(Constructor)

// 构造函数

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

var p1 = new Person('deejay',21);
p1.sayName();

工厂模式(factory)

工厂模式和构造函数模式每次都创建了一个新的引用(因为有return,每次return出来的对象引用都是不同的),创建出来的对象是完全不同的引用,解决了引用类型存在的问题

// 工厂模式

function createPerson(name,age) {
    var person = {
        name: name,
        age: age,
        sayName: function () {
          console.log(this.name); // 这里面的this指向person
        },
    }
    return person;
}
createPerson('deejay',21);

关于this的指向,this指向

单例模式(singleton)

创建了之后,就不会变了,只会指向同一个引用, 并不会创建一个新的对象
一般用于节约内存,不想new一个新的对象出来的时候可以用

// 单例模式

var People = (function () { // 匿名函数 也叫lambda函数,在js中是立即执行的
    var instance;
    function init(name) {
        return {
            name: name,
        }
    }
    return {
        createPeople: function (name) {
            if(!instance) {
                instance = init(name);
            }
            return instance;
        }
    }
})();
People.createPeople('deejay');// {name: 'deejay'}
People.createPeople('hello');// {name: 'deejay'}


// 函数都是有return的,如果不写return的是undefined,写了就是代码return里的东西。
//阅读代码的时候,一般先看函数的参数和函数的return

混合模式(mixin)

一般都是去混合原型,需要继承的时候这么写

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(parentPrototype) {
    function F() {}; //创建一个空的构造函数
    F.prototype = parentPrototype; //让这个空构造函数的原型和传入的目标原型一致
    return new F(); //return出F()的实例
//    最终达到的效果就是,让Student的原型等于Person的实例。
}
Student.prototype.sayScore = function () {
    console.log(this.score);
}
var s1 = new Student('deejay',21,80);
s1.sayName();
s1.sayScore(); 

模块模式(module)

通过闭包来实现一个模块

// 模块模式

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

发布订阅模式(publish / subscribe)

一般用来处理异步

// 订阅发布模式

var EventCenter = (function () {
    //以EventCenter.on('deejay',function () {console.log('deejay');})为例来分析一些代码
    var events = {}; //用来存储所有的key/value
    function on(evt,handler) {
        events[evt] = events[evt] || [];
        //events['deejay']此时不存在,所以events['deejay'] = [];
        events[evt].push({
            handler: handler
        });
    //    events['deejay']push进去了一个处理程序
    // 此时有 events['deejay'] = [{
    //         handlder: function () {
    //             console.log('deejay');
    //         }
    //     }]
    }
    function fire(evt,args) {
        //当使用fire来启动deejay事件时
        if (!events[evt]) {//如果events['deejay']不存在,那么直接return掉
            return;
        }
        for(var i = 0; i < events[evt].length; i++) {
            //如果存在,进行遍历,便利出events['deejay']中的所有处理程序,并且执行
            events[evt][i].handler(args);
        }
    }
    return {
        on: on,
        fire: fire
    }
})();

EventCenter.on('deejay',function () {
    console.log('deejay');
}) //挂载一个事件deejay
EventCenter.fire('deejay');//使用fire触发事件,输出deejay

使用发布订阅模式写一个事件管理器,可以实现如下方式调用

pub/sub pattern

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

推荐阅读更多精彩内容

  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,716评论 2 17
  • 1.写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 JS设计模式大全 构造函数模...
    饥人谷_Leon阅读 420评论 0 3
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,580评论 18 139
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,053评论 1 10
  • 构造函数模式: 工厂模式: 模块模式 混合模式 单例模式 发布订阅模式
    饥人谷_流水阅读 205评论 0 0