前端设计模式之工厂模式

·  阅读 3988

什么是设计模式

设计模式(Design pattern)是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结

项目中合理的运用设计模式可以完美的解决很多问题,每种模式在现在中都有相应的原理来与之对应,每一个模式描述了一个在我们周围不断重复发生的问题,以及该问题的核心解决方案,这也是它能被广泛应用的原因。

  1. 模式:在某些场景下,针对某类问题的某种通用的解决方案
  2. 场景:项目所在的环境
  3. 问题:约束条件,项目目标等
  4. 解决方案:通用、可复用的设计,解决约束达到目标

为什么前端需要了解设计模式

使用设计模式是为了可复用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问,设计模式于己于他人于系统都是多赢的,设计模式使代码编制真正工程化,设计模式是软件工程的基石,如同大厦的一块块砖石一样。

在日常开发中大部分前端都在开发的中,进行组件、方法等封装、提炼的时候或多或少已经使用了一些设计模式的理念, 但是由于对设计模式的概念模糊,理解不够,从而导致设计整体架构的时候,会有各种局限性,拓展性、可读性、维护性变差,不得不多次重构甚至重写。

在 ts 在前端开发中加速推进的同时,合理的设计模式使得项目从架构、设计、迭代、维护都有一定质量的保障。

设计模式之工厂模式

简单工厂模式

简单工厂模式最大的优点在于实现对象的创建和对象的使用分离,将对象的创建交给专门的工厂类负责,但是其最大的缺点在于工厂类不够灵活,增加新的具体产品需要修改工厂类的判断逻辑代码,而且产品较多时,工厂方法代码逻辑将会非常复杂

举个栗子,宠物有很多种,我们目前有

class Dog { // 狗狗 
    constructor(name) { console.log(name) }
}

class Cat { // 小猫
    constructor(name) { console.log(name) }
}

class Mouse { // 小老鼠
    constructor(name) { console.log(name) }
}
复制代码

我们正常需要去各个进货点去购买对应的小宠物

new Dog('Spike')
new Cat('Tom')
new Mouse('Jerry')
复制代码

首先上述是同属一类的实例,我们如果要去各个进货点购买小宠物的话,劳累又伤神,所以我们可以去一家宠物店挑选我们需要的小宠物

class Pet { // 小小的宠物店 
    constructor(type, name) {
    this.pet = ""
        switch (type) {
            case 'dog': this.pet = new Dog(name); break;
            case 'cat': this.pet = new Cat(name); break;
            case 'mouse': this.pet = new Mouse(name); break;
            default: this.pet = '你还没有小宠物,快去买一只吧';
        }
    }
}

// 购买新的小宠物
new Pet('dog', 'Spike')
new Pet('cat', 'Tom')
new Pet('mouse', 'Jerry')
复制代码

简单工厂模式其实并不算是一种设计模式,更多的时候是一种编程习惯

抛开class类,我们采用方法来写一个类简单工厂模式的代码

function getFunction(path, params) { // get请求  
    console.log(path, params)
}

function postFunction(path, params) { // post请求  
    console.log(path, params)
}

function putFunction(path, params) { // put请求  
    console.log(path, params)
}

function ajaxSend(type, path, params) { // ajax发送请求  
    switch (type) {
        case 'post': {
            postFunction(path, params)
            break;
        };
        case 'put': {
            putFunction(path, params)
            break;
        };
        default: 
     getFunction(path, params)
    }
}

ajaxSend('get', 'path', 'params')
复制代码

如上就是我们日常对 ajax 发送请求方法的简单封装,根据传入的 type 类型来匹配不同的发送请求的通用方法,在同一种类型的方法各自实现自己的逻辑,比如 get 请求参数放在 query 从 url 传递给后台,而 post 跟 put 的参数则是放在 body 里面发送给后台。

工厂方法模式(Factory Method)

工厂方法模式是对简单工厂的进一步优化, 在工厂方法模式中,我们不再提供一个统一的工厂类来创建所有的对象,而是针对不同的对象提供不同的工厂。也就是说每个对象都有一个与之对应的工厂。说的好像挺复杂,简单来说就是解决简单工厂模式存在不方便添加新的类的问题,因为添加新的类以后依然需要修改工厂函数。

那我们再接着上面的宠物例子,将小宠物店升级一番

const Pet = (() => { // 宠物店升级啦  
    const pets = {
        dog(name) { console.log(name) },
        cat(name) { console.log(name) },
        mouse(name) { console.log(name) },
        duck(name) { // 我是新来的宠物小鸭子      
            console.log(name)
        }
    }

    return class {
        constructor(type, name) {
            try { return pets[type](name) }
            catch (error) { console.log('你还没有小宠物,快去买一只吧') }
        }
    }
})()

// 重新购买小宠物
new Pet('dog', 'Spike')
new Pet('cat', 'Tom')
new Pet('duck', 'Duck')
复制代码

宠物店升级之后,我们在宠物店进货的时候,想加入新宠物-小鸭子,只需要将 duck 这个小鸭子直接上架即可,而在简单工程模式中,我们不仅仅要去小鸭子的场地进一只小鸭子,还需要在 Pet 宠物店将小鸭子上架。

如上所示,我们也可以将之前的 ajax 请求方法改造一波

