前端 JS 设计模式之工厂模式、单例模式、适配器模式和装饰器模式

Love The Way You Lie 2023-02-15 15:59 83阅读 0赞

#### 一、工厂模式 ####

1.  工厂模式，将 `new` 操作单独封装。遇到 `new` 时，就要考虑是否该使用工厂模式。
2.  对于工厂模式的理解，可以举例。你去购买汉堡，直接点餐、取餐，不会自己亲手做。商店要封装做汉堡的工作，做好直接给买者。
3.  工厂模式的设计原则验证，构造函数和创建者分离，符合开放封闭原则。
4.  工厂模式的代码，如下所示：

class  Product { 
        constructor(name) { 
            this.name = name
        }
        init() { 
            alert('init')
        }
        fun1() { 
            alert('fun1')
        }
        fun2() { 
            alert('fun3')
        }
    }
    
    class Creator { 
        create(name) { 
            return new Product(name)
        }
    }
    
    // 测试
    let creator = new Creator()
    let p = creator.create('p1')
    p.init()
    p.fun1()

#### 二、单例模式 ####

1.  单例模式，系统中被唯一使用，一个类只有一个实例。
2.  对于单例模式，常见的示例，比如登录框、购物车、`vuex` 和 `redux` 中的 `store` 等等。
3.  单例模式需要使用到 `java` 的特性 `private`。`ES6` 中没有，`Typescript` 除外，只能用 `java` 代码来演示 `UML` 图的内容。
4.  单例模式的设计原则验证，符合单一职责原则，只实例化唯一的对象。没法具体开放封闭原则，但是绝对不违反开放封闭原则。
5.  单例模式的代码，如下所示：

class SingleObject { 
        login() { 
            console.log('login...')
        }
    }
    SingleObject.getInstance = (function () { 
        let instance
        return function () { 
            if (!instance) { 
                instance = new SingleObject();
            }
            return instance
        }
    })()
    
    // 测试
    let obj1 = SingleObject.getInstance()
    obj1.login()
    let obj2 = SingleObject.getInstance()
    obj2.login()
    console.log(obj1 === obj2)

1.  单例模式与登录框的结合的代码，如下所示：

class LoginForm { 
        constructor() { 
            this.state = 'hide'
        }
        show() { 
            if (this.state === 'show') { 
                alert('已经显示')
                return
            }
            this.state = 'show'
            console.log('登录框已显示')
        }
        hide() { 
            if (this.state === 'hide') { 
                alert('已经隐藏')
                return
            }
            this.state = 'hide'
            console.log('登录框已隐藏')
        }
    }
    LoginForm.getInstance = (function () { 
        let instance
        return function () { 
            if (!instance) { 
                instance = new LoginForm();
            }
            return instance
        }
    })()
    
    // 一个页面中调用登录框
    let login1 = LoginForm.getInstance()
    login1.show()
    // login1.hide()
    
    // 另一个页面中调用登录框
    let login2 = LoginForm.getInstance()
    login2.show()
    
    // 两者是否相等
    console.log('login1 === login2', login1 === login2)

#### 三、适配器模式 ####

1.  适配器模式，旧接口格式和使用者不兼容，中间加一个适配转换接口。
2.  对于适配器模式的理解，可以举例。比如在去香港旅游的时候，使用的插头和内地的插头不一样，需要使用转换器进行转换，才可以使用。
3.  对于适配器模式的使用场景，封装旧接口，`vue computed` 等等。
4.  适配器模式的设计原则验证，将旧接口和使用者进行分离，符合开放封闭原则。
5.  适配器模式的代码，如下所示：

class Adaptee { 
        specificRequest () { 
            return '香港标准接口'
        }
    }
    
    class Target { 
        constructor() { 
            this.adaptee = new Adaptee()
        }
        request () { 
            let info = this.adaptee.specificRequest()
            return `${ info} - 转换器 - 内地标准插头`
        }
    }
    
    // 测试
    let target = new Target()
    let res = target.request()
    console.log(res)

#### 四、装饰器模式 ####

1.  装饰器模式，为对象添加新功能，不改变其原有的结构和功能。
2.  对于装饰器模式的理解，可以举例。在手机上可以套上一个手机壳，不会影响手机的正常使用功能，可以给手机起到装饰的作用，并且保护手机不受到伤害。
3.  对于装饰器模式的应用场景，比如 `ES7` 装饰器，`core-decorators` 等等。
4.  装饰器模式的设计原则验证，将现有对象和装饰器进行分离，两者独立存在，符合开放封闭原则。
5.  装饰器模式的代码，如下所示：

class Circle { 
        draw () { 
            console.log('画一个圆形')
        }
    }
    
    
    class Decorator { 
        constructor (circle) { 
            this.circle = circle
        }
        draw () { 
            this.circle.draw()
            this.setRedBorder(circle)
        }
        setRedBorder(circle) { 
            console.log('设置红色边框')
        }
    }
    
    
    // 测试代码
    let circle = new Circle()
    circle.draw()
    
    let des = new Decorator(circle)
    des.draw()

1.  装饰器模式在 `ES7` 装饰器中应用的代码，如下所示：

1.  装饰器模式在 `core-decorators` 中应用的代码，如下所示：

import {  deprecate } from 'core-decorators';
    
    class Person { 
      @deprecate
      facepalm() { }
    
      @deprecate('We stopped facepalming')
      facepalmHard() { }
    
      @deprecate('We stopped facepalming', {  url: 'http://knowyourmeme.com/memes/facepalm' })
      facepalmHarder() { }
    }
    
    let person = new Person();
    
    person.facepalm();
    
    person.facepalmHard();
    
    person.facepalmHarder();