[译] JavaScript 简明代码 —— 最佳实践

最新推荐文章于 2024-05-06 23:33:48 发布
最新推荐文章于 2024-05-06 23:33:48 发布
阅读量94 收藏
点赞数
文章标签： 后端 前端 区块链 ViewUI
原文链接：https://juejin.im/post/5d04ac08e51d45777621bb74
版权

引言

如果你不只是担心你的代码是否能生效，还会关注代码本身及其如何编写，那你可以说你有在关注简明代码并在努力实践。专业的开发者会面向其未来和其他人而不仅是为了机器编写代码。你写的任何代码都不会只写一次，而是会待在那等待未来维护代码的人，让他痛苦不堪。希望那个未来的家伙不会是你。

基于上述情况，简明代码可以被定义为代码以不言自明，易于理解且易于更改或扩展的方式编写。

回想一下有多少次你接手别人工作时的第一印象是下面几个 WTF 问题之一？

“这 TM 是啥？”

“你 TM 在这干了啥”

“这 TM 是干啥的？”

有一个很火的图片描绘了上述场景。

Robert C. Martin (Bob 叔叔) 的一句名言应该会启发你思考你的方式。

即使是糟糕的代码也能运行。但是如果代码不够简明，它会让开发组织陷入困境。

在本文中，重点将放在 JavaScript 上，但是原则可以应用于其他编程语言。

你要的干货来了 —— 简明代码最佳实践

1. 强类型检查

使用 === 而不是 ==

// 如果处理不当，它会在很大程度上影响程序逻辑。就像，你期待向左走，但由于某些原因，你向右走了。
0 == false // true
0 === false // false
2 == "2" // true
2 === "2" // false

// 例子
const value = "500";
if (value === 500) {
  console.log(value);
  // 不会执行
}

if (value === "500") {
  console.log(value);
  // 会执行
}
复制代码

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();
  // ...
  // ...
  // ...
  // ...
  // 这里有 WTF 场景：`u` TM 是啥？
  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
}
复制代码

避免使用大量参数。理想情况下，函数参数不应该超过两个。参数越少，函数越易于测试。

