为什么前端要学习和了解设计模式？随着 10 年互联网时代的演进，前端项目变得越来越复杂，且迭代和变化频率较快，前端需要有更好的方法论去组织和设计代码范式，来适应快速发展的前端应用。设计模式从建筑行业延伸而来，与算法一样，是软件设计中常见问题的典型解决方案。与算法不同，设计模式是对解决方案的更高层次描述，不涉及到具体的实现，同一模式在两个不同程序中的实现代码可能会不一样, 而算法是特定目标的实现步骤。 设计模式在我们平常的工作中都会有所体现，但我们可能自己不清楚。了解设计模式可以更好的帮助我们组织和驾驭程序。在 1994年，GoF（设计模式 : 可复用面向对象软件的基础）一书中分为 23 种设计模式，对设计模式正式进行命名和推广。由于涉猎较多，本次只讲部分设计模式，主要涉及在前端中的使用和变形，本人也是第一次系列学习设计模式。若有不足或表达不恰之处，请多海涵，一起交流和学习。文中只设计代码框架与范式， 不涉及具体的实现。 本次主要讲解：几种在前端中常用的设计模式，在前端的案例，本人在学习设计模式的一些资料。

创建型模式

提供创建对象的机制， 增加已有代码的灵活性和可复用性，分为工厂模式、抽象工厂模式、单例模式、原型模式、建造者模式。

工厂模式

作用

工厂模式的核心在于将创建对象的过程封装其他，然后通过同一个接口创建新的对象。

因 JavaScript 是动态弱类型语言，表示一个对象的形式可以是函数、类、对象等，表示接口的形式一般是一个函数方法。所以具体的代码形式很多

示例

诉求：在搭建平台中，我们目前有客户端场景、表单场景、标注场景，在不同场景下用户访问的 URL 和权限皆不相同，但希望暴露对外的接口是一致的，这样后续扩展的时候无需改上层的的代码

简单工厂模式
  1. /**
  2.  * 工厂方法是将创建对象的过程封装其他，然后通过同一个接口创建新的对象
  3.  */
  4. class User {
  5.   constructor(user) {
  6.     this.user = user
  7.   }
  8.   static createUser (role) {
  9.     switch (role.type) {
  10.       case 'label':
  11.         return new User({ role, visitAuth: ['/', '/label/*'], editPage: '/label/edit' });
  12.       case 'mix':
  13.         return new User({ role, visitAuth: ['/', '/mix/*'], editPage: '/label/edit' });
  14.       case 'admin':
  15.         return new User({ role, visitAuth: ['/', '/admin/*'], editPage: '/label/edit' });
  16.       default:
  17.         throw new Error('参数错误, role.type 可选参数:label, mix, admin')
  18.     }
  19.   }
  20. }
  22. // 使用
  23. let labelUser = User.createUser({ type: 'label' })
  24. let adminUser = User.createUser({ type: 'admin' })
  25. let mixUser = User.createUser({ type: 'mix' })
  27. // 统一调用
  28. let role = { type: 'admin' } // role 是动态参数这里模拟
  29. let user = User.createUser(role)
  30. window.location.href = `${user.editPage}` // 实际的时候使用 vue相关的东西

优缺点

可以看出上述的工厂模式
好处：只需要一个正确的参数，就可以获取到正确的对象，无需关注具体细节
坏处：当搭建平台的用户类型过多的时候，createUser 会线性增长。
结论：上述简单工厂方法作用于创建的对象数量较少，对象的创建逻辑不复杂时使用。

工厂方法模式

当职责过多的时候，为了减少上述 User 类的工作负担，把创建工作推迟到子类中进行，核心类保证其纯正性，即为抽象类。

  1. /**
  2.  * 工厂方法是将创建对象的过程封装其他，然后通过同一个接口创建新的对象
  3.  * 以下是为了展示模式的实现, 项目代表中并不一定这么做
  4.  * 有人把下面这种形式叫做简单工厂模式, 工厂方法模式
  5.  */
  6. class User {
  7.   constructor(user) {
  8.     if (new.target === User) throw new Error('User为抽象类, 不能实例化') // javascript没有抽象类概念， 用 new.target模拟
  9.     this.user = user
  10.   }
  11. }
  12. class UserFactory extends User{
  13.   static createUser(role) {
  14.     switch (role.type) {
  15.       case 'label':
  16.         return new UserFactory({ role, visitAuth: ['/', '/label/*'], editPage: '/label/edit' });
  17.       case 'mix':
  18.         return new UserFactory({ role, visitAuth: ['/', '/mix/*'], editPage: '/label/edit' });
  19.       case 'admin':
  20.         return new UserFactory({ role, visitAuth: ['/', '/admin/*'], editPage: '/label/edit' });
  21.       default:
  22.         throw new Error('参数错误, role.type 可选参数:label, mix, admin')
  23.     }
  24.   }
  25. }
  27. // 使用
  28. let labelUser = UserFactory.createUser({ type: 'label' })
  29. let adminUser = UserFactory.createUser({ type: 'admin' })
  30. let mixUser = UserFactory.createUser({ type: 'mix' })
  32. // 统一调用
  33. let role = { type: 'label' } // role 是动态参数这里模拟
  34. let user = UserFactory.createUser(role)
  35. // window.location.href = `${user.editPage}` // 实际的时候使用 vue相关的东西 
  36. console.log(user)

