结合 ES6 类编写JavaScript 创建型模式

目录
  • 前言
    • 什么是设计模式?
    • 创建型设计模式
  • 1. 工厂模式
    • 实例
  • 2. 抽象工厂
    • 实例
  • 3. 构建器模式
    • 实例
  • 4. 原型模式
    • 实例
  • 5. 单例模式
    • 实例

前言

什么是设计模式?

设计模式是软件设计中常见问题的解决方案,这些模式很容易重复使用并且富有表现力。

在软件工程中,设计模式(design pattern)是对软件设计中普遍存在(反复出现)的各种问题,所提出的解决方案。它并不直接用来完成代码的编写,而是描述在各种不同情况下,要怎么解决问题的一种方案。面向对象设计模式通常以类别或对象来描述其中的关系和相互作用,但不涉及用来完成应用程序的特定类别或对象。—— 维基百科

有三种模式:创建型模式,结构型模式、行为型模式。

  • 创建型模式:解决与创建对象相关的问题。
  • 结构型模式:处理实体之间的关系,以及它们如何共同组成一个更大的结构。
  • 行为型模式:处理对象如何相互通信和交互。

创建型设计模式

创建设计模式将创建对象,而不是直接实例化对象。

在软件工程中,创建型模式是处理对象创建的设计模式,试图根据实际情况使用合适的方式创建对象,因为基本的对象创建方式可能会导致设计上的问题,或增加设计的复杂度。创建型模式的关注点是如何创建对象,其核心思想是要把对象的创建和使用相分离。—— 维基百科

  • 工厂模式
  • 抽象工厂
  • 构建器模式
  • 原型模式
  • 单例模式

1. 工厂模式

工厂模式定义了一个用于创建单个对象的接口,并让子类决定要实例化类。

工厂方法模式(英语:Factory method pattern)是一种实现了“工厂”概念的面向对象设计模式。就像其他创建型模式一样,它也是处理在不指定对象具体类型的情况下创建对象的问题。工厂方法模式的实质是“定义一个创建对象的接口,但让实现这个接口的类来决定实例化哪个类。—— 维基百科

实例

以一个点为例,有一个 Point 类,必须创建一个笛卡尔点和一个极点。将定义一个 Point 工厂来完成这项工作。

CoordinateSystem = {
    CARTESIAN:0,
    POLAR:1
};

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    static get factory() {
        return new PointFactory();
    }
}

现在将创建 Point 工厂,现在将使用工厂:

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    static get factory() {
        return new PointFactory();
    }
}
class PointFactory {
    static newCartesianPoint(x, y) {
        return new Point(x, y);
    }

    static newPolarPoint(rho, theta) {
        return new Point(rho * Math.cos(theta), rho * Math.sin(theta));
    }
}
const point = PointFactory.newPolarPoint(5, Math.PI / 2);
const point2 = PointFactory.newCartesianPoint(5, 6);
console.log(point);
console.log(point2);

2. 抽象工厂

抽象工厂创建公共对象的族或组,而不指定它们的具体类。

抽象工厂模式提供了一种方式,可以将一组具有同一主题的单独的工厂封装起来。—— 维基百科

实例

将使用饮料和饮料制造机的示例。

class Drink {
    consume() {}
}
class Tea extends Drink {
    consume() {
        console.log("This is tea");
    }
}
class Coffee extends Drink {
    consume() {
        console.log("This is coffee");
    }
}
class DrinkFactory {
    prepare(amount) {}
}
class TeaFactory extends DrinkFactory {
    makeTea() {
        console.log("Tea Created");
        return new Tea();
    }
}
class CoffeeFactory extends DrinkFactory {
    makeCoffee() {
        console.log("Coffee Created");
        return new Coffee();
    }
}
const teaDrinkFactory = new TeaFactory();
const tea = teaDrinkFactory.makeTea();
tea.consume();
const coffeeDrinkFactory = new CoffeeFactory();
const coffee = coffeeDrinkFactory.makeCoffee();
coffee.consume();

3. 构建器模式

构建器模式从简单对象构造复杂对象。

又名:建造模式,是一种对象构建模式。它可以将复杂对象的建造过程抽象出来(抽象类别),使这个抽象过程的不同实现方法可以构造出不同表现(属性)的对象。—— 维基百科

实例

将使用存储 Person 信息的 person 类的 ab 示例。

