JS代码整洁之道个人感悟

1.大量使用let const代替var声明

在前端项目开发中，如果多人同时进行开发，很有可能会把代码写的一团糟，再加上js中的var没有块作用域，一般的变量都定义到了全局当中，所以很容易造成复写，如果你用let的话，会避免很多不必要的BUG出现。

再说const，再引用一些不变的数据的时候，最好使用const，比如引入一些模块，或者设定一些常量。注意一点，const只能限定普通类型的数据，引用类型只是会限定指针，（在JS中应该称引用，JS中没有指针的概念）

 

2.避免暗示

显式优于隐式。

var locations = ['Austin', 'New York', 'San Francisco'];
locations.forEach((l) => {
  doStuff();
  doSomeOtherStuff();
  ...
  ...
  ...
  // 等等，`l` 又是什么？
  dispatch(l);
});

 好

var locations = ['Austin', 'New York', 'San Francisco'];
locations.forEach((location) => {
  doStuff();
  doSomeOtherStuff();
  ...
  ...
  ...
  dispatch(location);
});

起变量名最好要一下让人能读懂，在任何地方也是一样的。

3.用 Object.assign 设置默认对象，避免副作用

在操作对象的时候，如果不是想更改对象，最好在函数中拷贝一下形参，尽管Object.assign是浅拷贝吧，但是也满足大多数需要了，要不非常容易改变原对象。PS：拷贝用...运算符也是很方便的，可以浅拷贝对象，数组。

 

4.不要写入全局

JS全局污染是一个很严重的问题，所以尽量去少放东西到全局作用域。例如：你想扩展 JavaScript 的原生 Array，使之拥有一个 diff 方法，用来展示两数据之前的区别，这时你会怎么做？你可以给 Array.prototype 添加一个新的函数，但它可能会与其它想做同样事情的库发生冲突。如果那个库实现的 diff 只是比如数组中第一个元素和最后一个元素的异同会发生什么事情呢？这就是为什么最好是使用 ES6 的类语法从全局的 Array 派生一个类来做这件事。

好的办法，用ES6的类扩展一个新的Array。

class SuperArray extends Array {
  constructor(...args) {
    super(...args);
  }

  diff(comparisonArray) {
    var values = [];
    var hash = {};

    for (var i of comparisonArray) {
      hash[i] = true;
    }

    for (var i of this) {
      if (!hash[i]) {
        values.push(i);
      }
    }

    return values;
  }
}

5.使用方法链

promise的链式调用真的很方便，自己平时使用也可以去构造，只需要在对象中返回this即可。

class Car {
  constructor() {
    this.make = 'Honda';
    this.model = 'Accord';
    this.color = 'white';
  }

  setMake(make) {
    this.name = name;
    // NOTE: 返回 this 以实现链式调用
    return this;
  }

  setModel(model) {
    this.model = model;
    // NOTE: 返回 this 以实现链式调用
    return this;
  }

  setColor(color) {
    this.color = color;
    // NOTE: 返回 this 以实现链式调用
    return this;
  }

  save() {
    console.log(this.make, this.model, this.color);
  }
}

let car = new Car()
  .setColor('pink')
  .setMake('Ford')
  .setModel('F-150')
  .save();

在平时的项目中，不可或缺的就是与后端对接口，然后展示数据。在这过程中可以大量进行优化代码，使之更简洁，一模了然。

比如说，从接口的获取中，使用流行的promise进行链式调用代替回调函数，

不好:

require('request').get('https://en.wikipedia.org/wiki/Robert_Cecil_Martin', function(err, response) {
  if (err) {
    console.error(err);
  }
  else {
    require('fs').writeFile('article.html', response.body, function(err) {
      if (err) {
        console.error(err);
      } else {
        console.log('File written');
      }
    })
  }
})

好

require('request-promise').get('https://en.wikipedia.org/wiki/Robert_Cecil_Martin')
  .then(function(response) {
    return require('fs-promise').writeFile('article.html', response);
  })
  .then(function() {
    console.log('File written');
  })
  .catch(function(err) {
    console.error(err);
  })

使用ES7的async和await的话，会使代码更简洁，更一目了然，让别人知道你在干嘛。

更好

async function getCleanCodeArticle() {
  try {
    var request = await require('request-promise')
    var response = await request.get('https://en.wikipedia.org/wiki/Robert_Cecil_Martin');
    var fileHandle = await require('fs-promise');

    await fileHandle.writeFile('article.html', response);
    console.log('File written');
  } catch(err) {
      console.log(err);
    }
  }

再加上async和await的错误是可以让try/catch捕获的，这简直就是异步终极解决方法！！！

 

本人现为大四实习生一枚，理解知识较为浅薄，如果有错误，非常欢迎各位前辈进行指正！感激不尽！