抽象工厂模式

当后续我们的用户类型过多，需要批量创建时，一个个创建就不太满足，且创建逻辑单独抽象和不够单一、清晰。

  1. /**
  2.  * 工厂方法是将创建对象的过程封装其他，然后通过同一个接口创建新的对象
  3.  * 以下是为了展示模式的实现, 项目代表中并不一定这么做
  4.  * 有人把下面这种形式叫做简单工厂模式, 工厂方法模式
  5.  */
  6.  class User {
  7.   constructor(user) {
  8.     if (new.target === User) throw new Error('User为抽象类, 不能实例化')
  9.     this.user = user
  10.   }
  11. }
  12. class LabelUser extends User {
  13.   constructor(user, opts) {
  14.     supper(user)
  15.     this.role = { type: 'label' }
  16.     this.visitAuth = opts.visitAuth || ['/', '/label/*']
  17.     this.editPage = opts.editPage || '/label/edit'
  18.   }
  19. }
  20. class AdminUser extends User {
  21.   constructor(user, opts) {
  22.     supper(user)
  23.     this.role = { type: 'admin' }
  24.     this.visitAuth = opts.visitAuth || ['/', '/admin/*']
  25.     this.editPage = opts.editPage || '/admin/edit'
  26.   }
  27. }
  28. class MixUser extends User {
  29.   constructor(user, opts) {
  30.     supper(user)
  31.     this.role = { type: 'mix' }
  32.     this.visitAuth = opts.visitAuth || ['/', '/mix/*']
  33.     this.editPage = opts.editPage || '/mix/edit'
  34.   }
  35. }
  37. const getAbstractUserFactory = (role) => {
  38.   switch (role.type) {
  39.     case 'mix':
  40.       return MixUser;
  41.     case 'admin':
  42.       return AdminUser;
  43.     case 'label':
  44.       return LabelUser;
  45.   }
  46. }
  47. const AdminUserCls = getAbstractUserFactory({role: {type: 'admin'}})
  48. const MixUserCls = getAbstractUserFactory({role: {type: 'mix'}})
  49. const LabelUserCls = getAbstractUserFactory({role: {type: 'label'}})
  51. const adminUser = new AdminUser('张三')
  52. const mixUser = new AdminUser('李四')
  53. const labelUser = new AdminUser('王五')

小结

