当前位置：首页 > 科技 > 软件

三言两语说透设计模式的艺术-原型模式

来源：责编：时间：2023-08-09 23:02:39 229观看

导读1提升对象创建效率：原型模式的智慧原型模式（Prototype Pattern）是一种创造型设计模式，其核心思想在于通过复制“原型”来创建对象，而非直接实例化。在原型模式中，我们首先创造一个原型对象，接着通过对其进行复制，获得新的实例

1提升对象创建效率：原型模式的智慧

原型模式（Prototype Pattern）是一种创造型设计模式，其核心思想在于通过复制“原型”来创建对象，而非直接实例化。在原型模式中，我们首先创造一个原型对象，接着通过对其进行复制，获得新的实例。这些原型对象储存在一个共享的“原型管理器”中，当需要新的对象时，只需从管理器获取原型的复制。

2原型模式的实现

让我们以一个具体场景为例，考虑开发一个鸭子养殖游戏。游戏中需要生成两种鸭子：北京鸭和绿头鸭。这两种鸭子共享一些属性和方法，如叫声、游泳和渲染模型，但叫声和渲染模型是不同的。

如果每次都从头创建鸭子对象，将会产生大量冗余代码，如下所示：

const duck1 = {  name: '鸭子1',  quack() {},  swim() {},  render() {}};const duck2 = {  name: '鸭子2',  quack() {},  swim() {},  render() {}};

这种方式重复定义相同的 quack 和 swim 方法，效率低下。如果使用简单工厂模式，代码如下：

function createDuck(type) {  let duck;  if (type === 'beijing') {    duck = new BeijingDuck();   } else if (type === 'greenheaded') {    duck = new GreenHeadedDuck();  }  duck.swim = function() {    console.log('swimming...');  }    duck.render = function() {     console.log('render duck model...')  }  return duck; }const beijingDuck = createDuck('beijing'); const greenDuck = createDuck('greenheaded');

但是，这样每次创建鸭子对象都需要重新定义 swim 和 render 方法，不够高效。

更优雅的方式是将共有部分提取为一个原型：

// 鸭子原型const DuckPrototype = {  swim() {},  render() {} };// 创建具体鸭子时复制原型function createBeijingDuck() {  const duck = Object.create(DuckPrototype);    duck.quack = function() {}    return duck;}function createGreenDuck() {  const duck = Object.create(DuckPrototype);  duck.quack = function() {}      return duck; }

以上代码展示了如何在鸭子游戏中应用原型模式。通过原型模式，我们只需定义一次共有属性和方法，然后通过复制原型来实例化新对象。这避免了重复代码，提高了对象创建效率，并建立了对象之间的关系，方便基于原型进行扩展。

原型模式与相关模式的区别：

在工厂方法模式中，对象创建逻辑在工厂内部，而原型模式通过复制原型来创建对象。
单例模式生成唯一实例，而原型模式可以生成多个相似实例。
建造者模式适用于创建过程复杂的对象，而原型模式适用于对象实例化复杂的情况。

那么，如何使用 TypeScript 实现更优雅的原型模式呢？

// 原型接口interface Prototype {  clone(): Prototype; }// 原型管理器类class PrototypeManager {  private prototypes: {[key: string]: Prototype} = {};  // 省略方法定义}// 具体原型类class ConcretePrototype implements Prototype {  clone() {    return Object.create(this);  }}// 使用// 初始化原型管理器const manager = new PrototypeManager();// 设置原型对象manager.set('proto', new ConcretePrototype());  // 请求原型复制实例化const prototypeInstance = manager.get('proto').clone();

以上代码定义了原型接口、原型管理器类和具体原型类，还提供了简单的使用示例。从示例中可以看出，原型模式的关键是通过原型管理器来复制原型对象从而创建实例。

3原型模式的优缺点

原型模式的主要优点包括：

提高实例化对象的效率：通过复制原型对象，避免了重复的初始化操作。
隐藏实例化的复杂度：客户端不需要了解具体的对象创建过程，只需请求原型的复制即可。
避免构造函数污染：由于实例化是通过复制原型对象实现的，无需向构造函数中添加不必要的代码。
动态添加和删除原型：可以在运行时扩展或减少原型对象，客户端可以直接使用新增的原型来实例化对象。

原型模式的缺点包括：

需要定义接口并确保每个具体原型类都实现了该接口，增加了一定的开发成本。
需要注意原型实例和原型之间的关系，例如修改原型会影响到其他实例。

4应用场景

原型模式在以下场景中常见应用：

对象创建成本较高：通过复制原型来提高效率，例如在游戏中创建怪物对象。
系统需要产生预定义原型的实例：例如用于测试的假日期对象或假支付账单对象。
类的初始化需要参数：通过原型模式避免构造函数过于复杂。
需要动态地创建复杂对象：客户端只需要关注如何获取对象，无需了解具体创建过程。

以下是一些建议，在前端开发中更适合使用原型模式的情况：

1）创建组件类的原型：通过创建组件类的原型对象，使用 Object.create() 方法基于该原型快速创建组件实例，从而避免重复编写组件逻辑。

// 原型类const ComponentPrototype = {  // 组件逻辑  render() {    // ...  }};// 基于原型创建实例 const ComponentInstance = Object.create(ComponentPrototype);

2）复用和配置原型对象：设计一些可配置的原型对象，如 API 配置对象，然后复制和配置这些原型来生成不同的实例，避免重复创建。

// 可配置的原型const APIConfigPrototype = {  baseURL: 'https://example.com',  timeout: 1000,};// 复制原型并配置生成实例const config = Object.assign({}, APIConfigPrototype, {  timeout: 3000  });