糟糕示例：

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}`);
}
复制代码

不要污染全局变量。如果你要扩展一个已存在的对象，使用 ES 类继承而不是在原生对象的原型链上创建函数。

糟糕示例：

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

良好示例：

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

4. 条件语句

避免使用否定条件。

糟糕示例：

function isUserNotBlocked(user) {
  // implementation
}

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

良好示例：

function isUserBlocked(user) {
  // implementation
}

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

使用条件语句简写。这可能不那么重要，但是值得一提。仅将此方法用于布尔值，并且确定该值不是 undefined 和 null。

糟糕示例：

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 类

类是 JavaScript 中的新语法糖。一切都像之前使用原型一样现在只不过看起来不同，并且你应该喜欢它们胜过 ES5 普通函数。

糟糕示例：

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() {
    /* ... */
  }
}
复制代码

使用方法链。诸如 jQuery 和 Lodash 之类的很多库都使用这个模式。这样的话，你的代码就会减少冗余。在你的类中，只用在每个函数末尾返回 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. 通用原则

一般来说，你应该尽力不要重复自己的工作，意思是你不应该写重复代码，并且不要在你身后留下尾巴比如未使用的函数和死代码。

出于各种原因，你最终可能会遇到重复的代码。例如，你有两个大致相同只有些许不同的东西，它们不同的特性或者时间紧迫使你单独创建了两个包含几乎相同代码的函数。在这种情况下删除重复代码意味着抽象化差异并在该层级上处理它们。

关于死代码，码如其名。它是在我们代码库中不做任何事情的代码，在开发的某个阶段，你决定它不再有用了。你应该在代码库中搜索这些部分然后删除所有不需要的函数和代码块。我可以给你的建议是一旦你决定不再需要它，删除它。不然你就会忘了它的用途。

这有一张图表明你当时可能会有的感受。

结语

这只是改进代码所能做的一小部分。在我看来，这里所说的原则是人们经常不遵循的原则。他们有过尝试，但由于各种原因并不总是奏效。可能项目刚开始代码还是整洁的，但当截止日期快到了，这些原则通常会被忽略，被移入“待办”或者“重构”部分。在那时候，客户宁愿让你赶上截止日期而不是写简明的代码。

就这样！

感谢阅读，下篇文章见。

如果发现译文存在错误或其他需要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可获得相应奖励积分。文章开头的 本文永久链接 即为本文在 GitHub 上的 MarkDown 链接。

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。

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

weixin_34324081
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 最佳实践：帮你提升代码质量
10-20
在本篇教程中，我将指出一些重要的 JavaScript 最佳实践，让你不必去用另外一种艰难的方式来了解它们。准备好去升级你的代码吧
读 [译] JavaScript 简明代码 —— 最佳实践
weixin_43464294的博客
05-06 67
读 [译] JavaScript 简明代码 —— 最佳实践 文章连接 [译] JavaScript 简明代码 —— 最佳实践 文章讲了6个方面 但是实际上自己总结起来只有几条： 良好的命名规范 强类型检查 剔除无用代码 简洁的函数参数 至于使用class啥的，我相信都会使用的，因为明显使用class和extends（语法糖）更简单一些 ...
简明 JavaScript 函数式编程——入门篇
画漫画的程序员∙苏南
11-07 770
点击上方“IT平头哥联盟”，选择“置顶或者星标”你的关注意义重大！本文作者：网易云音乐前端团队写在开头本文较长，总共分为三大部分：(对于函数式编程以及其优点有一定理解的童鞋，可以直接从 第...
5个Ajax最佳实践
Slate的专栏
11-18 334
导读：通过对5个最佳实践的学习，开发人员可将其应用到日常的Asynchronous JavaScript + XML（ Ajax ）开发工作中。文章包括了数据格式、错误处理、以及一些采用Ajax的Rich Internet Applications（RIAs)开发工具。掌握这些最佳实践，有助于开发人员编写更加高效且健壮的Ajax代码。 本文所介绍的5个最佳实践，可以应用到Web应用程序Aja
JavaScript面向对象编程简明教程
weixin_34007886的博客
07-25 80
JavaScript面向对象编程 如何定义自定义类型 首先需要明确，JavaScript并不是传统意义上的OO语言，它并没有class的概念， 而是包含了另一套异常强大的原型机制。它的类型体系、继承体系都建立在原型基础之上。 为了迎合传统的OO开发者，JavaScript语言的设计者通过这套原型体系模拟了传统面向对象语言的编码风格。 ...
高性能JavaScript代码最佳实践.pdf
01-02
高性能JavaScript代码最佳实践.pdf
代码雨衍生——道家真言JavaScript模板
08-16
本资源有详细讲解和代码实现步骤，想学习的请移步我的贴子，里面有html版本的，还有相关知识点的介绍，学会方法更加重要！ https://blog.csdn.net/g55zhw93/article/details/108019264 本资源内含有三个文件,一个...
JavaScript凌厉开发——Ext详解与实践 源码 源代码 part3
04-22
JavaScript凌厉开发——Ext详解与实践 源码 源代码 part3 因为源代码比较大，压缩后76M左右 所以分为四个包上传
最佳的JavaScript错误处理实践
10-21
在JavaScript中遇到处理错误很让人头疼，这篇文章整理了JavaScript错误处理实践，有需要的小伙伴们可以参考。
1.6 Java全栈开发前端+后端（全栈工程师进阶之路）-前置课程Jdbc编程，使用Java通过Jdbc对数据库进行基础操作
明裕学长的博客
05-01 903
统一资源定位系统（uniform resource locator;URL）是因特网的万维网服务程序上用于指定信息位置的表示方法。它最初是由蒂姆·伯纳斯·李发明用来作为万维网的地址。现在它已经被万维网联盟编制为互联网标准RFC1738。(百度百科)URL是统一资源定位符，代表网络中的某个资源的绝对路径通过URL可以定位网络中的资源URL主要包含四部分：协议、IP、端口号和资源名称。
Python——Fastapi管理平台（打包+优化）
Pan_peter的博客
05-06 334
这是一份后端和前端项目的综合改造和打包指南。首先，项目配置多张数据库表，并对后端代码进行修改。在导入模块时可能会遇到报错，需要在两处进行修正。启动后端服务，确保没有错误。接着，前端部分进行相应配置。 接下来是将项目打包成 exe 文件。分为两种方式：一种是不包含静态文件的简单打包，另一种是包含静态文件并打包成单个文件。分别对后端和前端进行必要修改后，运行打包命令。
使用IIS部署Vue项目
weixin_44656422的博客
05-06 245
使用IIS部署Vue项目，后端必须跨域，不要在Vue中用proxy跨域，那个只在dev环境中有用！IIS安装，不用全部打勾，有些他默认就是方块 ■ 选择性安装的，就维持原样就可以。
大数据BI可视化(Echarts组件)项目开发-熟悉koa2后端开发6.0
2201_75311251的博客
04-29 916
1.基于Node.js平台的web开发框架2.由Express原班人马打造 Express，koa，koa2框架名作用异步处理Expressweb框架回调函数koaweb框架koa2web框架3.环境依赖Node.js V7.6.0以上。
后端如何处理接口的重复调用
weixin_42248417的博客
04-29 429
后端如何处理接口的重复调用
『项目整理』易CAR通项目说明文档-我的第一款APP
一个专注于客户端开发的技术er，不定期更新Android，Flutter，HormonyOS等方向的使用心得和感悟
05-01 1130
易CAR通项目是我的第一个Android项目。是一款结合了AR技术的模仿懂车帝的看车软件。因为是初学，所示实现的效果差强人意，很多的功能界面只实现到静态界面这个程度，使用的也是十分原始的技术栈。ARFoundation实现AR看车功能_哔哩哔哩_bilibili项目的后台接口使用的是renren-fast框架搭建的，因为后端的知识只了解皮毛，所以接口都写的很粗暴。登录注册查看汽车品牌大全首页汽车列表+Banner轮播图看车模块数据列表查看具体汽车信息。
三. Django项目之电商购物商城 -- 校验用户名 , 数据入库
xiugtt6141121的博客
05-01 342
需要开发文档和前端资料的可私聊。
前端Vue 后端FastApi 跨域 CORS
weixin_44656422的博客
05-06 160
前端是localhost:3000,后端是localhost:8000 ，就是跨域了。
【Android项目】“追茶到底”项目介绍
最新发布
JZJ_LYH的博客
05-06 157
【Android项目】从0开始白嫖一个完整的安卓项目
JavaScript代码分析——以淘宝网站为例 的优化分析
05-11
对于JavaScript代码的优化，可以从以下几个方面入手： 1. 减少HTTP请求：将多个小文件合并为一个大文件，减少HTTP请求次数，可以通过Webpack等工具进行打包。 2. 按需加载：将不必要的代码延迟加载，减少初始加载...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值