函数的参数越少越好

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

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

// 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代码简洁之道--函数的更多相关文章

  1. JavaScript 代码简洁之道

    摘要: 可以说是<Clean Code>的JS代码示例了,值得参考. 原文:JavaScript 代码简洁之道 作者:缪宇 Fundebug经授权转载,版权归原作者所有. 测试代码质量的唯 ...

  2. 《Clean Code》 代码简洁之道

    作者介绍 原文作者: Robert C. Martin, Object Mentor公司总裁,面向对象设计.模式.UML.敏捷方法学和极限编程领域的资深顾问,是<敏捷软件开发:原则.模式.与实践 ...

  3. js代码中碰到的函数

    第一个--->字符串的截取substring()方法 substring(a,b)--->[a,b)区间截取字符.下标从0开始.从a下标开始,截取到b下标的前一个字符.返回一个新的字符串 ...

  4. PHP 代码简洁之道 ( PHP Clean Code)

    https://laravel-china.org/topics/7774/the-conciseness-of-the-php-code-php-clean-code

  5. node源码详解(四) —— js代码如何调用C++的函数

    本作品采用知识共享署名 4.0 国际许可协议进行许可.转载保留声明头部与原文链接https://luzeshu.com/blog/nodesource4 本博客同步在https://cnodejs.o ...

  6. 关于js代码执行顺序

    上网查了一下关于这个方面的资料,大部分都是关于两个script标签中的js代码和变量以及函数提升方面的知识. 1.两个script标签 <script> alert("我是代码块 ...

  7. 几道JS代码手写面试题

    几道JS代码手写面试题   (1) 高阶段函数实现AOP(面向切面编程)    Function.prototype.before = function (beforefn) {        let ...

  8. 纯js分页代码(简洁实用)

    纯js写的分页代码. 复制代码代码如下: //每页显示字数 PageSize=5000; //分页模式 flag=2;//1:根据字数自动分页 2:根据[NextPage]分页 //默认页 start ...

  9. c#调用js,以及js调用C#里的函数, c#自己生成js代码,实现对web的控制

    using mshtml;using System;using System.Collections.Generic;using System.Linq;using System.Security.P ...

  10. Python: packer方式加密js代码之解密函数

    起源: 解析一网站时,发现其视频信息为一段js代码动态生成,而此段js代码,是用packer加密的. 其加密后的代码段如下: eval(function(p,a,c,k,e,d){e=function ...

随机推荐

  1. java DOM4J 读取XML

    最近学习Java,在处理XML文档的时候,查阅相关资料,发现了DOM4J这个jre库,相对C#的XML处理来说,功能还算是跟得上 下面展示一篇我自己写的一个XML读取测试 import java.ut ...

  2. loading 加载

    <script type="text/javascript" src="jquery-1.3.2.js"></script> <s ...

  3. javascript自执行函数为什么要把windows作为参数传进去

    http://segmentfault.com/q/1010000000311686 (function (window, $, undefined) { play=function(){ $(&qu ...

  4. CentOS6.5 yum安装桌面环境

    安装原因 安装centos6.5时选择了minimal CentOS最小化安装方式 需要使用浏览器拨号连接内网 安装过程 通过yum grouplist查询在 group 软件包中,Desktop.D ...

  5. MSSQL事务隔离级别详解(SET TRANSACTION ISOLATION LEVEL)

    控制到 Transact-SQL 的连接发出的 SQL Server 语句的锁定行为和行版本控制行为. TRANSACT-SQL 语法约定 语法   -- Syntax for SQL Server ...

  6. ECMAScript 原始类型

    ---恢复内容开始--- ECMAScript 有 5 种原始类型(primitive type),即 Undefined.Null.Boolean.Number 和 String. 1.typeof ...

  7. 找不到main

    用eclipse写代码的时候,写了一个简单的程序,编译的时候突然出现“错误: 在类 com.test.demo 中找不到 main 方法, 请将 main 方法定义为: public static v ...

  8. WINFROM窗体实现圆角

    首先我们先看看效果图 接下来我们看看怎么实现 先把窗体的FromBorderStyle属性改成None. 接下来登录窗体代码代码: 添加一个窗体Paint事件,引用using System.Drawi ...

  9. oci7编译报’olog’等未定义的引用问题

    前一天在测试一个数据导出的时候,发现oci7编译的时候报了一大堆类似"’oparse’未定义的引用问题",这通常是因为找不到实现库的原因,但是oci相关的库又都是存在的,用oci7 ...

  10. poj 3368 rmq ***

    题意:给出n个数和Q个询问(l,r),对于每个询问求出(l,r)之间连续出现次数最多的次数. #include<cstdio> #include<iostream> #incl ...