class Person {
    constructor() {
        this.streetAddress = this.postcode = this.city = "";
        this.companyName = this.position = "";
        this.annualIncome = 0;
    }

    toString() {
        return `个人生活在 ${this.streetAddress},${this.city},${this.postcode} ,工作在 ${this.companyName} 作为一名 ${this.position} 收入 ${this.annualIncome}`;
    }
}

现在将创建 Person BuilderPerson Job Builder 和 Person Address Builder

class PersonBuilder {
    constructor(person = new Person()) {
        this.person = person;
    }

    get lives() {
        return new PersonAddressBuilder(this.person);
    }

    get works() {
        return new PersonJobBuilder(this.person);
    }
    build() {
        return this.person;
    }
}
class PersonJobBuilder extends PersonBuilder {
    constructor(person) {
        super(person);
    }
    at(companyName) {
        this.person.companyName = companyName;
        return this;
    }
    asA(position) {
        this.person.position = position;
        return this;
    }
    earning(annualIncome) {
        this.person.annualIncome = annualIncome;
        return this;
    }
}

class PersonAddressBuilder extends PersonBuilder {
    constructor(person) {
        super(person);
    }

    at(streetAddress) {
        this.person.streetAddress = streetAddress;
        return this;
    }

    withPostcode(postcode) {
        this.person.postcode = postcode;
        return this;
    }

    in(city) {
        this.person.city = city;
        return this;
    }
}

现在将使用上面定义的构建器:

const personBuilder = new PersonBuilder();
const person = personBuilder.lives
    .at("高新南九道")
    .in("深圳")
    .withPostcode("518029")
    .works.at("字节跳动")
    .asA("工程师")
    .earning(10000)
    .build();
console.log(person.toString()); // 个人生活在 高新南九道,深圳,518029 ,工作在 字节跳动 作为一名 工程师 收入 10000

4. 原型模式

原型模式从现有对象创建新对象。

其特点在于通过“复制”一个已经存在的实例来返回新的实例,而不是新建实例。被复制的实例就是我们所称的“原型”,这个原型是可定制的。—— 维基百科

实例

使用汽车的例子:

class Car {
    constructor(name, model) {
        this.name = name;
        this.model = model;
    }
    setName(name) {
        console.log(name);
        this.name = name;
    }
    clone() {
        return new Car(this.name, this.model);
    }
}
const car = new Car();
car.setName("闪电");

const car2 = car.clone();
car2.setName("麦昆");

5. 单例模式

单例模式确保只为特定类创建一个对象。

在软件工程中,单例模式是一种软件设计模式,它将类的实例化限制为一个“单一”实例。当需要一个对象来协调整个系统的动作时,这很有用。 —— 维基百科

实例

创建一个单例类:

class Singleton {
    constructor() {
        const instance = this.constructor.instance;
        if (instance) {
            return instance;
        }
        this.constructor.instance = this;
    }

    say() {
        console.log("Saying……");
    }
}
const s1 = new Singleton();
const s2 = new Singleton();
console.log("Are they same?" + (s1 === s2));
s1.say();