3）代理原型对象：通过原型对象实现代理，避免每次访问都重新创建目标对象。

// 原型作为代理对象const proxyPrototype = {  target: null,  get(key) {    // 懒加载    if (!this.target) {      this.target = createTargetObject();     }    return this.target[key];  }}// 使用代理原型 const proxy = Object.create(proxyPrototype);proxy.foo // 触发代理逻辑

5原型模式与 JavaScript 中的 Prototype

原型模式和 JavaScript 中的原型继承（prototype）存在以下主要区别：

原型模式是一种设计模式，是抽象的概念，而 JavaScript 中的 prototype 是一种具体的继承实现机制。
原型模式的核心在于原型管理器，用于存储和管理不同的原型对象。而 JavaScript 中的 prototype 属性是函数的一个属性，指向包含由该函数创建的对象共享的属性和方法的对象。
原型模式通过复制原型对象来创建新的实例，原型与实例之间没有必然的关系。而 JavaScript 中的原型继承是建立原型和实例之间的关系，实例通过 proto 属性关联到原型，可以直接访问原型的属性和方法。
原型模式可以创建多个相似的对象实例，是一种对象复用的方式。而 JavaScript 中的原型继承是实现类继承的方式，通过 prototype 属性建立原型链，主要用于实现对象的继承和复用。
原型模式中，原型对象和实例对象通常相互隔离，修改实例不会影响到原型。而在 JavaScript 原型继承中，修改原型会影响到所有实例，因为实例引用了原型。
原型模式可以动态注册和删除原型，而 JavaScript 中的原型关系是在首次实例化时建立的，之后不可更改。

综上所述，原型模式是一种更抽象和全面的对象复用方式，而 JavaScript 中的原型继承只是一种具体的继承实现方式，它们在核心思想上有所不同。然而，它们在提高实例化效率方面具有一定的相似性。

6总结

原型模式是一种创造型设计模式，通过复制现有对象的原型来创建新对象，提高对象创建效率和复用性。核心思想是在一个原型对象的基础上，通过复制来生成新实例，避免重复初始化。

在实际开发中，原型模式优化对象创建，通过共享原型对象避免重复定义属性和方法，提高代码效率。例如，前端可用于创建组件实例，避免重复编写组件逻辑。

实现原型模式包括创建原型对象，然后通过复制原型创建新实例。原型对象通常存储于原型管理器中，供需要创建对象时复制使用。

与JavaScript的原型继承不同，原型模式更抽象灵活。它动态添加删除原型，避免构造函数污染，隐藏实例化复杂性。注意每具体原型需实现接口，增加开发成本。

总之，原型模式通过复制对象的原型创建新对象，提高对象创建效率和复用性。频繁创建相似对象场景下，原型模式是有用设计模式。

本文链接：http://www.28at.com/showinfo-26-5142-0.html三言两语说透设计模式的艺术-原型模式

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： Rust“巨坑”？真相来了！

下一篇：字节客户端也疯狂拷打基础！

标签：

热门焦点

卢伟冰长文解析K60至尊版对Redmi有着里程碑式的意义

在今天的Redmi后性能时代战略发布会结束之后，Redmi总经理卢伟冰又带来了一篇长文，详解了为什么 Redmi 要开启后性能时代？为什么选择和 MediaTek、Pixelworks 深度合作？以及后性
WebRTC.Net库开发进阶，教你实现屏幕共享和多路复用！

WebRTC.Net库：让你的应用更亲民友好，实现视频通话无痛接入！除了基本用法外，还有一些进阶用法可以更好地利用该库。自定义 STUN/TURN 服务器配置WebRTC.Net 默认使用 Google 的
为什么你不应该使用Div作为可点击元素

按钮是为任何网络应用程序提供交互性的最常见方式。但我们经常倾向于使用其他HTML元素，如 div span 等作为 clickable 元素。但通过这样做，我们错过了许多内置浏览器的功能。
小红书1周涨粉49W+，我总结了小白可以用的N条涨粉笔记

作者：黄河懂运营一条性教育视频，被54万人“珍藏”是什么体验？最近，情感博主@公主是用鲜花做的，火了！仅仅凭借一条视频，光小红书就有超过128万人，为她疯狂点赞！更疯狂的是，这
新电商三兄弟，“抖快红”成团！

来源：价值研究所作者：Hernanderz 随着内容电商的概念兴起，抖音、快手、小红书组成的“新电商三兄弟”成为业内一股不可忽视的势力，给阿里、京东、拼多多带去了巨大压
四年持续更迭坚持探索行业无人之境，HarmonyOS 4带来五大升级多项创新

除了华为每年新发布的旗舰手机系列，上亿花粉更加期待鸿蒙系统每次的跨版本大更新。8月4日，HarmonyOS 4于HDC 2023正式发布，这也是该系统历经四年的再
iQOO 11S评测：行业唯一的200W标准版旗舰

【Techweb评测】去年底，iQOO推出了“电竞旗舰”iQOO 11系列，作为一款性能强机，该机不仅全球首发2K 144Hz E6全感屏，搭载了第二代骁龙8平台及144Hz电竞
3699元！iQOO Neo8 Pro顶配版今日首销：1TB UFS 4.0同价位唯一

5月23日，iQOO推出了全新的iQOO Neo8系列，包含iQOO Neo8和iQOO Neo8 Pro两个版本，其中标准版搭载高通骁龙8+，而Pro版更是首发搭载了联发科天玑9200+旗舰
Android 14发布：首批适配机型公布

5月11日消息，谷歌在今天凌晨举行了I/O大会，本次发布会谷歌带来了自家的AI语言模型PaLM 2、谷歌Pixel Fold折叠屏、谷歌Pixel 7a手机，同时发布了Androi