[译]编写优雅的JavaScript代码 - 最佳实践

时间  2019-12-04
标签 编写 优雅 javascript 代码 最佳 实践 栏目 JavaScript 繁體版
原文   原文链接

[译]编写优雅的JavaScript代码 - 最佳实践

[原文]： devinduct.com/blogpost/22…javascript

有没有似曾相识

若是你对于代码，除了关注是否能准确的执行业务逻辑，还关心代码自己是怎么写的，是否易读，那么你应该会关注如何写出干净优雅的代码。做为专业的工程师，除了保证本身的代码没有bug，能正确的完成业务逻辑，还应该保证几个月后的本身，或者其余工程师，也可以维护本身的代码。你写的每一段代码，一般状况下，都不会是 一次性 工做，一般伴随着后续的不断迭代。若是代码不够优雅，那么未来维护这段代码的人(甚至你本身)，都将感到很是痛苦。祈祷吧，未来面对这些糟糕代码的人，不是你本身，而是别人 😓。java

OK，咱们先来简单定义下，什么是 干净优雅 的代码：干净优雅的代码，应该是自解释的，容易看懂的，而且很容易修改或者扩展一些功能 。面试

如今，静下来回忆一下，有多少次，当你接手前辈留下来的糟糕代码而懵逼时，内心默默的说过 "我*"的：编程

  • "我*，那是啥玩意儿"
  • "我*，这段代码是干啥的”
  • "我*，这个变量又是干啥的"

[译注]： 我*，做者真大神啊，上面描绘的太真实了。有木有一种 Big brother is watching you 的赶脚。编程语言

嗯，下面这个图片完美的展现了这种情形：函数

引用 Robert C. Martin 的名言来讲明这种状况：post

丑陋的代码也能实现功能。可是不够优雅的代码，每每会让整个开发团队都跪在地上哭泣。测试

在这篇文章里，我主要讲下载 JavaScript里怎么书写干净优雅的代码，可是对于其余编程语言，道理也是相似的。ui

JavaScript优雅代码的最佳实践

1. 强类型校验

使用 === 而不是 == 。this

[译注] ：这一条应该是普遍接受了吧，竟然还有人面试会问 == 类型转换的问题……

// If not handled properly, it can dramatically affect the program logic. It's like, you expect to go left, but for some reason, you go right.
0 == false // true
0 === false // false
2 == "2" // true
2 === "2" // false

// example
const value = "500";
if (value === 500) {
  console.log(value);
  // it will not be reached
}

if (value === "500") {
  console.log(value);
  // it will be reached
}
复制代码

2. 变量命名

变量、字段命名，应该包含它所对应的真实含义。这样更容易在代码里搜索，而且其余人看到这些变量，也更容易理解。

错误的示范

let daysSLV = 10;
let y = new Date().getFullYear();

let ok;
if (user.age > 30) {
  ok = true;
}
复制代码

正确的示范

const MAX_AGE = 30;
let daysSinceLastVisit = 10;
let currentYear = new Date().getFullYear();

...

const isUserOlderThanAllowed = user.age > MAX_AGE;
复制代码

不要在变量名中加入没必要要的单词。

错误的示范

let nameValue;
let theProduct;
复制代码

正确的示范

let name;
let product;
复制代码

不要强迫开发者去记住变量名的上下文。

错误的示范

const users = ["John", "Marco", "Peter"];
users.forEach(u => {
  doSomething();
  doSomethingElse();
  // ...
  // ...
  // ...
  // ...
  // Here we have the WTF situation: WTF is `u` for?
  register(u);
});
复制代码

正确的示范

const users = ["John", "Marco", "Peter"];
users.forEach(user => {
  doSomething();
  doSomethingElse();
  // ...
  // ...
  // ...
  // ...
  register(user);
});
复制代码

不要在变量名中添加多余的上下文信息。

错误的示范

const user = {
  userName: "John",
  userSurname: "Doe",
  userAge: "28"
};

...

user.userName;
复制代码

正确的示范

const user = {
  name: "John",
  surname: "Doe",
  age: "28"
};

...

user.name;
复制代码

3. 函数相关