const ajaxType = {
    get(path, params) {
        console.log(path, params, 'query')
    },
    post(path, params) {
        console.log(path, params, 'body')
    },
    put(path, params) {
        console.log(path, params, 'body')
    }
}

function ajaxSend(way, path, params) { // ajax发送请求  
    try { ajaxType[way](path, params) }
    catch (error) { console.log('暂无匹配方法') }
}
ajaxSend('get', 'path', 'params')
复制代码

抽象工厂模式(Abstract Factory)

抽象工厂模式(Abstract Factory Pattern)是围绕一个超级工厂创建其他工厂。该超级工厂又称为其他工厂的工厂。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。

在抽象工厂模式中,接口是负责创建一个相关对象的工厂,不需要显式指定它们的类。每个生成的工厂都能按照工厂模式提供对象。

上面我们已经开了一个普通宠物店,而我们的生意慢慢的有了起色,这个时候想要做大做强,除了引入新的小宠物之外还需要不断的创新,于是我们开了一家水族馆。

class headPet { // 宠物总店
    sellpet(name) { // 出售宠物
        console.log('出售一只宠物', name)
    }
    desert(name) { // 遗弃宠物
        console.log('遗弃一只宠物', name)
    }
    operation(name, type) {
        switch (type) {
            case 'sell': {
                this.sellpet((name))
                break
            }
            default: {
                this.desert((name))
            }
        }
    }
}

class normalPet extends headPet { // 普通宠物分店
    constructor() {
        super()
    }
    dog(name, type) {
        this.operation(name, type)
    }
    cat(name, type) {
        this.operation(name, type)
    }
    mouse(name, type) {
        this.operation(name, type)
    }
}

class fishPet extends headPet { // 水族馆分店
    constructor() {
        super()
    }
    shark(name, type) {
        this.operation(name, type)
    }
    whale(name, type) {
        this.operation(name, type)
    }
}

function selectPet(shop) {
    switch (shop) {
        case 'normal': {
            return new normalPet()
        }
        case 'fish': {
            return new fishPet()
        }
        default: {
            console.log('暂无此分店哦!')
        }
    }
}

const normal = selectPet('normal')
normal.dog('Spike', 'sell') // 出售一只狗狗
normal.cat('Tom', 'desert') // 遗弃一只病猫
normal.mouse('Jerry', 'sell') // 出售一只小老鼠

const fish = selectPet('fish')
fish.shark('Shark', 'desert') // 遗弃一条死鱼
fish.whale('Whale', 'sell') // 出售一只鲸鱼
复制代码

如上我们通过选择不同的类型进入不同的店铺购买或遗弃小宠物,用抽象工厂完成了一个简单去各分店的功能,接下来用类似方法,我们也顺便改造一波 ajax 请求

function getFunction(path, params) { // get请求  
    console.log(path, params)
}

function postFunction(path, params) { // post请求  
    console.log(path, params)
}

function putFunction(path, params) { // put请求  
    console.log(path, params)
}

function ajaxInterface(type, path, params) { // ajax发送抽象
    switch (type) {
        case 'post': {
            return postFunction(path, params)
            break;
        };
        case 'put': {
            return putFunction(path, params)
            break;
        };
        default:
            return getFunction(path, params)
    }
}

function user() {
    const USER_URL_MAP = {
        getUser: 'getUserUrl',
        updateUser: 'updateUserUrl',
    }

    return {
        getUser(params) {
            return ajaxInterface('get', USER_URL_MAP['getUser'], params)
        },
        updateUser(params) {
            return ajaxInterface('post', USER_URL_MAP['getUser'], params)
        }
    }
}


function order() {
    const ORDER_URL_MAP = {
        getOrder: 'getOrderUrl',
        getOrderList: 'getOrderUrl',
        setOrder: 'setOrderUrl',
        delOrder: 'delOrderUrl',
        updateOrder: 'updateOrderUrl',
    }
    return {
        getOrder(params) {
            return ajaxInterface('get', ORDER_URL_MAP['getOrder'], params)
        },
        getOrderList(params) {
            return ajaxInterface('get', ORDER_URL_MAP['getOrderList'], params)
        },
        delOrder(params) {
            return ajaxInterface('post', ORDER_URL_MAP['delOrder'], params)
        }
    }
}

function senUrl(businessType) {
    switch (businessType) {
        case 'user': {
            return user
            break
        }
        case 'order': {
            return order
            break
        }
        default: {
            console.log('无此业务类型')
        }
    }
}

const userAction = senUrl('user')
userAction().getUser('用户信息哦')

const orderAction = senUrl('order')
orderAction().getOrder('订单信息哦')
复制代码

上面用类似抽象工厂的方法实现了一个 ajax 请求方法的封装,将业务层报了一层,底层跟业务层剥离,可以针对各个业务自己实现部分的业务,仅供参考。

附加信息

完整的 demo 地址:项目实战 demo,喜欢的朋友可以 star 一下,后续会根据设计模式博文的推出,逐步的将此项目继续拓展出来。

如对文章内容以及实例有任何疑问、见解可添加微信 Cookieboty 沟通。

另外关注公众号 Cookieboty1024,欢迎加入前端小兵成长营

手动狗头镇楼

本文使用 mdnice 排版

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改