好记性不如烂笔头——23种设计模式（上）-阿里云开发者社区

使用思维导图来阐述23种设计模式，并以TypeScript实现其代码，让我们前端切图崽写出的代码具有可扩展性、可复用性、减少代码冗余问题，提升自身内功。

一、设计原则

二、创建型模式

创建型模式包含单例模式、简单工厂模式、工厂方法模式、抽象工厂模式、原型模式、建造者模式。创建型模式就是创建对象的模式，抽象了实例化的过程。它帮助一个系统独立于如何创建、组合和表示它的那些对象。关注的是对象的创建，创建型模式将创建对象的过程进行了抽象，也可以理解为将创建对象的过程进行了封装，作为客户程序仅仅需要去使用对象，而不再关心创建对象过程中的逻辑。

2.1 单例模式

// 饿汉式
class Singleton1 {
    // 1. 构造器私有化，外部不能new
    private constructor(){}
    // 2. 本类内部创建对象实例化
    private static instance : Singleton1 = new Singleton1();
    // 3. 提供一个公有的静态方法，返回实例对象
    public static getInstance() : Singleton1 {
        return this.instance;
    }
}
console.log(Singleton1.getInstance(), '11111');
// 懒汉式
class Singleton2 {
    private constructor(){}
    private static instance: Singleton2 = null;
    public static getInstance() : Singleton2 {
        if (this.instance === null) {
            this.instance = new Singleton2();
        }
        return this.instance;
    }
}
console.log(Singleton2.getInstance(), '2222')

2.2 简单工厂模式

// 抽象产品接口
interface Product{}
// 具体产品一
class ConcreteProduct1 implements Product {
    constructor(){}
}
// 具体产品二
class ConcreteProduct2 implements Product {
    constructor(){}
}
// 简单工厂
class SimpleFactory {
    public static createProduct(type : number) : Product {
        let product = null;
        if (type === 1) {
            product = new ConcreteProduct1();
        } else if ( type === 2) {
            product = new ConcreteProduct2();
        }
        return product;
    }
}
// 使用
let product = SimpleFactory.createProduct(1);
console.log(product);

2.3 工厂方法模式

// 抽象产品接口
interface Product2{
    method1() : void;
    method2() : void;
}
// 具体产品一
class ConcreteProduct_1 implements Product2 {
    constructor(){}
    method1() {
    }
    method2() {
    }
}
// 具体产品二
class ConcreteProduct_2 implements Product2 {
    constructor(){}
    method1() {
    }
    method2() {
    }
}
// 抽象工厂
abstract class Creator {
    public abstract createProduct(type : number) : Product;
}
// 具体工厂
class ConcreteCreator extends Creator {
    constructor(){
        super();
    }
    public createProduct(type : number) : Product {
        let product = null;
        if (type === 1) {
            product = new ConcreteProduct_1();
        } else if (type === 2) {
            product = new ConcreteProduct_2();
        }
        return product;
    }
}
// 使用
const creator : Creator = new ConcreteCreator();
const myProduct : Product = creator.createProduct(1);

2.4 抽象工厂模式

// 抽象工厂接口
interface AbstractFactory {
    createProductA() : AbstractProductA;
    createProductB() : AbstractProductB;
}
// 抽象产品A接口
interface AbstractProductA {}
// 抽象产品B接口
interface AbstractProductB {}
// 具体工厂1
class ConcreteFactory1 implements AbstractFactory {
    constructor() {}
    public createProductA() : AbstractProductA {
        return new ConcreteProductA1();
    }
    public createProductB() : AbstractProductB {
        return new ConcreteProductB1();
    }
}
// 具体工厂2
class ConcreteFactory2 implements AbstractFactory {
    constructor() {}
    public createProductA() : AbstractProductA {
        return new ConcreteProductA2();
    }
    public createProductB() : AbstractProductB {
        return new ConcreteProductB2();
    }
}
// 具体产品A1
class ConcreteProductA1 implements AbstractProductA {}
// 具体产品A2
class ConcreteProductA2 implements AbstractProductA {}
// 具体产品B1
class ConcreteProductB1 implements AbstractProductB {}
// 具体产品B2
class ConcreteProductB2 implements AbstractProductA {}
// 使用
const factory1 : AbstractFactory = new ConcreteFactory1();
const factory2 : AbstractFactory = new ConcreteFactory2();
const productA1 : AbstractProductA = factory1.createProductA();
const productA2 : AbstractProductA = factory2.createProductA();
const productB1 : AbstractProductB = factory1.createProductB();
const productB2 : AbstractProductB = factory2.createProductB();

2.5 原型模式

