前言
看过许多重构,Clean Code 相关的书籍、文章,可是许多都不大适用于 JavaScript。遂有本文 Clean Code for JavaScript。
正文
-
变量
- 使用有准确意义的变量名
- 在变量的值不会改变时使用 ES6 的
const
- 对同一类型的变量使用相同的词汇
- 不要添加没必要的上下文
// 不好的 var Car = { carMake: 'Honda', carModel: 'Accord', carColor: 'Blue' }; // 好的 make: 'Honda', model: 'Accord', color: 'Blue' };
-
函数
- 一个函数只做一件事
- 函数名称要说明它做的事
- 删除重复代码
- 短路语法比条件语句更清晰,默认参数胜于短路表达式
// 条件语句 function createMicrobrewery(name) { var breweryName; if (name) { breweryName = name; } else { breweryName = 'Hipster Brew Co.'; } } // 短路表达式 function createMicrobrewery(name) { var breweryName = name || 'Hipster Brew Co.' } // 默认参数 function createMicrobrewery(name = 'Hipster Brew Co.') { var breweryName = name; }
- 用 Object.assign 设置默认对象
var 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; } // 好的 function createMenu(config) { config = Object.assign({ title: 'Foo', body: 'Bar', buttonText: 'Baz', cancellable: true }, config); }
- 避免副作用(避免修改入参)
- 不要写入全局函数
- 喜欢上命令式编程之上的函数式编程(JavaScript 不是函数式编程语言,不过它仍然有一点函数式的意味,函数式语言更整洁也更容易测试)
- 封装条件
// 不好 if (fsm.state === 'fetching' && isEmpty(listNode)) { /// ... } // 好的 function shouldShowSpinner(fsm, listNode) { return fsm.state === 'fetching' && isEmpty(listNode); } if (shouldShowSpinner(fsmInstance, listNodeInstance)) { // ... }
- 避免否定条件
- 删除不用的代码
-
并发
- 使用 Promise 而不是回调(回调会导致过多的嵌套)
- async/await 比 Promise 整洁
-
错误处理
- 不要忽略捕捉到的错误
- 不用忽略被拒绝的 Promise
-
格式
- 使用一致的大小写
- 函数调用者和被调用者应该尽可能放在一起
结尾
未完待续。。。