什么时候用工厂模式呢？当我们需要创建什么的时候就可以想一想是否可以用工厂模式？但我们不需要关注内部的实现细节
前端框架有一些经典的使用工厂模式的地方：

  • 比如我们用 jQuery 的$ , window.$ = $ = jQuery, 具体可查看源码， 返回一个 jQuery 的实例。
  • 比如React.createElement, Vue.component等。

    单例模式

    作用

    单例模式的核心是保证一个类只有一个实例存在，并提供访问这个实例的接口。

    示例

    ```javascript /**
    • 单例分为惰性版和非惰性版 */ class Single1 { static instance = new Single1(); static getInstance() { return Single1.instance } }

let a1 = Single1.getInstance() let b1 = Single1.getInstance() console.log(a1 === b1)

class Single2 { static getInstance() { return Single2.instance || (Single2.instance = new Single2()) } }

let a2 = Single2.getInstance() let b2 = Single2.getInstance() console.log(a2 === b2)

class Single3 {} // 函数版 let createSingle = function(){ let instance return function() { return instance || (instance = new Single3()); } }()

let a3 = createSingle() let b3 = createSingle() console.log(a3 === b3)

  1. <a name="liXEE"></a>
  2. ##### 前端项目中的应用
  3. 当我们在项目中需要全局唯一实例的时候， 就可以使用单例模式， 比如以下
  5. - 全局弹窗
  6. - 全局 store 实例， 我们在项目中使用 vuex 的 store，this.$store.commit 其中this.$store都是一个实例
  7. - 资源的复用，如 ws 连接的复用，数据库连接池的复用
  8. <a name="E3i4L"></a>
  9. ##### 思考
  11. - JavaScript 中的局部变量是一个单例吗？
  12. - 当我们import一个文件时，使用某个变量或函数可以算一个单例吗？
  13. <a name="sk6qf"></a>
  14. ## 结构型模式
  15. 结构型模式介绍如何将对象和类组装成其他的结构， 并同时保持结构的灵活和高效。分为适配器、装饰者、代理、外观、组合、享元。
  16. <a name="pkcZf"></a>
  17. ### 适配器模式
  18. <a name="sLnXD"></a>
  19. #### 作用
  20. 适配器模式主要用来解决两个已有接口之间不匹配的问题，它不考虑这些接口是怎样实现的，也不考虑它们将来可能会如何演化。现实中有很多适配例子，比如 iphone 的这款耳机适配器<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/114956/1634525031531-1b0aa373-5dfc-43f4-bf27-574f5a8713b1.png?x-oss-process=image%2Fwatermark%2Ctype_d3F5LW1pY3JvaGVp%2Csize_15%2Ctext_5rGf5rab55qE5Y2a5a6i%2Ccolor_FFFFFF%2Cshadow_50%2Ct_80%2Cg_se%2Cx_10%2Cy_10#clientId=uc4d93b97-3b62-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=234&id=u721526c0&margin=%5Bobject%20Object%5D&name=image.png&originHeight=468&originWidth=517&originalType=binary&ratio=1&rotation=0&showTitle=false&size=75360&status=done&style=none&taskId=ue7c2d49b-dee8-40c2-a8f6-e70945b21e6&title=&width=258.5)![image.png](https://cdn.nlark.com/yuque/0/2021/png/114956/1634526767721-b9e33fa8-9b65-445a-937a-17be4e546250.png?x-oss-process=image%2Fwatermark%2Ctype_d3F5LW1pY3JvaGVp%2Csize_31%2Ctext_5rGf5rab55qE5Y2a5a6i%2Ccolor_FFFFFF%2Cshadow_50%2Ct_80%2Cg_se%2Cx_10%2Cy_10#clientId=uc4d93b97-3b62-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=241&id=u2384da58&margin=%5Bobject%20Object%5D&name=image.png&originHeight=692&originWidth=1097&originalType=binary&ratio=1&rotation=0&showTitle=false&size=989212&status=done&style=none&taskId=u94e49002-b26f-4cbc-a949-e9927be16ac&title=&width=382.5)<br />适配器模式在前端应用比较多的场景是接口（这里的接口，是泛指，不单单包含包含数据接口，功能函数等）的适配和数据适配。
  21. <a name="Ue22N"></a>
  22. #### 示例
  23. <a name="iJ0ux"></a>
  24. ##### 接口适配
  25. <a name="kGzvK"></a>
  26. ###### 地图示例
  27. > 早期我们并没有自己的地图服务，甚至很多公司都没有地图服务，都是基于国内的地图进行封装，如 baiduMap、gaodeMap，国外使用 googleMap，假设每个地图实现渲染的接口或函数可能不一致。需要适配处理，这样才能保证程序的正常运行。
  29. ```javascript
  30. const baiduMap = {
  31.   type: 'baidu',
  32.   render (position) {
  33.     console.log('render baidu')
  34.   }
  35. }
  36. const gaodeMap = {
  37.   type: 'gaode',
  38.   render (position) {
  39.     console.log('render gaode')
  40.   }
  41. }
  42. const googleMap = {
  43.   type: 'google',
  44.   display (position) {
  45.     console.log('display google')
  46.   }
  47. }
  48. const googleAdapter = {
  49.   render(position) {
  50.     console.log('google render adapter')
  51.     return googleMap.display(position)
  52.   }
  53. }
  54. const renderMap = (map, ...args) => {
  55.   if (typeof map.render === 'function') {
  56.     return map.render(...args)
  57.   }
  58. }
  60. renderMap(gaodeMap)
  61. renderMap(googleAdapter)

数据接口示例

