一梦七年。
一派青春撞了南墙,一生热爱回头太难。
文章 20
标签 29
分类 11
JS设计模式

JS设计模式

JS设计模式

设计模式是面向对象语言中一套在特定场景下的较为简洁且优雅的解决方案。最初的设计模式可以说是为静态类型语言而生的,或者说是完全从面向对象编程的角度出发的。但是设计模式实际上只是一种思想,即如何在某种场景下更简洁优雅的解决对应的问题,并将这种设计思想提炼出来形成一种普适的模式,因此设计模式本身是与语言无关的。每种语言都有一些比较实用的设计模式,使用这些设计模式可以提高代码的整洁性、可维护性以及性能等,JS中也不乏有一些必须要掌握的设计模式。

一、工厂模式

什么是工厂模式呢?打个比方,在面向对象语言中,我们的对象就好比手机,工厂函数就相当于手机制造厂,我们只需要将对应的零部件提供给工厂,工厂就能产出我们要的手机,至于如何生产的,我们就不需要关心了,我们的目的就是得到手机(对象)。所以工厂模式就是类似的一种生产的模式,只不过在JS中工厂模式生产的是对象。

工厂模式根据抽象程度的不同又可以分为三种工厂模式:简单工厂模式、工厂方法模式和抽象工厂模式。

简单工厂模式:

简单工厂模式也称为静态工厂模式,由一个工厂对象决定创建某个类的实例,主要用来创建同一类对象。假如你开了一家汽车制造公司,你的公司可以生产3种品牌的汽车,A、B、C。我们用构造器把汽车抽象为一个汽车类:

// 构造一个汽车类,包含了型号属性、价格属性
function Car(options) {
    this.model = options.model;
    this.price = options.price;
}

那么我们要如何才能生产不同品牌的汽车呢?这里就可以用简单工厂模式来实现。把生产哪种品牌的汽车这个逻辑抽离出来:

function makeCar(brand) {
    function Car(options) {
        this.model = options.model;
        this.price = options.price;
    }

    switch(brand) {
        case "A": 
            return new Car({model: "A-1", price: 350000});
        case "B":
            return new Car({model: "B-1", price: 250000});
        case "C":
            return new Car({model: "C-1", price: 150000});
        default: 
            throw new Error("目前仅可生产汽车品牌A、B、C的汽车")
    }
}

// 生产A品牌的汽车
const CarA = makeCar("A"); // {model: "A-1", price: 350000}

// 生产B品牌的汽车
const CarB = makeCar("B"); // {model: "B-1", price: 250000}

// 生产C品牌的汽车
const CarC = makeCar("C"); // {model: "C-1", price: 150000}

简单工厂模式让我没无需关注于创建对象的过程,我们只需要指定自己要什么,其他的事,工厂函数会帮我们处理。但是这只限对象数量少的情况,如果对象数量太多,创建逻辑比较复杂的时候,这个函数就会变得非常大,而且每次新增或者减少我们都要去修改内部的实现,维护起来异常艰难,也不符合开放封闭原则。因此,简单工厂模式比较有局限性。

工厂方法模式

工厂方法模式跟简单工厂模式不同的是,工厂方法模式将创建对象的行为推迟到子类中去完成,父类只规定