前端设计模式(一)设计原则和工厂模式

212 阅读2分钟

一、优秀设计的特征

1.代码复用:减少开发时间,与其重头在写一遍,不如重用已有代码。

2.扩展性:变化是程序员中唯一不变的事情,开发者应该尽量选择支持未来任何可能变更的方式。

二、SOLID原则

  • S 单一职责原则:一个程序就做一件事,如果功能很复杂就拆开,保证每一部分相互独立
  • O 开闭原则:对扩展开放,对修改关闭,增加需求时,扩展新代码,而不是修改原有代码
  • L 里氏替换原则:将一个基类对象替换成它的子类对象,程序将不会产生任何错误和异常,反过来则不成立
  • I 接口隔离原则:尽量缩小接口的范围,使得客户端的类不必实现其不需要的行为,每一个接口应该承担一种相对独立的角色,不干不该干的事,该干的事都要干
  • D 依赖倒置原则:高层次的类不应该依赖低层次的类。两者都应该依赖于抽象接口,抽象接口不应依赖于具体实现。具体实现应该依赖于抽象接口。

三、工厂模式

1.定义:工厂模式是一种创建型的设计模式,其在父类中提供一个创建对象的方法,允许子类决定实例化的类型

2.UML类图

image.png

image.png

3.代码

class Product{
    constructor(name){
        this.name = name;
    }
    init(){
        alert(this.name)
    }
    fun1(){
        alert('fun1')
    }
}

class Creator{
    constructor(name){
        return new Product(name);
    }
}

const creator = new Creator('xiaoli');
creator.init();
creator.fun1();

CreatorProduct封装起来的,用户无需知道Product细节,只需要使用Creator就行,使创建对象有一个统一的入口,如果不使用工厂模式,一旦Product名字发生变化,结果是灾难性的。

4.场景

(1)jQuery - $('div')

image.png

(2) React.createElment

image.png

(3) vue异步组件

image.png

5.设计模式验证

  • 构造函数和创建者分离:符合开放封闭原则
  • 你可以将产品创建代码放在程序的单一位置,从而使得代码更容易维护:单一职责原则