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

最新推荐文章于 2022-02-25 08:40:09 发布
最新推荐文章于 2022-02-25 08:40:09 发布
阅读量108 收藏
点赞数
文章标签： 面试 数据库 javascript ViewUI
原文链接：https://juejin.im/post/5cee6e9cf265da1b725be519
版权

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

有没有似曾相识

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

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

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

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

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

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

引用 Robert C. Martin 的名言来说明这种情况：

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

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

JavaScript优雅代码的最佳实践

1. 强类型校验

使用 === 而不是 == 。

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

// 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，就这样吧，希望我们都能够努力践行这些最佳实践，写出 干净优雅 的代码 ☺️

转载于:https://juejin.im/post/5cee6e9cf265da1b725be519

weixin_33881050
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js-best-practices-workshopper:一个自定进度的命令行讲习班，学习编写干净JavaScript代码的最佳实践
05-06
JS最佳实践讲习班了解编写干净JavaScript代码的最佳实践。 对于更多的讲习班的人，查看入门确保已安装： 文本编辑器（我们建议使用或 ） 运行命令npm install -g js-best-practices 。 新建一个文件夹mkdir jsbp和cd...
编写高质量代码-改善JavaScript程序的188个建议，完整扫描版
12-28
内容全部由编写高质量的javascript代码的最佳实践组成，从基本语法、应用架构、工具框架、编码风格、编程思想等5大方面对web前端工程师遇到的疑难问题给出了经验性的解决方案，为web前端工程师如何编写更高质量的...
Win10安装系统报错
weixin_43928836的博客
12-17 1372
安装系统时出现“windows无法安装到这个磁盘，选中的的磁盘采用GPT分区形式” 1、按shift+f10，调出cmd 2、然后输入“diskpart”，并点击回车键，进入diskpart 3、输入“list disk”，显示电脑磁盘的基本信息 4、输入“select disk 0”，选择”0磁盘“ 5、输入“clean”，将删除磁盘分区进行格式化 6、输入”convert mbr“，进...
面试官：说说快速失败和安全失败是什么
七淅的博客
11-10 1692
什么是快速失败（fail-fast）和安全失败（fail-safe）？它们又和什么内容有关系。以上两点就是这篇文章的内容，废话不多话，正文请慢用。 我们都接触 HashMap、ArrayList 这些集合类，这些在 java.util 包的集合类就都是快速失败的；而 java.util.concurrent 包下的类都是安全失败，比如：ConcurrentHashMap。 1. 快速失败（fai...
createfile 失败:代码3_Flink1.10入门：Checkpoint重启策略及代码演示
weixin_33648811的博客
12-27 385
一、概述当任务失败时，Flink需要重新启动失败的任务和其他受影响的任务，将作业恢复到正常状态；重新启动策略和故障转移策略用于控制任务的重新启动。重新启动策略决定是否以及何时可以重新启动失败/受影响的任务。故障转移策略决定应该重新启动哪些任务以恢复作业。二、Restart Strategies 重启策略在没有定义特定作业的重启策略时，总是使用默认的重启策略。如果提交的作...
《编写高质量代码-改善JavaScript程序的188个建议》PDF
12-11
内容全部由编写高质量的JavaScript代码的最佳实践组成，从基本语法、应用架构、工具框架、编码风格、编程思想等5大方面对Web前端工程师遇到的疑难问题给出了经验性的解决方案，为Web前端工程师如何编写更高质量的...
Effective JavaScript 编写高质量JavaScript代码的68个有效方法1
08-03
第 1 章主要讲述最基本的主题，如版本、类型转换要点、运算符注意事项和分号局限等。第 2 章主要讲解变量作用域，介绍此方面的一些基本概念，以及一些最佳实践经验。
编写高质量代码--Web前端开发修炼之道.pdf
10-14
　本书的核心内容是围绕Web前端开发的三大技术要素——HTML、CSS和JavaScript来深入地探讨编写高质量的HTML代码、CSS代码和JavaScript代码的方法、技巧、规范和最佳实践，从而为编写易于维护的Web前端代码打下坚实的...
createfile失败(createfile错误,此操作失败怎么办)
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
02-25 2429
createfile-createfile访问失败代码5怎么解？createfile访 删出createfile，从新安装一次。 createfile函数-win7下VB用API函数CreateFile获取硬盘信息在wi? 估计是权限的问题吧，你用管理员权限执行一下试试看呢 CreateFile失败，代码5拒绝...
Win10系统【CreateFile() Error: 5】问题解决
PanGC2014
10-31 7865
Win10系统【CreateFile() Error: 5】问题解决 当按下键盘Shitf键，然后点击鼠标右键，打开Powershell窗口后，弹出如下错误： CreateFile() Error: 5是Win10系统中出现的权限问题，解决该问题需要将注册表中相关权限给关闭掉，具体操作如下： (1) 按下键盘Win + R组合快捷键，打开后输入命令：regedit， 具体如下图 (2) 然后点击确认，打开注册表: regedit，找到如下选项HKEY_LOCAL_MACHINE\Software\Mic
createfile 失败:代码3_利用 Junt 维护代码质量
weixin_34274601的博客
12-12 496
一、写本文背景说到 Junit，很多人都知道非常强大的代码逻辑检测框架，但在平时项目中，我发现两个问题：开发人员并不喜欢写UT，其中有包括很多资深工程师和架构师等；写UT仅是为了验证即时代码的正确性，因此让 UT 变成了一次性的，且只为了本次代码的覆盖而写；二、简单栗子热热身假设我们要测试个除法运算，如div(a,b) 那么就要针对c=a/b做分别的假设和预期结果public class...
createFIle（）； 执行时，返回错误码123
一个编程菜鸟的成长路-(常人changr)的专栏
04-18 3151
问题描述：   解决问题：      通过设置工程属性 --》 配置属性 --》字符集 --》 使用 Unicode 字符集 。      然后通过 将 str.Format("打开设备成功；vId:%x,pId:%x",USB_VID,USB_PID);        变为 str.Format(L"打开设备成功；vId:%x,pId:%x",USB_VID,USB_PID);      这样程...
错误3：系统找不到指定的路径
weixin_34235371的博客
01-25 1372
 1.先去服务里找到 SQL Server(SQLEXPRESS),看它的属性,把可执行文件的路径复制下来2.到注册表找到HKEY_LOCAL_MACHINE/SYSTEM/CONTROLSET001/Services/MSSQL$SQLEXPRESS(因为我的2005是命名实例,你去找个与这名字类似的) ,找到这个后选中,有个ImagePath, 把它的数据数值改成原先复制下来的可执行文件路径...
javascript代码手册
最新发布
01-08
JavaScript代码手册是一本为JavaScript开发者编写的指南，其中包含了该语言的常见用法、最佳实践以及常见问题的解决方法。该手册旨在帮助开发者更好地理解JavaScript的语法和特性，提高他们在编写和维护代码时的效率...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值