JS代码简洁之道--函数
函数的参数越少越好
有一个准则是:如果你的函数参数超过两个,就应该改为对象传入。
这样做是合理的,因为当函数参数超过两个时,参数顺序开始变得难以记忆,而且容易出现一种很尴尬的情况:比如我只需要传入第三个参数,因为其自身顺序的原因,不得不补齐前两个根本用不上的参数,以让它顺利排在第三位。
// 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参数比较多,函数内部的区分情况也会很多。
另外这里也涉及一种思想:具体的差异实现应该由使用者提供,而不是统一执行者去维护。
或者称之为依赖倒置原则:高层模块(打印)不应该依赖于实现细节(某个人的喜好)。
比如,我现在有一台打印机
JS代码简洁之道--函数的更多相关文章
- JavaScript 代码简洁之道
摘要: 可以说是<Clean Code>的JS代码示例了,值得参考. 原文:JavaScript 代码简洁之道 作者:缪宇 Fundebug经授权转载,版权归原作者所有. 测试代码质量的唯 ...
- 《Clean Code》 代码简洁之道
作者介绍 原文作者: Robert C. Martin, Object Mentor公司总裁,面向对象设计.模式.UML.敏捷方法学和极限编程领域的资深顾问,是<敏捷软件开发:原则.模式.与实践 ...
- JAVA基础之代码简洁之道
引言 普通的工程师堆砌代码,优秀的工程师优雅代码,卓越的工程师简化代码.如何写出优雅整洁易懂的代码是一门学问,也是软件工程实践里重要的一环.--来自网络 背景 软件质量,不但依赖于架构及项目管理,更与 ...
- js代码中碰到的函数
第一个--->字符串的截取substring()方法 substring(a,b)--->[a,b)区间截取字符.下标从0开始.从a下标开始,截取到b下标的前一个字符.返回一个新的字符串 ...
- PHP 代码简洁之道 ( PHP Clean Code)
https://laravel-china.org/topics/7774/the-conciseness-of-the-php-code-php-clean-code
- node源码详解(四) —— js代码如何调用C++的函数
本作品采用知识共享署名 4.0 国际许可协议进行许可.转载保留声明头部与原文链接https://luzeshu.com/blog/nodesource4 本博客同步在https://cnodejs.o ...
- 关于js代码执行顺序
上网查了一下关于这个方面的资料,大部分都是关于两个script标签中的js代码和变量以及函数提升方面的知识. 1.两个script标签 <script> alert("我是代码块 ...
- 几道JS代码手写面试题
几道JS代码手写面试题 (1) 高阶段函数实现AOP(面向切面编程) Function.prototype.before = function (beforefn) { let ...
- 纯js分页代码(简洁实用)
纯js写的分页代码. 复制代码代码如下: //每页显示字数 PageSize=5000; //分页模式 flag=2;//1:根据字数自动分页 2:根据[NextPage]分页 //默认页 start ...
随机推荐
- 使用turtle库画太极图
from turtle import * pensize(3) penup() pencolor("black") reset() speed(10) pendown() circ ...
- (Java实现) 洛谷 P1036 选数
输入输出格式 输入格式: 键盘输入,格式为: n,k x1,x2,x3-xn 输出格式: 屏幕输出,格式为: 11个整数(满足条件的种数). 输入输出样例 输入样例#1: 4 3 3 7 12 19 ...
- Java实现蓝桥杯历届试题填字母游戏
题目描述 小明经常玩 LOL 游戏上瘾,一次他想挑战K大师,不料K大师说: "我们先来玩个空格填字母的游戏,要是你不能赢我,就再别玩LOL了". K大师在纸上画了一行n个格子,要小 ...
- PAT D进制的A+B
输入两个非负 10 进制整数 A 和 B ( <=230-1 ) ,输出 A+B 的 D (1<D<=10) 进制数. 输入格式: 输入在一行中依次给出 3 个整数 A.B 和 D. ...
- 温故知新-Mysql索引结构&页&聚集索引&非聚集索
文章目录 摘要 索引 索引概述 索引优势劣势 索引结构 BTREE 结构 B+TREE 结构 页 索引分类 索引语法 索引设计原则 聚触索引 & 非聚触索引 你的鼓励也是我创作的动力 Post ...
- Java基础?看完以后再也不惧怕面试了
前言 这篇文章主要是Java基础部分,主要分为3个部分:Java集合.Java多线.JVM:这些东西帮助我面试成功率提升了很多.后面还有中间件Spring.Redis.RocketMQ等等吧,祝愿大家 ...
- Jmeter(八) - 从入门到精通 - JMeter配置元件(详解教程)
1.简介 JMeter配置元件可以用来初始化默认值和变量,读取文件数据,设置公共请求参数,赋予变量值等,以便后续采样器使用.将在其作用域的初始化阶段处理.配置元件(Config Element)提供对 ...
- ping外网:unknown host www.baidu.comc排查
ping 百度出现:(ping www.baidu.com) "ping: unknown host www.baidu.com" 1.ping 网关确定是否连接上路由器,并 ...
- 让LED程序在片外SDRAM中运行
让LED程序在片外SDRAM中运行 一.引子 在前一篇文章中,我们已经成功点亮过LED了,为什么还要再重复一次呢? 我们已经知道,Mini2440开发板有两种启动模式:从NorFlash启动和从Nan ...
- LR脚本信息函数-lr_get_vuser_ip
lr_get_vuser_ip 返回Vuser的IP地址. char * lr_get_vuser_ip(); lr_get_vuser_ip函数返回Vuser的IP地址. 当执行IP欺骗时,每个Vu ...