interface Prototype {
    clone():Prototype;
}
class Dog implements Prototype {
    public name: string;
    public birthYear: number;
    public sex: string;
    public presentYear: number;
    constructor() {
        this.name = "lili";
        this.birthYear = 2015;
        this.sex = "男";
        this.presentYear = 2018;
    }
    public getDiscription(): string {
        return `狗狗叫${this.name},性别${this.sex},${this.presentYear}年${this.presentYear - this.birthYear}岁了`
    }
    // 实现复制
    public clone(): Prototype {
        return Object.create(this);
    }
}
// 使用
const dog = new Dog();
console.log(dog.getDiscription());
dog.presentYear = 2020;
const dog1 = Object.create(dog);
console.log(dog1.getDiscription());

2.6 建造者模式

// 抽象建造者
abstract class Builder {
    public abstract buildPartA() : void;
    public abstract buildPartB() : void;
    public abstract buildPartC() : void;
    public abstract buildProduct() : Product;
}
// 具体建造者
class ConcreteBuilder extends Builder {
    private product : Product;
    constructor(product : Product) {
        super();
        this.product = product;
    }
    public buildPartA() : void {}
    public buildPartB() : void {}
    public buildPartC() : void {}
    // 最终组建一个产品
    public buildProduct() : Product {
        return this.product;
    }
}
// 产品角色
class Product {
    public doSomething() : void {
        // 独立业务
    }
}
// 指挥者
class Director {
    private _builder : Builder;
    constructor(builder : Builder) {
        this._builder = builder;
    }
    set builder(builder : Builder) {
        this._builder = builder;
    }
    // 将处理建造的流程交给指挥者
    public constructorProduct() {
        this._builder.buildPartA();
        this._builder.buildPartB();
        this._builder.buildPartC();
        return this._builder.buildProduct();
    }
}
// 使用
const builder : Builder = new ConcreteBuilder(new Product());
const director : Director = new Director(builder);
const product : Product = director.constructorProduct();

三、结构型模式

结构型模式包含适配器模式、桥接模式、装饰模式、组合模式、外观模式、享元模式、代理模式。结构型模式为解决怎样组装现有的类，设计他们的交互方式，从而达到实现一定的功能。

3.1 适配器模式

// 类适配器
// 目标对象
interface Target {
    request() : void;
}
// 被适配者
class Adaptee {
    constructor() {}
    // 这是源角色，有自己的的业务逻辑
    public specificRequest() : void {}
}
// 适配器
class Adapter extends Adaptee implements Target {
    constructor() {
        super();
    }
    public request() : void {
        super.specificRequest();
    }
}
const target : Target = new Adapter();
target.request();

// 对象适配器
// 目标对象
interface Target {
    request() : void;
}
// 被适配者
class Adaptee {
    constructor() {}
    // 这是源角色，有自己的的业务逻辑
    public specificRequest() : void {}
}
// 适配器
class Adapter implements Target {
    private adaptee : Adaptee;
    constructor(adaptee : Adaptee) {
        this.adaptee = adaptee;
    }
    public request() : void {
        this.adaptee.specificRequest();
    }
}
// 使用
const target : Target = new Adapter(new Adaptee());
target.request();

// 接口适配器
interface Adaptee {
    operation1() : void;
    operation2() : void;
}
abstract class AbsAdapter implements Adaptee {
    public operation1() : void {}
    public operation2() : void {}
}
class UseClass extends AbsAdapter {
    public operation1() : void {}// 重写该类
}

3.2 桥接模式

// 实现接口角色
interface Implementor {
    doSomething() : void;
    doAnything() : void;
}
// 具体实现角色
class ConcreteImplementor1 implements Implementor {
    public doSomething() : void {
    }
    public doAnything() : void {
    }
}
class ConcreteImplementor2 implements Implementor {
    public doSomething() : void {
    }
    public doAnything() : void {
    }
}
// 抽象类
abstract class Abstraction {
    private imp : Implementor;
    constructor(imp : Implementor) {
        this.imp = imp;
    }
    // 自身的行为和属性
    public request() : void {
        this.imp.doSomething();
    }
}
// 具体抽象化角色
class RefinedAbstraction extends Abstraction {
    constructor(imp : Implementor) {
        super(imp);
    }
    public request() : void {
        // 自己写一些处理业务
        super.request();
    }
}
// 调用
// 定义一个实现化角色
const imp : Implementor = new ConcreteImplementor1();
// 定义一个抽象化角色
const abs : Abstraction = new RefinedAbstraction(imp);
// 执行上下文
abs.request();

3.3 装饰者模式

// 抽象构件
abstract class Component {
    public abstract operate() : void;
}
// 具体构件
class ConcreteComponent extends Component {
    public operate() : void {
        console.log('do something');
    }
}
// 装饰角色
abstract class Decorator extends Component {
    private component : Component = null;
    constructor(component : Component ) {
        super();
        this.component = component;
    }
    public operate() : void {
        this.component.operate();
    }
}
// 具体装饰者
class ConcreteDecoratorA extends Decorator {
    constructor(component : Component) {
        super(component);
    }
    // 定义自己的修饰方法
    private methodA() : void {
        console.log('methodA修饰');
    }
    // 重写父类方法
    public operate() : void {
        this.methodA();
        super.operate();
    }
}
class ConcreteDecoratorB extends Decorator {
    constructor(component : Component) {
        super(component);
    }
    // 定义自己的修饰方法
    private methodB() : void {
        console.log('methodB修饰');
    }
    // 重写父类方法
    public operate() : void {
        this.methodB();
        super.operate();
    }
}
function main() {
    let component : Component = new ConcreteComponent();
    // 第一次装饰
    component = new ConcreteDecoratorA(component);
    // 第二次装饰
    component = new ConcreteDecoratorB(component);
    // 装饰后运行
    component.operate();
}
main();