我们大家早年用的 naotu.baidu.com 其核心库里面就用了数据兼容适配的方式，来保证脑图的升级，数据侧是无感知的。

优缺点

优点

不需要考虑接口是怎样实现，主要起到协同的作用来解决两个已有接口不匹配的问题

缺点
  • 需增加新的接口或类，有时候直接改可能更简单
  • 被适配的接口或数据等， 会暴露在适配器（Adapter）中

    装饰者模式

    目的

    允许你通过将对象放入包含行为的特殊封装对象中来为原对象绑定新的行为，能在不改变原对象的基础上，在程序运行期间动态添加职责。

    示例

    由于 JavaScript 的动态类型、弱语言性质， 可实现无侵入在原有对象的方法很多。
    使用 class和函数的装饰器
    详情的源码地址
    1. // 一个用decorator实现的接口 api， 包含访问，参数，mock数据开启，doc 文档，参与验证等等。
    2. import { RequestUrl, RequestParam, RequestMock } from 'halo-annotation'
    3. import path from 'path'
    4. import conf from '../app.conf'
    5. const getMockName = mockDir => path.resolve(mockDir, path.basename(__filename))
    6. export default class ListController {
    7.   // 获取当前用的订单信息
    8.   @RequestUrl('/list', RequestUrl.GET)
    9.   @RequestParam('text', 'required', '名称')
    10.   @RequestParam('nickname', '*', '昵称')
    11.   @RequestMock(getMockName(conf.mock.dir), conf.mock.enabled)
    12.   async action(ctx, next) {
    13.       ctx.body = `hello ${ctx.getParameter('text')}`
    14.   }
    15. }
    其他例子很多，比如 Vue Property Decorator 等
    使用函数模拟装饰

    比如我们经常做的输入值的合法校验之后发送请求，然后到服务端

  1. let summit = (username, password) => {
  2.   if (!username) {
  3.     alert('用户名不能为空啊')
  4.     return false
  5.   }
  6.   if(!password || password.length < 6 || password.length > 30) {
  7.     alert('请输入合法的密码')
  8.     return false
  9.   }
  10.   return fetch('/user/register')
  11. }
  13. // 使用装饰器改造
  14. Function.prototype.before = function(beforeFn) {
  15.   let that = this
  16.   return function() {
  17.     // 前置函数如果返回失败, 后续就不执行了
  18.     if(!beforeFn.apply(this, arguments)) {
  19.       return
  20.     }
  21.     return that.apply(this, arguments)
  22.   }
  23. }
  25. let submit2 = function(username, password) {
  26.   return fetch('/user/register')
  27. }
  28. submit2.before(function(username, password) {
  29.   if (!username) {
  30.     alert('用户名不能为空啊')
  31.     return false
  32.   }
  33.   if(!password || password.length < 6 || password.length > 30) {
  34.     alert('请输入合法的密码')
  35.     return false
  36.   }
  37.   return true
  38. })()

代理模式

目的

代理模式是为一个对象提供一个代用品或占位符，以便控制对它的访问。 这样原对象就不受影响，且引用代码后可以做更多的行为合适的行为

示例

生活中的例子，小明（举例）喜欢了小红的闺蜜，想追她。但是又对小红不是很熟悉，所以拜托小红帮忙送礼物，过生日的时候送花祝闺蜜生日快乐。

  1. /**
  2.  * 小明 和 小红 小红闺蜜之间的故事
  3.  */
  5. class Flower{}
  6. class Present{}
  7. const xiaoming = {
  8.   sendFlower(target) {
  9.     const flower = new Flower()
  10.     target.recieveFlower(flower)
  11.   },
  12.   sendPresent(target) {
  13.     const present = new Present()
  14.     target.recievePresent(present)
  15.   }
  16. }
  17. const closeFriend = {
  18.   recieveFlower(flower) {
  19.     console.log('小红收到花了', flower)
  20.   },
  22.   recievePresend(present) {
  23.     console.log('小红收到礼物了', present)
  24.   }
  25. }
  26. const xiaohong = {
  27.   recieveFlower(flower) {
  28.     return closeFriend.recieveFlower()
  29.   },
  30.   recievePresent(present) {
  31.     xiaohong.watchHappyBirthday(() => {
  32.       closeFriend.recievePresend(present)
  33.     })
  34.   },
  35.   watchHappyBirthday(fn) {
  36.     setTimeout(fn, 1000) // 模拟生日
  37.   }
  38. }
  39. xiaoming.sendPresent(xiaohong)

