【设计模式】使用 Builder 模式优化参数极多的函数

Builder(生成器)模式,让开发者能一步一步地创建复杂的对象。

优化参数极多的函数

常规方法定义的函数

一些函数,比如提交表单,需要的参数非常多,按照常规的写法,可能会定义为这样:

js 复制代码
function submit(name, phone, idCard, age, ...more) {}

这样定义的问题是:需要将参数写在固定的位置,随着参数的增多,这种传参方式会变得难以维护。

如果遇到某些定义在中间位置的参数为可选参数时,比如上面定义的 idCard,传参就变成了下面这样:

js 复制代码
submit('zkb', '188', '', 18, ...)

将参数合并到一个对象中传入

js 复制代码
function submit(params) {
    const name = params.name
    const phone = params.phone
    // ...
}

将参数合并到一个对象中传入可以缓解上面的问题,但这种方法也有缺点。

必须查看文档或者到方法的源码中才能知道这个方法具体需要什么参数。

使用 Builder 模式优化

Builder 模式改造的思想就是,不直接调用函数,而是提供一个生成器函数,在生成器函数中拆解函数的参数,分段存入,最后再执行 submit() 函数。

js 复制代码
function submit(params) {
    const name = params.name
    const phone = params.phone
    // ...
}

class SubmitBuilder() {
    name // 名称
    phone // 手机号
    setIdCard // 身份证号

    get age() {
        if(this.idCard) {
            // 从身份证号中提取
        }
        return ''
    }
    // ...
    setBaseInfo(name, phone) {
        this.name = name
        this.phone = phone
    }

    setIdCard(idCard) {
        this.idCard = idCard
    }

    invoke() {
        submit({
            name: this.name,
            phone: this.phone,
            // ...
        })
    }
}

这时提交表单时的操作就变成了:

js 复制代码
const submitBuilder = new SubmitBuilder()

submitBuilder
    .setBaseInfo('zkb', '188')
    .setIdCard('')
    .invoke()

可以看到,Builder 模式让代码变得比原来清晰许多,这样做有这些好处:

  • 让开发者不用直接去调用复杂的方法,而是可以再辅助类的引导下一步一步填充参数。
  • 如果参数之间有联动关系,可以在 set() 方法中去操作。
  • 如果一个参数可以由另一个参数推导出来,可以用 getter 来定义前者。
  • 可以确保某些参数必须同时传。
  • 添加参数时易于扩展、维护。

优化构造函数

可以用同样的方式优化构造函数,只是最后执行操作的方法名改为 build,当然这只是一个建议。

参考

《Node.js设计模式》

相关推荐
懒大王爱吃狼32 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
待磨的钝刨2 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
逐·風5 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦6 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山7 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄8 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
捕鲸叉8 小时前
MVC(Model-View-Controller)模式概述
开发语言·c++·设计模式