3.4 组合模式

abstract class Component {
    protected name : string;
    constructor(name : string) {
        this.name = name;
    }
    public abstract doOperation() : void;
    public add(component : Component) : void {
    }
    public remove(component : Component) : void {
    }
    public getChildren() : Array<Component> {
        return [];
    }
}
class Composite extends Component {
    // 构件容器
    private componentList : any;
    constructor(name : string) {
        super(name);
        this.componentList = [];
    }
    public doOperation() : void {
        console.log(`这是容器${this.name}，处理一些逻辑业务！`);
    }
    public add(component : Component) : void {
        this.componentList.push(component);
    }
    public remove(component : Component) : void {
        const componentIndex = this.componentList.findIndex((value : Component, index : Number) => {
            return value == component;
        });
        this.componentList.splice(componentIndex, 1);
    }
    public getChildren() : Array<Component> {
        return this.componentList;
    }
}
class Leaf extends Component {
    constructor(name : string) {
        super(name);
    }
    public doOperation() : void {
        console.log(`这是叶子节点${this.name}，处理一些逻辑业务！`);
    }
}
function main() {
    const root : Component  = new Composite('root');
    const node1 : Component = new Leaf('1');
    const node2 : Component = new Composite('2');
    const node3 : Component = new Leaf('3');
    root.add(node1);
    root.add(node2);
    root.add(node3);
    const node2_1 : Component = new Leaf("2_1");
    node2.add(node2_1);
    const children1 = root.getChildren();
    console.log(children1);
    root.remove(node2);
    const children2 = root.getChildren();
    console.log(children2);
}
main();

3.5 外观模式

class SubSystemA {
    public doOperationA() : void {
        console.log('子系统A的举动');
    }
}
class SubSystemB {
    public doOperationB() : void {
        console.log('子系统B的举动');
    }
}
class Facade {
    private subSystemA : SubSystemA;
    private subSystemB : SubSystemB;
    constructor() {
        this.subSystemA = new SubSystemA();
        this.subSystemB = new SubSystemB();
    }
    public doOperation() : void {
        this.subSystemA.doOperationA();
        this.subSystemB.doOperationB();
    }
}
function main() {
    const facade : Facade = new Facade();
    facade.doOperation();
}
main();

3.6 享元模式

abstract class Flyweight {
    public abstract doOperation(extrinsicState : string) : void;
}
class ConcreteFlyweight extends Flyweight {
    private intrinsicState : string;
    constructor(intrinsicState : string) {
        super();
        this.intrinsicState = intrinsicState;
    }
    public doOperation(extrinsicState : string) : void {
        console.log(`这是具体享元角色，内部状态为${this.intrinsicState},外部状态为${extrinsicState}`);
    }
}
interface flyweightObject {
    [key : string] : Flyweight
}
class FlyweightFactory {
    private flyweights : flyweightObject;
    constructor() {
        this.flyweights = {};
    }
    public getFlyweight(intrinsicState : string) : Flyweight {
        if (!this.flyweights[intrinsicState]) {
            const flyweight : Flyweight = new ConcreteFlyweight(intrinsicState);
            this.flyweights[intrinsicState] = flyweight;
        }
        return this.flyweights[intrinsicState];
    }
}
function main() {
    const factory : FlyweightFactory = new FlyweightFactory();
    const flyweight1 : Flyweight = factory.getFlyweight("aa");
    const flyweight2 : Flyweight = factory.getFlyweight("aa");
    flyweight1.doOperation('x');
    flyweight2.doOperation('y');
}
main();

好记性不如烂笔头——23种设计模式（上）

一、设计原则

二、创建型模式

2.1 单例模式

2.2 简单工厂模式

2.3 工厂方法模式

2.4 抽象工厂模式

2.5 原型模式

2.6 建造者模式

三、结构型模式

3.1 适配器模式

3.2 桥接模式

3.3 装饰者模式

3.4 组合模式

3.5 外观模式

3.6 享元模式

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

好记性不如烂笔头——23种设计模式（上）

一、设计原则

二、创建型模式

2.1 单例模式

2.2 简单工厂模式

2.3 工厂方法模式

2.4 抽象工厂模式

2.5 原型模式

2.6 建造者模式

三、结构型模式

3.1 适配器模式

3.2 桥接模式

3.3 装饰者模式

3.4 组合模式

3.5 外观模式

3.6 享元模式

热门文章

最新文章

相关课程

相关电子书