文档章节

JS代码简洁之道--函数

o
 osc_icwhzig7
发布于 07/01 16:36
字数 1176
阅读 22
收藏 0

精选30+云产品,助力企业轻松上云!>>>

函数的参数越少越好

有一个准则是:如果你的函数参数超过两个,就应该改为对象传入。

这样做是合理的,因为当函数参数超过两个时,参数顺序开始变得难以记忆,而且容易出现一种很尴尬的情况:比如我只需要传入第三个参数,因为其自身顺序的原因,不得不补齐前两个根本用不上的参数,以让它顺利排在第三位。

// bad
const createArticle = (title, author, date, content) => { }
createArticle('震惊,一男子竟偷偷干这事', 'zhangnan', '2020/06/29', '某天深夜,我喝多了点酒...')

// good
const createArticle = ({title, author, date, content}) => { }
createArticle({
    title: '震惊,一男子竟偷偷干这事',
    author: 'zhangnan',
    date: '2020/06/29',
    content: '某天深夜,我喝多了点酒...'
})

保持函数的单一职责原则

这是软件开发领域亘古不变的一个真理,让一个函数只专注于一件事情,能够很好的解耦各个功能之间的联系,使得后续对某一个功能进行更改时,不用担心会影响其他模块。

假设我们现在有一个需求:现在需要给班里的每一个同学发放假短信通知,如果是男生,就用电信主机号来发,如果是女生,则用联通主机号发,同时额外发送一封爱心邮件。实现如下:

// bad 代码挤成一堆,很难理清
// 男生女生的通知方式还有所不同,后期如果要改动女生的通知方式,很难保证不会影响到男生
// 因为大家都写在同一个函数里

const notifyStudents = (studentList) => {
    studentList.forEach(student => {
        if (student.gender === 'male') {
            const sender1 = new SmsSender({ carrier: '电信' });
            sender1.init();
            sender1.sendTo(student)   
        } else {
            const sender2 = new SmsSender({ carrier: '联通' });
            sender2.init();
            sender2.sendTo(student);
            
            const sender3 = new EmailSender({ type: 'QQ邮箱' });
            sender3.connect();
            sender3.sendTo(student)
        }
    })
}


// good 函数拆分,各司其职,清晰明了
// 虽然看起来代码量多了一点点
// 但是分工明确,互不影响
const initSmsSender = (carrier) => {
    const sender = new SmsSender({ carrier });
    sender.init();
}

const initEmailSender = (type) => {
    const sender = new EmailSender({ type });
    sender.connect();
}

const notifyMales = (studentList) => {
    const smsSender = initSmsSender('电信');
    const maleList = studentList.filter(student => student.gender === 'male');
    
    maleList.forEach(male => smsSender.sendTo(male));
}

const notifyFemales = (studentList) => {
    const smsSender = initSmsSender('联通');
    const emailSender = initEmailSender('QQ邮箱');
    
    const femaleList = studentList.filter(student => student.gender === 'female');
    
    femaleList.forEach(female => {
        smsSender.sendTo(female);
        emailSender.sendTo(female);
    })
}

封装条件语句

像有一些条件语句,可能存在很多与或非逻辑,如果直接写在函数里面,每次都需要重新理一遍,费时费力。把一堆条件语句封装在一个函数里面,不仅遵循单一职责原则,也将使得阅读更加方便。

// bad
const shouldIBuyThisPhone = (phone) => {
    const {price, year, brand} = phone;
    if (price > 5000 && year === new Date.getFullYear() && brand === 'huawei') {
        // 马上剁手
    }
}

// good
const isHuaweiFlagShipThisYear = ({ price, year, brand }) => {
    const HIGH_PRICE = 5000;
    return price > HIGH_PRICE && year === new Date.getFullYear() && brand === 'huawei'
}

const shouldIBuyThisPhone = (phone) => {
    if (isHuaweiFlagShipThisYear(phone)) {
        // 马上剁手
    }
}

高层函数不要依赖具体实现

在一些动作函数中,常见的一种情况是传一个flag参数,通过对标志变量的判断,做出不同的响应动作。

这样其实是不太好的,因为这会使这个动作函数内部去维护一些判断逻辑,如果flag参数比较多,函数内部的区分情况也会很多。

另外这里也涉及一种思想:具体的差异实现应该由使用者提供,而不是统一执行者去维护。

或者称之为依赖倒置原则高层模块(打印)不应该依赖于实现细节(某个人的喜好)。

比如,我现在有一台打印机🖨️,小A喜欢用单面黑白横向打印,小B喜欢用单面彩色竖向打印,小C喜欢用双面彩色横向打印等等等等。作为一台打印机,它需要去维护一个人员喜好列表吗?如果有一千个人使用它,那它就需要维护一千条数据。

它只是一台打印机!告诉它配置,然后打印,就完事了!打印机只专注于打印这件事本身。

// bad 需要判断标志变量,同时做出不同的相应动作
const print = (person) => {
    if (person === 'A') {
        device.print({ 
            page: 1, 
            color: 'gray', 
            orientation: 'landscape' 
            
        })
    }
    
    else if (person === 'B') {
        device.print({ 
            page: 1, 
            color: 'colorful', 
            orientation: 'vertical' 
        })
    }
    
    else if (person === 'C') {
        device.print({ 
            page: 2, 
            color: 'colorful' ,
            orientation: 'landscape'
        })
    }
    
    ......
    
}


// good
const print = (config) => {
    device.print(config)
}

写在最后

总结:

  • 函数传参越少越好,多了改为对象传入
  • 保持函数单一职责原则
  • 封装条件语句
  • 高层函数不要依赖具体实现

另外,帮大佬发个字节跳动今日头条校园招聘宣传,北广深均有,Inspire creativity, enrich life。欢迎各位小鲜肉报名加入 今日头条校招传送门

 

o
粉丝 0
博文 55
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

switch linux mint 20 apt repository to tsinghua' mirrors

edit file /etc/apt/sources.list.d/cat official-package-repositories.list lwk@qwfys:/etc/apt/sources.list.d$ lltotal 12drwxr-xr-x 2 root root 4096 Jul 5 20:01 ./drwxr-xr-x 7 ......

qwfys
35分钟前
7
0
面试系列之C++的对象布局【建议收藏】

我们都知道C++多态是通过虚函数表来实现的,那具体是什么样的大家清楚吗?开篇依旧提出来几个问题: 普通类对象是什么布局? 带虚函数的类对象是什么布局? 单继承下不含有覆盖函数的类对象是...

伊牙牙嘿哈哈
今天
17
0
OpenCV开发笔记(六十六):红胖子8分钟带你总结形态学操作-膨胀、腐蚀、开运算、闭运算、梯度、顶帽、黑帽(图文并茂+浅显易懂+程序源码)

若该文为原创文章,未经允许不得转载 原博主博客地址:https://blog.csdn.net/qq21497936 原博主博客导航:https://blog.csdn.net/qq21497936/article/details/102478062 本文章博客地址:h...

红模仿_红胖子
今天
12
0
base 64编码用于什么? - What is base 64 encoding used for?

问题: I've heard people talking about "base 64 encoding" here and there. 我听说有人在这里和那里谈论“base 64编码”。 What is it used for? 它是干什么用的? 解决方案: 参考一: ......

技术盛宴
今天
21
0
2020阿里巴巴官方最新Redis开发规范!

本文主要介绍在使用阿里云Redis的开发规范,从下面几个方面进行说明。 键值设计 命令使用 客户端使用 相关工具 通过本文的介绍可以减少使用Redis过程带来的问题。 一、键值设计 1、key名设计...

北柠Java
今天
26
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部