尽可能使用足够长的可以描述函数功能的命名。一般函数都会执行一个明确的动做或意图，那么函数名就应该是可以描述这个意图一个动词或者表达语句，包含函数的参数命名也应该能清晰的表达具体参数的含义。

错误的示范

function notif(user) {
  // implementation
}
复制代码

正确的示范

function notifyUser(emailAddress) {
  // implementation
}
复制代码

避免函数有太多的形参。比较理想的状况下，一个函数的参数应该 <=2个 。函数的参数越少，越容易测试。

错误的示范

function getUsers(fields, fromDate, toDate) {
  // implementation
}
复制代码

正确的示范

function getUsers({ fields, fromDate, toDate }) {
  // implementation
}

getUsers({
  fields: ['name', 'surname', 'email'],
  fromDate: '2019-01-01',
  toDate: '2019-01-18'
});
复制代码

若是函数的某个参数有默认值，那么应该使用新的参数默认值语法，而不是在函数里使用 || 来判断。

错误的示范

function createShape(type) {
  const shapeType = type || "cube";
  // ...
}
复制代码

正确的示范

function createShape(type = "cube") {
  // ...
}
复制代码

一个函数应该作一件事情。避免在一个函数里，实现多个动做。

错误的示范

function notifyUsers(users) {
  users.forEach(user => {
    const userRecord = database.lookup(user);
    if (userRecord.isVerified()) {
      notify(user);
    }
  });
}
复制代码

正确的示范

function notifyVerifiedUsers(users) {
  users.filter(isUserVerified).forEach(notify);
}

function isUserVerified(user) {
  const userRecord = database.lookup(user);
  return userRecord.isVerified();
}
复制代码

使用 Object.assign 来给对象设置默认值。

错误的示范

const shapeConfig = {
  type: "cube",
  width: 200,
  height: null
};

function createShape(config) {
  config.type = config.type || "cube";
  config.width = config.width || 250;
  config.height = config.width || 250;
}

createShape(shapeConfig);
复制代码

正确的示范

const shapeConfig = {
  type: "cube",
  width: 200
  // Exclude the 'height' key
};

function createShape(config) {
  config = Object.assign(
    {
      type: "cube",
      width: 250,
      height: 250
    },
    config
  );

  ...
}

createShape(shapeConfig);
复制代码

不要在函数参数中，包括某些标记参数，一般这意味着你的函数实现了过多的逻辑。

错误的示范

function createFile(name, isPublic) {
  if (isPublic) {
    fs.create(`./public/${name}`);
  } else {
    fs.create(name);
  }
}
复制代码

正确的示范

function createFile(name) {
  fs.create(name);
}

function createPublicFile(name) {
  createFile(`./public/${name}`);
}
复制代码

不要污染全局变量、函数、原生对象的 prototype。若是你须要扩展一个原生提供的对象，那么应该使用 ES新的 类和继承语法来创造新的对象，而 不是 去修改原生对象的prototype 。

错误的示范

Array.prototype.myFunc = function myFunc() {
  // implementation
};
复制代码

正确的示范

class SuperArray extends Array {
  myFunc() {
    // implementation
  }
}
复制代码

4. 条件分支

不要用函数来实现 否认 的判断。好比判断用户是否合法，应该提供函数 isUserValid() ，而 不是 实现函数 isUserNotValid() 。

错误的示范

function isUserNotBlocked(user) {
  // implementation
}

if (!isUserNotBlocked(user)) {
  // implementation
}
复制代码

正确的示范

function isUserBlocked(user) {
  // implementation
}

if (isUserBlocked(user)) {
  // implementation
}
复制代码

在你明确知道一个变量类型是 boolean 的状况下，条件判断使用 简写。这确实是显而易见的，前提是你能明确这个变量是boolean类型，而不是 null 或者 undefined 。

错误的示范

if (isValid === true) {
  // do something...
}

if (isValid === false) {
  // do something...
}
复制代码

正确的示范

if (isValid) {
  // do something...
}

if (!isValid) {
  // do something...
}
复制代码

在可能的状况下，尽可能 避免 使用条件分支。优先使用 多态 和 继承 来实现代替条件分支。

错误的示范

class Car {
  // ...
  getMaximumSpeed() {
    switch (this.type) {
      case "Ford":
        return this.someFactor() + this.anotherFactor();
      case "Mazda":
        return this.someFactor();
      case "McLaren":
        return this.someFactor() - this.anotherFactor();
    }
  }
}
复制代码

