16种JavaScript设计模式（中）

简介

上文中介绍了学习设计模式前需要了解的一些基础概念和js的基础模式-原型模式，没看过的同学可以点这里，本章将介绍以下几种模式

  • 单例模式
  • 策略模式
  • 代理模式
  • 迭代器模式
  • 发布订阅模式
  • 命令模式
  • 组合模式

单例模式

定义：保证一个类只有一个实例，并提供一个访问他的全局访问点

简介：单例模式是一种常用的模式，我们在多次引入其他模块时，并不需要每次都创建一个新的模块对象，复用之前创建过的对象不仅能减少内存的开销，同时也可以体验共享对象带来的便利。简单来说就是使用闭包持久保存函数上一次的执行结果，在之后的调用中直接返回。例如js 中模块加载的方式：require、import都使用到了该模式

例：

var getSingle = function (fn) { // 创建单例方法
    var result // 通过闭包保存创建过的对象
    return function () {
        return result || (result = fn.apply(this, arguments))
    }
}

var createPerson = getSingle(function (name) {
    return {name: name}
})

var person1 = createPerson('张三')
var person2 = createPerson('李四')

console.log(person1, person2);  // {name: '张三'} {name: '张三'}

进阶示例：dom弹窗

策略模式

定义：定义一系列算法，把他们一个个封装起来，并且可以相互替换

简介：现实生活中当我们要达成一个目的的时候通常会有多种方案可以选择。比如马上年底要发年终奖了，公司针对不同类型的员工有不同的奖金策略，对于表现突出的员工发3个月的工资，一般的员工发2个月的，打酱油的发1个月的，专写Bug的扣一个月。在这里 发年终奖 是目的，针对表现不同的员工我们有多种发奖金的策略，可以使用策略模式来实现

例：

var strategies = { // 针对不同表现的员工定制策略，每个策略接受同类型的参数返回相同的结果
    S(salary) {
        return salary * 3
    },
    A(salary) {
        return salary * 2
    },
    B(salary) {
        return salary
    },
    C(salary) {
        return -salary
    }
}

var calculateBonus = function (salary, strategy) {
    return strategies[strategy](salary)
}

console.log(calculateBonus(10000, 'S')); // 30000
console.log(calculateBonus(1000, 'C')); // -1000

进阶示例：表单校验

celue.gif

代理模式

定义：当直接访问一个对象不方便或者不满足需要时，为其提供一个替身对象来控制对这个对象的访问

简介：代理模式是一种非常有意义的模式，在我们日常开发中有许多常用功能都可以通过代理模式实现的，例如 防抖动函数（debounce 常用于控制用户输入后回调函数触发的时机），节流函数（throttle 常用于控制resize、scroll等事件的触发频率），下面我们实现一个简单的节流函数

例：

var throttle = function (fn, interval) {
    var firstTime, timer
    return function () {
        var _this = this
        if(!firstTime) {
            fn.apply(this, arguments)
            firstTime = true
        }
        
        if (!timer) {
            timer = setTimeout(function() {
                fn.apply(_this, arguments)
                timer = null
            }, interval);
        }
    }
}

var onScroll = function () {
    console.log('onScroll', Date.now())
}
var throttleOnScroll = throttle(onScroll, 2000)

setInterval(throttleOnScroll, 300) // 每2秒执行一次onScroll函数

进阶示例：图片预加载

agency.gif

迭代器模式

定义：提供一种方法顺序访问一个聚合对象中的各个元素，而要不需要暴露该对象的内部表示

简介：迭代器模式简单来说就是将迭代过程从业务逻辑中抽离，简化开发，其分为内迭代和外迭代。目前许多语言都已经内置了迭代器的实现，如ES5中的forEach函数就是一种内迭代的实现。

例：

Array.prototype.myEach = function (cb) {
    for (let index = 0; index < this.length; index++) {
        const element = this[index];
        if(cb(element, index) === false) {
            break
        }
        
    }
};

['a','b','c'].myEach(console.log) // a b c

进阶示例：外迭代

发布订阅模式（划重点）

定义：分离事件创建者和执行者，执行方只需订阅感兴趣的事件发生点。减少对象间的耦合关系，新的订阅者出现时不必修改原有代码逻辑

简介：发布订阅模式又叫观察者模式，它定义了对象间一种一对多的关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。
发布订阅模式在我们日常开发中应用十分广泛，如浏览器的dom事件通知机制(document.addEventListener)，以及vue框架中数据改变时自动刷新dom的双向绑定机制都是基于该模式