使用代理实现预加载
  1. const myImage = function() {
  2.   var img = document.createElement('img')
  3.   document.body.appendChild(img)
  4.   return {
  5.     setSrc(src) {
  6.       img.src = src
  7.     }
  8.   }
  9. }()
  11. const proxyImage = function(){
  12.   const img = new Image()
  13.   img.onload = function(){
  14.     myImage.setSrc(this.src)
  15.   } 
  16.   return {
  17.     setSrc(src) {
  18.       myImage.setSrc('//loading')
  19.       img.src = src
  20.     }
  21.   }
  22. }()

通过代理将图片加载和图片懒加载分别隔离在不同的对象里面，这样两个对象职责单一。

行为模式

行为模式负责对象间的高效沟通和职责委派。分为命令、迭代器、策略、发布订阅、中介者、责任链、状态、模板方法、备忘录等模式。

命令模式

作用

命令模式是最简单和优雅的模式之一，命令模式中的命令(command)指的是一个执行某些特定事情的指令。
命令模式最常见的应用场景是:有时候需要向某些对象发送请求，但是并不知道请求的接收者是谁，也不知道被请求的操作是什么。此时希望用一种松耦合的方式来设计程序，使得请求发送者和请求接收者能够消除彼此之间的耦合关系。
image.png

示例

生活实例模拟

比如说我们现在都有智能语音助手，想听一首歌，小爱同学，播放一首《千里之外》。在这个里栗子里面，我是发布者，命令是播放《千里之外》，小爱同学接收并执行命令。

  1. const setCommand = function (command, ...args) {
  2.   if(command && (typeof command.execute === 'function')) {
  3.     command.execute(...args)
  4.   }
  5.   return command
  6. }
  7. const playSongCommand = function (reciever) {
  8.   const execute = function (name) {
  9.     reciever.play(name)
  10.   }
  11.   var undo = function () {
  12.     reciever.wait()
  13.   }
  14.   return {
  15.     execute,
  16.     undo
  17.   }
  18. }
  19. const xiaoai = {
  20.   play(name) {
  21.     console.log(`播放歌曲: ${name}`)
  22.   },
  23.   wait() {
  24.     console.log(`切换到等待状态`)
  25.   }
  26. }
  28. const command = setCommand(playSongCommand(xiaoai), '千里之外')
  29. command.undo()

一般来说，命令模式都会在 command 对象中保存一个接收者来负责真正执行客户的请求， 它只负责把客户的请求转交给接收者来执行，这种模式的好处是请求发起者和请求接收者之间尽可能地得到了解耦。命令可以很好的增加一些指令操作。

百度脑图中的插件机制设计

百度地图中设计了一套自己的特有的命令机制，来管理脑图上面指令的扩展，当定义命令扩展之后， 会统一去处理。具体的命令机制， 命令机制的实现和扩展实例

迭代器模式

作用

迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。 前端中已经内置了迭代器forEach 等，且 ES6 支持 Iterator。

示例

分支代码简化

下列例子主要用来做平滑升级时候，当不同的环境有更好的方式是择优使用。类似的还有 axios 等在多环境下的使用

  1. // 对兼容实现方法的一种获取策略
  2. var getUploadObj = function () {
  3.   try {
  4.     return new ActiveXObject("TXFTNActiveX.FTNUpload");
  5.   } catch (e) {
  6.     // IE 上传控件
  7.     if (supportFlash()) { // supportFlash 函数未提供
  8.       var str = '<object type="application/x-shockwave-flash"></object>';
  9.       return $(str).appendTo($('body'));
  10.     } else {
  11.       var str = '<input name="file" type="file"/>'; // 表单上传
  12.       return $(str).appendTo($('body'));
  13.     }
  14.   }
  15. };
  1. // 优化后的代码
  2. var getActiveUploadObj = function () {
  3.   try {
  4.     return new ActiveXObject("TXFTNActiveX.FTNUpload");
  5.   } catch (e) {
  6.     return false;
  7.   }
  8. };
  10. var getFlashUploadObj = function () {
  11.   if (supportFlash()) { // supportFlash 函数未提供
  12.     var str = '<object type="application/x-shockwave-flash"></object>';
  13.     return $(str).appendTo($('body'));
  14.   };
  15.   return false;
  16. }
  18. var getFormUpladObj = function () {
  19.   var str = '<input name="file" type = "file" class = "ui-file" / > '; // 表单上传
  20.   return $(str).appendTo($('body'));
  21. }
  23. var iteratorUploadObj = function () {
  24.   for (var i = 0, fn; fn = arguments[i++];) {
  25.     var uploadObj = fn();
  26.     if (uploadObj !== false) {
  27.       return uploadObj;
  28.     }
  29.   };
  30. }
  31. var uploadObj = iteratorUploadObj(getActiveUploadObj, getFlashUploadObj, getFormUpladObj);

