Clean Code for JavaScript

前言

看过许多重构，Clean Code 相关的书籍、文章，可是许多都不大适用于 JavaScript。遂有本文 Clean Code for JavaScript。

正文

1. 变量

   • 使用有准确意义的变量名
   • 在变量的值不会改变时使用 ES6 的 const
   • 对同一类型的变量使用相同的词汇
   • 不要添加没必要的上下文

   // 不好的
   var Car = {
     carMake: 'Honda',
     carModel: 'Accord',
     carColor: 'Blue'
   };
   // 好的
     make: 'Honda',
     model: 'Accord',
     color: 'Blue'
   };
   

2. 函数

   • 一个函数只做一件事
   • 函数名称要说明它做的事
   • 删除重复代码
   • 短路语法比条件语句更清晰，默认参数胜于短路表达式

   //  条件语句
   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)) {
     // ...
   }
   

   • 避免否定条件
   • 删除不用的代码

3. 并发

   • 使用 Promise 而不是回调（回调会导致过多的嵌套）
   • async/await 比 Promise 整洁

4. 错误处理

   • 不要忽略捕捉到的错误
   • 不用忽略被拒绝的 Promise

5. 格式

   • 使用一致的大小写
   • 函数调用者和被调用者应该尽可能放在一起

结尾

未完待续。。。