例：

var Event = function () {
    var clientList = {} // 订阅者数组

    this.listen = function (key, cb) { // 订阅方法
        clientList[key] = clientList[key] || []
        clientList[key].push(cb)
    }

    this.remove = function (key, cb) { // 取消订阅
        var fns = clientList[key]
        if(!cb) {
            clientList[key] = []
        }else if(fns && fns.length) {
            clientList[key] = fns.filter(fn => fn !== cb)
        }
    }

    this.trigger = function () { // 通知订阅者
        var key = Array.prototype.shift.call(arguments)
        var args = arguments
        var fns = clientList[key]
        var _this = this

        if(fns && fns.length) {
            fns.myEach(function(fn) {
                fn.apply(_this, args)
            })
        }
    }
}

var event = new Event()

event.listen('phone', function getPhone() {
    Array.prototype.unshift.call(arguments, '有个挨千刀的半夜打电话来了他是：')
    console.log.apply(this, arguments)
})

event.trigger('phone', '大狗子') // 有个挨千刀的半夜打电话来了他是：大狗子
event.trigger('phone', '二狗子') // 有个挨千刀的半夜打电话来了他是：二狗子

进阶示例：进阶版发布订阅模式

命令模式

定义：将一组行为抽象为对像并提供执行、撤销等方法，解决它与调用者的之间的耦合关系

简介：命令模式是对简单优雅的模式之一，其中“命令”指的是一个执行某些特定事情的指令。该模式适用于需要向某些对象发出请求，但不知道接受者是谁，也不知道要执行哪些操作。例如我们平时去饭店点菜是我们并不需要知道这道菜是谁做的怎么做的，我们只需要请服务员把需求写在订单上就可以了。

例：

var client = { // 顾客（命令发出者）
    name: '铁蛋儿'
}
var cook = { // 厨师（命令发执行者）
    makeFood: function (food) {
        console.log('开始做：', food)
    },
    serveFood: function (client) {
        console.log('上菜给：', client.name)
    }    
}

function OrderCommand(receiver, food) { // 命令对象
    this.receiver = receiver
    this.food = food
}

OrderCommand.prototype.execute = function (cook) { // 提供执行方法
    cook.makeFood(this.food)
    cook.serveFood(this.receiver)
}

var command = new OrderCommand(client, '宫保鸡丁')
command.execute(cook) // 开始做：宫保鸡丁； 上菜给铁蛋儿

进阶示例：控制小球运动

command.gif

组合模式

定义：将一系列具有相同方法的对象合并成一个具有该方法的组合对象，统一执行

简介：组合模式将对象组合成树形结构，以表示“部分-整体”的层次结构。同时利用对象的多态性，使得单个对象的使用和组合对象的使用具有一致性。例如我们通过命令模式定义了一系列的命令，并且希望组合这些命令形成一个命令宏统一的执行。

例：

// 定义一些命令
var openDoorCommand = {
    execute: function(){
        console.log('开门')
    }
}

var openPcCommand = {
    execute: function(){
        console.log('开电脑')
    }
}

var openLolCommand = {
    execute: function(){
        console.log('撸一局')
    }
}

// 定义命令宏组合命令
var MarcoCommand = {
    list: [],
    add: function (command) {
        this.list.push(command)
    },
    execute: function () {
        this.list.forEach(function(command) {
            command.execute()
        })
    }
}

MarcoCommand.add(openDoorCommand)
MarcoCommand.add(openPcCommand)
MarcoCommand.add(openLolCommand)
MarcoCommand.execute() // 开门 开电脑 撸一局

进阶示例：组合命令控制小球运动

感悟

相信看到这里的同学会发现其实我们平时编写的代码中已经多多少少用到了一些设计模式，他们并不是一些高深复杂的理论知识。掌握一些常用的设计模式在帮助我们提升自己的代码质量的同时也能帮我们更好的和同事沟通。

总结

本文中所有进阶示例都可以在https://github.com/ni742015/design-patterns这里找到，这些示例结合了我们实际开发中会遇到的一些问题（可以说是这篇文章的精华了），能加深你对设计模式的理解，希望对大家有帮助。

系列链接

1. 16种JavaScript设计模式（上）

2. 16种JavaScript设计模式（中）

3. 16种JavaScript设计模式（下）

本文主要参考了《javascript设计模式与开发实践》一书

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