策略模式

目的

策略模式的定义是:定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。在前端中策略模式实现起来比较简单，关键是抽象成比较合适的策略，当项目里面有多重 if else 的时候可以考虑使用策略模式。

示例

Vue 项目中的策略模式

在搭建平台中组件属性不同对应展示的组件也不同，我们把每一种属性的渲染看成一个策略。伪代码如下

  1. export default {
  2.     components: {
  3.         InputCode,
  4.         Expr,
  5.         colorPicker: color,
  6.     },
  7.     props: {
  8.         target: {
  9.             // 是个对象, 可以是 props, data, logic 等等, 总之是个虚拟的实体
  10.             type: Object,
  11.         },
  12.         setTargetValue: {
  13.             type: Function,
  14.         },
  15.         checkExprValid: {
  16.             type: Function,
  17.         },
  18.         getTargetValue: {
  19.             type: Function,
  20.         },
  21.     },
  22.     methods: {
  23.         render(h) {
  24.             return (
  25.                 <a-form layout="horizontal" class="style-layout suda-props">
  26.                     {
  27.                         this.propsList.map((prop, index) => this.renderFormItem(h, prop))
  28.                     }
  29.                 </a-form>
  30.             );
  31.         },
  32.         renderFormItem(h, prop, isExpr = true) {
  33.             // 添加一个类型需要实现一个 render,避免 if else ugly 的写法
  34.             // 规则, 比如 string-or-json, 对应的 render 方法是 renderStringOrJson
  35.             const execFunc = `render${camelCase(prop.type)}`;
  36.             return (
  37.                 <a-form-item key={prop.key}>
  38.                     {
  39.                         <div class="prop-label" slot="label">
  40.                                 <div class="title">{prop.name}</div>
  41.                         </div>
  42.                     }
  43.                     {typeof this[execFunc] === 'function' && this[execFunc](h, prop, isExpr)}
  44.                 </a-form-item>
  45.             );
  46.         },
  47.         renderNumberUnit(h, prop) {
  48.             return (
  49.                 <a-input type={'number'} style={{ width: '165px' }} size={'small'}  default-value={pureValue} value={pureValue} />
  50.             );
  51.         },
  52.         renderOptions(h, prop) {
  53.             return (
  54.                     <a-select />
  55.             );
  56.         },
  57.         renderBoolean(h, prop) {
  58.             // a-switch not support v-model, use mtd-switch
  59.             return (
  60.                     <a-switch />
  61.             );
  62.         },
  63.         renderString(h, prop, isExpr = true) {
  64.             const _renderInput = (h, prop) => (
  65.                 <a-input
  66.                     onBlur={(e) => this.setValue(e, prop)}
  67.                     onInput={(e) => this.setValue(e, prop)}
  68.                     size="small"
  69.                     value={this.getInputValue(prop)}
  70.                 />
  71.             );
  72.             return _renderInput(h, prop)
  73.         }
  74.     }

发布订阅模式

目的

发布-订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发送改变时，所有依赖于它的对象都将得到状态改变的通知。作为前端应该不陌生，前端里的事件系统均是一种发布订阅模式。

示例

发布订阅实现，可以查看onfire.js, Node.JS的 EventEmitter

实践

  • 前端主要用来解决跨模块之间的通信， SPA之间的通信，模块与模块之间的通信

    优缺点

    优点：

  • 对象之间的解耦

  • 异步编程中，可以更松耦合的代码编写

缺点：

  • 创建订阅者本身要消耗一定的时间和内存

  • 多个发布者和订阅者嵌套一起的时候，程序难以跟踪维护，这也是很多人（包括我）不太喜欢发布订阅的原因。

    • 如果要用，建议在发布和订阅事件名称上进行一定的约束

      学习资料

      推荐的书

      适合前端开发者读的设计模式书

  • 《深入设计模式》

  • 《JavaScript设计模式和开发实践》

    思考

  • 您的项目里面是否有用的设计模式？用了哪些场景是什么？

  • 您的项目里面哪些程序设计的不那么优雅？是否可以用部分设计模式去优化和解决？