关于前端:精读设计模式-Prototype-原型模式

Prototype（原型模式）

Prototype（原型模式）属于创立型模式，既不是工厂也不是间接 New，而是以拷贝的形式创建对象。

用意：用原型实例指定创建对象的品种，并且通过拷贝这些原型创立新的对象。

举例子

如果看不懂下面的用意介绍，没有关系，设计模式须要在日常工作里用起来，联合例子能够加深你的了解，上面我筹备了三个例子，让你领会什么场景下会用到这种设计模式。

做钥匙

很显然，为了屋宇平安，要尽量做到一把钥匙只能开一扇门，每把钥匙构造都多多少少不一样，却又很类似，做钥匙的人依照你给的钥匙截然不同做一个新的，这属于什么模式呢？

两种状态表

当网站做不停机保护时，假如保护内容是给每个高级会员账户多打 100 元现金，当初须要改数据库表。已知：

1. 数据库表有几千万条数据，其中高级会员有几千位，为了不便调用曾经缓存在中间层了，且数据库对应 ID 更新后对应缓存也会更新。
2. 几千条数据批改语句执行完须要几分钟，这几分钟内无奈承受用户数据不同步的问题。

一种常见的做法是，咱们生成一份高级会员列表的拷贝，代替数据库缓存的后果，数据库只有读到对应会员 ID 就从拷贝列表中获取，数据表新增一列状态标记，操作完后这个拷贝移除，更新高级会员缓存。

然而如何生成高级会员列表拷贝呢？如果间接从几千万条用户数据中从新查问，会有较高的数据库查问老本。

模版组件

通用搭建零碎中，咱们能够将某个拖拽到页面的区块设置为“模版”，这个模版能够作为一个新组件被从新拖拽到任意为止，实例化任意次。实际上，这是一种分段式复制粘贴，你会如何实现这个性能呢？

用意解释

解决下面问题的方法都很简略，就是基于已有对象进行复制即可，效率比 New 一个，或者工厂模式都要高。

用意：用原型实例指定创建对象的品种，并且通过拷贝这些原型创立新的对象。

所谓原型实例，就是被选为拷贝模版的那个对象，比方做钥匙例子中，你给老板的样板钥匙；两种状态表中的已有缓存高级会员列表；模版组件中选中的那个组件。而后，通过拷贝这些原型创立你想要的对象即可。

咱们形象思考一下，如果每把钥匙都遵循 Prototype 接口，提供了 clone() 办法以复制本人，那就能够疾速复制任意一把钥匙。钥匙工厂可无奈解决每把钥匙不一样的问题，咱们要的就是和某个钥匙截然不同的正本，复制一份钥匙最简略。

高级会员状态表例子中，查询数据库的老本是昂扬的，但如果仅仅复制曾经查问好的列表，工夫能够忽略不计，因而最经济的计划是间接复制，而不是通过工厂模式从新连贯数据库并执行查问。

模版组件更是如此，咱们基本没有定义那么多组件实例的基类，只有每个组件提供一个 clone() 函数，就能够立刻复制任意组件实例，这无疑是最经济实惠的计划。

看到这里，你应该晓得了，原型模式的精华是对象要提供 clone() 办法，而这个 clone() 办法实现难度有高有低。

一般来说，原型模式的拷贝倡议用深拷贝，毕竟新对象最好不要影响到旧对象， 然而在深拷贝性能问题较大的状况下，能够思考深浅拷贝联合，也就是将在新对象中，不会批改的数据应用浅拷贝，可能被批改的数据应用深拷贝。

结构图

Client 是收回指令的客户端，Prototype 是一个接口，形容了一个对象如何克隆本身，比方必须领有 clone() 办法，而 ConcretePrototype 就是克隆具体的实现，不同对象有不同的实现来拷贝本身。

代码例子

上面例子应用 typescript 编写。

class Component implements Prototype {
 /**
 * 组件名
 */
 private name: string
 /**
 * 组件版本
 */
 private version: string
 /**
 * 拷贝本身
 */
 public clone = () => {
 // 构造函数省略了，大略就是传递 name 和 version
 return new Component(this.name, this.version)
 }
} 

咱们能够看到，实现了 Prototype 接口的 Component 必须实现 clone 办法，这样任意组件在执行复制时，就能够间接调用 clone 函数，而不必关怀每个组件不同的实现形式了。

从这就能看出，原型模式与 Factory 与 Builder 模式还是有类似之处的，在暗藏创建对象细节这一点上。

应用的时候，咱们就能够这样创立一个新对象：

const newComponent = oldComponent.clone() 

这里有两个留神点：一般来说， 如果要二次批改生成的对象，不倡议给 clone 函数加参数，因为这样会导致接口的不统一。 咱们能够为对象实例提供一些 set 函数进行二次批改。另外，clone 函数要思考性能，就像后面说过的，能够思考深浅拷贝联合的形式，同时要留神当对象存在援用关系甚至循环援用时，甚至不肯定能实现拷贝函数。

弊病

每个设计模式必有弊病，但就像每一期都说的，有弊病不代表设计模式不好用，而是指在某种场景青睐存在问题，咱们只有躲避这些场景，在正当的场景应用对应设计模式即可。

原型模式的弊病：

1. 每个类都要实现 clone 办法，对类的实现是有肯定入侵的，要批改已有类时，违反了开闭准则。
2. 当类又调用了其余对象时，如果要实现深拷贝，须要对应对象也实现 clone 办法，整体链路可能会特地长，实现起来比拟麻烦。

总结

原型模式个别与工厂模式搭配应用，个别工厂办法接管一个合乎原型模式的实例，就能够调用它的 clone 函数创立返回新对象啦。 代码大略是这样：

// buildComponentFactory 外部通过 targetComponent.clone() 创建对象，而不是 New 或者调用其余工厂函数。const newComponent = buildComponentFactory(new Component()) 

最初来一张图疾速了解原型模式：

探讨地址是：精读《设计模式 – Prototype 原型模式》· Issue #277 · dt-fe/weekly

如果你想参加探讨，请 点击这里，每周都有新的主题，周末或周一公布。前端精读 – 帮你筛选靠谱的内容。

关注 前端精读微信公众号

版权申明：自在转载 - 非商用 - 非衍生 - 放弃署名（创意共享 3.0 许可证）

本文应用 mdnice 排版