正确的示范

class Car {
  // ...
}

class Ford extends Car {
  // ...
  getMaximumSpeed() {
    return this.someFactor() + this.anotherFactor();
  }
}

class Mazda extends Car {
  // ...
  getMaximumSpeed() {
    return this.someFactor();
  }
}

class McLaren extends Car {
  // ...
  getMaximumSpeed() {
    return this.someFactor() - this.anotherFactor();
  }
}
复制代码

5. ES的类

在ES里，类是新规范引入的语法糖。类的实现和之前 ES5 里使用 prototype 的实现彻底同样，只是它看上去更简洁，你应该优先使用新的类的语法。

错误的示范

const Person = function(name) {
  if (!(this instanceof Person)) {
    throw new Error("Instantiate Person with `new` keyword");
  }

  this.name = name;
};

Person.prototype.sayHello = function sayHello() { /**/ };

const Student = function(name, school) {
  if (!(this instanceof Student)) {
    throw new Error("Instantiate Student with `new` keyword");
  }

  Person.call(this, name);
  this.school = school;
};

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
Student.prototype.printSchoolName = function printSchoolName() { /**/ };
复制代码

正确的示范

class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    /* ... */
  }
}

class Student extends Person {
  constructor(name, school) {
    super(name);
    this.school = school;
  }

  printSchoolName() {
    /* ... */
  }
}
复制代码

使用方法的 链式调用。不少开源的JS库，都引入了函数的链式调用，好比 jQuery 和 Lodash 。链式调用会让代码更加简洁。在 class 的实现里，只须要简单的在每一个方法最后都返回 this，就能实现链式调用了。

错误的示范

class Person {
  constructor(name) {
    this.name = name;
  }

  setSurname(surname) {
    this.surname = surname;
  }

  setAge(age) {
    this.age = age;
  }

  save() {
    console.log(this.name, this.surname, this.age);
  }
}

const person = new Person("John");
person.setSurname("Doe");
person.setAge(29);
person.save();
复制代码

正确的示范

class Person {
  constructor(name) {
    this.name = name;
  }

  setSurname(surname) {
    this.surname = surname;
    // Return this for chaining
    return this;
  }

  setAge(age) {
    this.age = age;
    // Return this for chaining
    return this;
  }

  save() {
    console.log(this.name, this.surname, this.age);
    // Return this for chaining
    return this;
  }
}

const person = new Person("John")
    .setSurname("Doe")
    .setAge(29)
    .save();
复制代码

6. 避免冗余代码

一般来说，咱们应该避免重复写相同的代码，不该该有未被用到的函数或者死代码(永远也不会执行到的代码)的存在。

咱们太容易就会写出重复冗余的代码。举个栗子，有两个组件，他们大部分的逻辑都同样，可是可能因为一小部分差别，或者临近交付时间，致使你选择了把代码拷贝了一份来修改。在这种场景下，要去掉冗余的代码，只能进一步提升组建的抽象程度。

至于死代码，正如它名字所表明的含义。这些代码的存在，多是在你开发中的某个阶段，你发现某段代码彻底用不上了，因而就把它们放在那儿，而没有删除掉。你应该在代码里找出这样的代码，而且删掉这些永远不会执行的函数或者代码块。我能给你的唯一建议，就是当你决定某段代码不再用时，就当即删掉它，不然晚些时候，可能你本身也会忘记这些代码是干神马的。

当你面对这些死代码时，可能会像下面这张图所描绘的同样：

结论

上面这些建议，只是一部分能提高你代码的实践。我在这里列出这些点，是工程师常常会违背的。他们或许尝试遵照这些实践，可是因为各类缘由，有的时候也没能作到。或许当咱们在项目的初始阶段，确实很好的遵照了这些实践，保持了干净优雅的代码，可是随着项目上线时间的临近，不少准则都被忽略了，尽管咱们会在忽略的地方备注上 TODO 或者 REFACTOR (但正如你所知道的，一般 later也就意味着never)。

OK，就这样吧，但愿咱们都可以努力践行这些最佳实践，写出 干净优雅 的代码 ☺️

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程