到此这篇关于结合 ES6 类编写JavaScript 创建型模式的文章就介绍到这了,更多相关JS 创建型模式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • js定义类的方法示例【ES5与ES6】

    本文实例讲述了js定义类的方法.分享给大家供大家参考,具体如下: 以下是es5标准里定义类的方法: <script> function Point(x,y){ this.x=x; this.y=y; } Point.prototype.toString=function(){ return '('+this.x+', '+this.y+')'; } var point=new Point(1,2); console.log(point); </script> 运行结果: 上面这样用

  • ES6 javascript中Class类继承用法实例详解

    本文实例讲述了ES6 javascript中Class类继承用法.分享给大家供大家参考,具体如下: 1. 基本用法 Class 之间可以通过extends关键字实现继承, 这比 ES5 的通过修改原型链实现继承, 要清晰和方便很多. class ColorPoint extends Point {} 上面代码定义了一个ColorPoint类, 该类通过extends关键字, 继承了Point类的所有属性和方法. 但是由于没有部署任何代码, 所以这两个类完全一样, 等于复制了一个Point类. 下

  • JavaScript ES6 Class类实现原理详解

    JavaScript ES6之前的还没有Class类的概念,生成实例对象的传统方法是通过构造函数. 例如: function Mold(a,b){ this.a=a; this.b=b; } Mold.prototype.count=function(){ return this.a+this.b; }; let sum=new Mold(1,2); console.log(sum.count()) //3 这中写法跟传统的面向对象语言差异较大,写起来也比较繁杂. ES6提供了更加接近其他语言的

  • ES6中javascript实现函数绑定及类的事件绑定功能详解

    本文实例讲述了ES6中javascript实现函数绑定及类的事件绑定功能的方法.分享给大家供大家参考,具体如下: 函数绑定 箭头函数可以绑定this对象,大大减少了显式绑定this对象的写法(call.apply.bind).但是,箭头函数并不适用于所有场合,所以 ES7 提出了 " 函数绑定 " ( function bind )运算符,用来取代call.apply.bind调用.虽然该语法还是 ES7 的一个提案,但是 Babel 转码器已经支持. 函数绑定运算符是并排的两个双冒号

  • JavaScript ES6中class定义类实例方法

    目录 前言 正文 1.声明类的两种方式: 2.class 类的构造函数 3.class中方法定义 3.1 class 中定义普通的实例方法 3.2 class 类中定义访问器方法 3.3 类的静态方法(类方法) 文末 前言 我们会发现,按照之前学习过的构造函数形式创建 类 ,不仅仅和编写普通的函数过于相似,而且代码并不容易理解. 在 ES6(ECMAScript2015)新的标准中使用了class关键字来直接定义类:但是类本质上依然是之前所学习过的构造函数.原型链的语法糖而已.所以学好之前的构造

  • ES6 javascript中class类的get与set用法实例分析

    本文实例讲述了ES6 javascript中class类的get与set用法.分享给大家供大家参考,具体如下: 与 ES5 一样, 在 Class 内部可以使用get和set关键字, 对某个属性设置存值函数和取值函数, 拦截该属性的存取行为. class MyClass { constructor() { // ... } get prop() { return 'getter'; } set prop(value) { console.log('setter: ' + value); } }

  • 结合 ES6 类编写JavaScript 创建型模式

    目录 前言 什么是设计模式? 创建型设计模式 1. 工厂模式 实例 2. 抽象工厂 实例 3. 构建器模式 实例 4. 原型模式 实例 5. 单例模式 实例 前言 什么是设计模式? 设计模式是软件设计中常见问题的解决方案,这些模式很容易重复使用并且富有表现力. 在软件工程中,设计模式(design pattern)是对软件设计中普遍存在(反复出现)的各种问题,所提出的解决方案.它并不直接用来完成代码的编写,而是描述在各种不同情况下,要怎么解决问题的一种方案.面向对象设计模式通常以类别或对象来描述

  • 5种Java经典创建型模式详解

    一.概况 总体来说设计模式分为三大类: (1)创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. (2)结构型模式,共七种:适配器模式.装饰器模式.代理模式.外观模式.桥接模式.组合模式.享元模式. (3)行为型模式,共十一种:策略模式.模板方法模式.观察者模式.迭代子模式.责任链模式.命令模式.备忘录模式.状态模式.访问者模式.中介者模式.解释器模式. 二.设计模式的六大原则 1.开闭原则(Open Close Principle) 开闭原则就是说对扩展开放,对修

  • Java创建型模式之建造者模式详解

    目录 一.介绍 二.UML类图 三.具体代码 四.lombok的@Builder注解(拓展) 五.在Spring中的应用 一.介绍 建造者模式(Builder Pattern)属于创建型模式.如果一个对象具有复杂的内部结构或者内部属性本身相互依赖(有顺序要求),甚至对象中的某些属性的创建也有一个很复杂的过程,就可以使用建造者模式 二.UML类图 三.具体代码 业务代码 public class Product { private String part1; private String part

  • C++工厂方法之对象创建型模式详解

    目录 1.代码示例 2.工厂方法模式的定义(实现意图) 总结 1.代码示例 工厂方法模式,简称工厂模式或者多态工厂模式.与简单工厂模式相比,引入了更多的新类,灵活性更强,实现也更加复杂.符合开闭原则,付出的代价是需要新增加多个新的工厂类. 如下,M_UndeadFactory.M_ElementFactory.M_MechanicFactory 类有一个共同的父类 M_ParFactory(工厂抽象类). M_ParFactory 类中的 createMonster 成员函数其实就是个工厂方法,

  • 结合ES6 编写 JavaScript 设计模式中的结构型模式

    目录 前言 什么是设计模式? 结构型设计模式 适配器模式 实例 桥接模式 实例 组合模式 实例 装饰者模式 实例 门面模式 实例 享元模式 实例 代理模式 实例 前言 本文将对 20 多种 JavaScript 设计模式进行简单概述,然后结合 ES6 类的方式来编写实例代码展示其使用方式. JavaScript 在现代前端中扮演重要的角色,相比过去能够做的事情已经不在一个级别上了.JavaScript 最大的特征是其灵活性,一般只要敢想敢写,可以把程序写得很简单,有可以写得很复杂.其灵活性导致编

  • PHP设计模式(四)原型模式Prototype实例详解【创建型】

    本文实例讲述了PHP设计模式:原型模式Prototype.分享给大家供大家参考,具体如下: 1.   概述 我们都知道,创建型模式一般是用来创建一个新的对象,然后我们使用这个对象完成一些对象的操作,我们通过原型模式可以快速的创建一个对象而不需要提供专门的new()操作就可以快速完成对象的创建,这无疑是一种非常有效的方式,快速的创建一个新的对象. 例子1:孙悟空拔下一嘬猴毛,轻轻一吹就会变出好多的孙悟空来. 例子2:寄个快递 下面是一个邮寄快递的场景: "给我寄个快递."顾客说. &qu

  • PHP设计模式(三)建造者模式Builder实例详解【创建型】

    本文实例讲述了PHP设计模式:建造者模式Builder.分享给大家供大家参考,具体如下: 1. 概述 在软件开发的过程中,当遇到一个"复杂的对象"的创建工作,该对象由一定各个部分的子对象用一定的算法构成,由于需求的变化,复杂对象的各个部分经常面临剧烈的变化,但将它们组合在一起的算法相对稳定. 例子1:买肯德基 典型的儿童餐包括一个主食,一个辅食,一杯饮料和一个玩具(例如汉堡.炸鸡.可乐和玩具车).这些在不同的儿童餐中可以是不同的,但是组合成儿童餐的过程是相同的. 客户端:顾客,想去买一

  • Java创建型设计模式之工厂方法模式深入详解

    目录 简单工厂模式 定义产品对象 创建工厂类 工厂使用反射 工厂方法模式 概述 应用场景 优缺点 主要角色 工厂方法模式的基本使用 创建抽象产品 创建具体产品 创建抽象工厂 创建具体工厂 客户端执行 简单工厂模式 简单工厂模式(Simple Factory Pattern)是指由一个工厂对象决定创建出哪一种产品类的实例,但是它不属于设计模式. 简单工厂适用于工厂类负责创建的对象较少的场景,且客户端只需要传入工厂类的参数,对于如何创建对象的逻辑不需要关心. 定义产品对象 public interf

  • Java创建型设计模式之抽象工厂模式(Abstract Factory)

    目录 抽象工厂模式 概述 产品等级结构与产品族 优缺点 主要角色 抽象工厂模式的基本使用 创建抽象产品 创建具体产品 创建抽象工厂 创建具体工厂 客户端执行 抽象工厂模式 概述 抽象工厂模式(Abastract Factory Pattern)属于创建型模式,它提供了一种创建对象的最佳方式. 它提供一个创建一系列相关或相互依赖对象的接口,无须显式指定他们具体的类.每个生成的工厂都能按照工厂模式提供对象. 抽象工厂模式是围绕一个超级工厂创建其他工厂,该超级工厂又称为其他工厂的工厂. 产品等级结构与

  • javascript设计模式 – 工厂模式原理与应用实例分析

    本文实例讲述了javascript设计模式 – 工厂模式原理与应用.分享给大家供大家参考,具体如下: 介绍:前面我们介绍了简单工厂模式,简单工厂模式存在一个严重的问题:当需要扩展时必定要修改工厂类的源代码.我们虽然在第二个demo中做了一些优化,但是我们需在使用时明确指定执行方法的名字,这无疑提高了使用成本.那如何实现增加新产品而不影响已有代码?工厂模式应运而生. 定义:定义一个用于创建对象的接口,让子类决定将哪一个类实例化.工厂模式让一个类的实例化延迟到其子类.工厂模式又称为工厂方法模式,又可

随机推荐