如何写好JavaScript函数？5分钟学习
点击上方 "程序员小乐"关注, 星标或置顶一起成长
每天凌晨00点00分, 第一时间与你相约
每日英文
Ability is what you're capable of doing. Motivation determines what you do. Attitude determines how well you do it.
能力是指你能做什么；动力决定你做什么；态度决定你能做多好。
每日掏心话
时间是怎样一种东西。它能改变一切、带走一切、更可留下一切。
来自：xcheng | 责编：乐乐
链接：juejin.im/post/5ed201cbe51d45786e496629
往日回顾：知乎热议：28岁郭宇期权过亿，彪悍从字节退休，旅居日本开温泉酒店
正文
在写JavaScript代码时，写好函数很关键，本文通过9个方面详细的讨论了如何写好函数，写好函数，就会让你的代码读起来清晰得多，值得学习一下。
系统由程序、子程序和函数组成。写好函数，就会让你的代码读起来清晰得多。接下来讨论如何写好函数
1、函数要短小，一个函数只做一件事
如果函数做了较多的事情，它就难以组合、测试和推测。同时让函数只做一件事情的时候，它们就很容易重构。
// Bad
function showStudent(ssn) {
const student = db.get(ssn);
if (student !== null) {
document.querySelector(`#${elementId}`).innerHTML =
`${student.ssn},${student.firstName},${student.lastName}`;
} else {
thrownew;
Error("student not found");
}
}
showStudent("444-44-4444");
// Good
function findStudent(db, id) {
const student = db.get(id);
if (student === null) {
thrownew;
Error("student not found");
}
}
function getStudentInfo(student) {
return;
`${student.ssn},${student.firstName},${student.lastName}`;
}
function showStudentInfo(elementId, info) {
document.querySelector(elementId).innerHTML = info;
}
function showStudent(ssn) {
const student = findStudent(ssn);
let studentInfo = getStudentInfo(student);
showStudentInfo(elementId, studentInfo);
}
只是做了些许的改进，但已开始展现出很多的优势：undefined
2、每个函数一个抽象层级
函数中混杂不同的抽象层级，往往让人迷惑。读者可能无法判断某个表达式是基础概念还是细节。更恶劣的是，就像破损的窗户，一旦细节和基础概念混杂，更多的细节就会在函数中纠结起来。理解抽象层次请参考：抽象层次
// Bad
function parseBetterJSAlternative(code) {
let REGEXES = [
// ...
];
let statements = code.split(" ");
let tokens;
REGEXES.forEach((REGEX) => {
statements.forEach((statement) => {
// ...
});
});
let ast;
tokens.forEach((token) => {
// lex...
});
ast.forEach((node) => {
// parse...
});
}
// Good
function tokenize(code) {
let REGEXES = [
// ...
];
let statements = code.split(" ");
let tokens;
REGEXES.forEach((REGEX) => {
statements.forEach((statement) => {
// ...
});
});
return;
tokens;
}
function lexer(tokens) {
let ast;
tokens.forEach((token) => {
// lex...
});
return;
ast;
}
function parseBetterJSAlternative(code) {
let tokens = tokenize(code);
let ast = lexer(tokens);
ast.forEach((node) => {
// parse...
});
}
3、使用描述性的名称
函数越短小，功能越集中，就越便于取个好名字。长而具有描述性的名称，要比短而令人费解的名称好。长而具有描述性的名称，要比描述性的长注释好。使用某种命名约定，让函数名称中的多个单词容易阅读，然后使用这些单词给函数取个能说明其功能的名称。
// Bad
function dateAdd(date, month) {
// ...
}
let date = new Date();
// 很难从函数名了解到加了什么
dateAdd(date, 1);
function write(name) {
// ...
}
function assertEqual(a, b) {
// ...
}
// Good
function dateAddMonth(date, month) {
// ...
}
let date = new Date();
dateAddMonth(date, 1);
// 告诉我们 name 是一个 field
function writeField(name) {
// ...
}
// 能更好的解释参数的顺序和意图
function assertExpectedEqualActual(expected, actual) {
// ...
}
4、函数参数
最理想的参数数量是零，其次是一（单参数函数），再次是二（双参数函数），应尽量避免三（三参数函数）。有足够的理由才能使用三个以上参数。如果函数需要三个以上参数，就说明其中一些参数应该放在一个对象中了。参数越多，函数越不容易理解，同时编写能确保参数的各种组合运行正常的测试用例越困难。
5、避免副作用
如果一个函数不是获取一个输入的值并返回其它值，它就有可能产生副作用。这些副作用可能是写入文件、修改一些全局变量、屏幕打印或者日志记录、查询HTML文档、浏览器的cookie或访问数据库。无论哪种情况，都具有破坏性，会导致古怪的时序性耦合及顺序依赖。现在你确实需要在程序中有副作用。像前面提到的那样，你可能需要写入文件。现在你需要做的事情是搞清楚在哪里集中完成这件事情。不要使用几个函数或类来完成写入某个特定文件的工作。采用一个，就一个服务来完成。
// Bad
// 下面的函数使用了全局变量。
// 如果有另一个函数在使用 name，现在可能会因为 name 变成了数组而不能正常运行。
var name = "Ryan McDermott";
function splitIntoFirstAndLastName() {
name = name.split(" ");
}
splitIntoFirstAndLastName();
console.log(name);
// ['Ryan', 'McDermott'];
// Good
function splitIntoFirstAndLastName(name) {
return;
name.split(" ");
}
var name = "Ryan McDermott";
var newName = splitIntoFirstAndLastName(name);
console.log(name);
// 'Ryan McDermott';
console.log(newName);
// ['Ryan', 'McDermott'];
6、删除重复代码
重复代码意味着你要修改某些逻辑的时候要修改不止一个地方的代码。
// Bad
function showDeveloperList(developers) {
developers.forEach((developers) => {
var expectedSalary = developer.calculateExpectedSalary();
var experience = developer.getExperience();
var githubLink = developer.getGithubLink();
var data = {
expectedSalary: expectedSalary,
experience: experience,
githubLink: githubLink,
};
render(data);
});
}
function showManagerList(managers) {
managers.forEach((manager) => {
var expectedSalary = manager.calculateExpectedSalary();
var experience = manager.getExperience();
var portfolio = manager.getMBAProjects();
var data = {
expectedSalary: expectedSalary,
experience: experience,
portfolio: portfolio,
};
render(data);
});
}
// Good
function showList(employees) {
employees.forEach((employee) => {
var expectedSalary = employee.calculateExpectedSalary();
var experience = employee.getExperience();
var portfolio;
if (employee.type === "manager") {
portfolio = employee.getMBAProjects();
} else {
portfolio = employee.getGithubLink();
}
var data = {
expectedSalary: expectedSalary,
experience: experience,
portfolio: portfolio,
};
render(data);
});
}
7、使用更优雅写法
1、使用默认参数代替短路表达式
// Bad
function
writeForumComment(subject, body) {
subject = subject || 'No Subject';
body = body || 'No text';
}
// Good
function writeForumComment(subject = 'No subject', body = 'No text') {
}
2、用 Object.assign 设置默认对象
// Bad
const menuConfig = {
title: null,
body: "Bar",
buttonText: null,
cancellable: true,
};
function createMenu(config) {
config.title = config.title || "Foo";
config.body = config.body || "Bar";
config.buttonText = config.buttonText || "Baz";
config.cancellable =
config.cancellable === undefined ? config.cancellable : true;
}
createMenu(menuConfig);
// Good
const menuConfig = {
title: "Order",
// User did not include 'body' key
buttonText: "Send",
cancellable: true,
};
function createMenu(config) {
config = Object.assign(
{
title: "Foo",
body: "Bar",
buttonText: "Baz",
cancellable: true,
},
config
);
// 现在 config 等于: {title: "Foo", body: "Bar", buttonText: "Baz", cancellable: true}
// ...
}
createMenu(menuConfig);
3、喜欢上命令式编程之上的函数式编程
// Bad
const programmerOutput = [
{
name: "Uncle Bobby",
linesOfCode: 500,
},
{
name: "Suzie Q",
linesOfCode: 1500,
},
{
name: "Jimmy Gosling",
linesOfCode: 150,
},
{
name: "Gracie Hopper",
linesOfCode: 1000,
},
];
var totalOutput = 0;
for (var i = 0; i < programmerOutput.length; i++) {
totalOutput += programmerOutput[i].linesOfCode;
}
// Good
const programmerOutput = [
{
name: "Uncle Bobby",
linesOfCode: 500,
},
{
name: "Suzie Q",
linesOfCode: 1500,
},
{
name: "Jimmy Gosling",
linesOfCode: 150,
},
{
name: "Gracie Hopper",
linesOfCode: 1000,
},
];
var totalOutput = programmerOutput
.map((programmer) => programmer.linesOfCode)
.reduce((acc, linesOfCode) => acc + linesOfCode, 0);
8、不要把标记用作函数参数
标记告诉你的用户这个函数做的事情不止一件。但是函数应该只做一件事。如果你的函数中会根据某个布尔参数产生不同的分支，那就拆分这个函数。
// Bad
function createFile(name, temp) {
if (temp) {
fs.create("./temp/" + name);
} else {
fs.create(name);
}
}
// Good
function createTempFile(name) {
fs.create("./temp/" + name);
}
function createFile(name) {
fs.create(name);
}
9、对函数中条件处理
标记告诉你的用户这个函数做的事情不止一件。但是函数应该只做一件事。如果你的函数中会根据某个布尔参数产生不同的分支，那就拆分这个函数。
1、封装条件
// Bad
if (fsm.state === "fetching" && isEmpty(listNode)) {
/// ...
}
// Good
function shouldShowSpinner(fsm, listNode) {
return;
fsm.state === "fetching" && isEmpty(listNode);
}
if (shouldShowSpinner(fsmInstance, listNodeInstance)) {
// ...
}
2、避免否定条件
// Bad
function isDOMNodeNotPresent(node) {
// ...
}
if (!isDOMNodeNotPresent(node)) {
// ...
}
// Good
function isDOMNodePresent(node) {
// ...
}
if (isDOMNodePresent(node)) {
// ...
}
欢迎在留言区留下你的观点，一起讨论提高。如果今天的文章让你有新的启发，学习能力的提升上有新的认识，欢迎转发分享给更多人。
欢迎各位读者加入订阅号程序员小乐技术群，在后台回复“加群”或者“学习”即可。
猜你还想看
阿里、腾讯、百度、华为、京东最新面试题汇集
Mybatis基础知识点：trim标签的使用
最受欢迎Java数据库访问框架(DAO层)
为什么老外不愿意用 MyBatis？
关注订阅号「程序员小乐」，收看更多精彩内容
嘿，你在看吗？