专栏首页前端词典[译] 如何写出漂亮的 JavaScript 代码

[译] 如何写出漂亮的 JavaScript 代码

原文:github.com/ryanmcdermott/clean-code-javascript 说明:本文翻译自 github 上的一个项目,只取部分精华。

如何提高代码的可读性、复用性、扩展性。我们将从以下四个方面讨论:

  1. 变量
  2. 函数
  3. 异步

一、变量

用有意义且常用的单词命名

// Bad:
const yyyymmdstr = moment().format('YYYY/MM/DD');
// Good:
const currentDate = moment().format('YYYY/MM/DD');

保持统一

对同一类型的变量使用相同的命名保持统一:

// Bad:
getUserInfo();
getClientData();
getCustomerRecord();
// Good:
getUser()

每个常量(全大写)都该命名

可以用 ESLint 检测代码中未命名的常量。

// Bad:
// 其他人知道 86400000 的意思吗?
setTimeout( blastOff, 86400000 );
// Good:
const MILLISECOND_IN_A_DAY = 86400000;
setTimeout( blastOff, MILLISECOND_IN_A_DAY );

避免无意义的命名

既然创建了一个 car 对象,就没有必要把它的颜色命名为 carColor。

// Bad:
const car = {
    carMake: 'Honda',
    carModel: 'Accord',
    carColor: 'Blue'
};
function paintCar( car ) {
    car.carColor = 'Red';
}
// Good:
const car = {
    make: 'Honda',
    model: 'Accord',
    color: 'Blue'
};
function paintCar( car ) {
    car.color = 'Red';
}

传参使用默认值

// Bad:
function createMicrobrewery( name ) {
 const breweryName = name || 'Hipster Brew Co.';
 // ...
}
// Good:
function createMicrobrewery( name = 'Hipster Brew Co.' ) {
 // ...
}

二、函数

函数参数( 最好 2 个或更少 )

如果参数超过两个,建议使用 ES6 的解构语法,不用考虑参数的顺序。

// Bad:
function createMenu( title, body, buttonText, cancellable ) {
 // ...
}
// Good:
function createMenu( { title, body, buttonText, cancellable } ) {
 // ...
}
createMenu({
    title: 'Foo',
    body: 'Bar',
    buttonText: 'Baz',
    cancellable: true
});

一个方法只做一件事情

这是一条在软件工程领域流传久远的规则。严格遵守这条规则会让你的代码可读性更好,也更容易重构。如果违反这个规则,那么代码会很难被测试或者重用。

// Bad:
function emailClients( clients ) {
    clients.forEach( client => {
 const clientRecord = database.lookup( client );
 if ( clientRecord.isActive() ) {
            email( client );
 }
 });
}
// Good:
function emailActiveClients( clients ) {
    clients
 .filter( isActiveClient )
 .forEach( email );
}
function isActiveClient( client ) {
 const clientRecord = database.lookup( client ); 
 return clientRecord.isActive();
}

函数名上体现它的作用

// Bad:
function addToDate( date, month ) {
 // ...
}
const date = new Date();
// 很难知道是把什么加到日期中
addToDate( date, 1 );
// Good:
function addMonthToDate( month, date ) {
 // ...
}
const date = new Date();
addMonthToDate( 1, date );

删除重复代码,合并相似函数

很多时候虽然是同一个功能,但由于一两个不同点,让你不得不写两个几乎相同的函数。

// Bad:
function showDeveloperList(developers) {
  developers.forEach((developer) => {
 const expectedSalary = developer.calculateExpectedSalary();
 const experience = developer.getExperience();
 const githubLink = developer.getGithubLink();
 const data = {
      expectedSalary,
      experience,
      githubLink
 };
    render(data);
 });
}
function showManagerList(managers) {
  managers.forEach((manager) => {
 const expectedSalary = manager.calculateExpectedSalary();
 const experience = manager.getExperience();
 const portfolio = manager.getMBAProjects();
 const data = {
      expectedSalary,
      experience,
      portfolio
 };
    render(data);
 });
}
// Good:
function showEmployeeList(employees) {
  employees.forEach(employee => {
 const expectedSalary = employee.calculateExpectedSalary();
 const experience = employee.getExperience();
 const data = {
      expectedSalary,
      experience,
 };
 switch(employee.type) {
 case 'develop':
        data.githubLink = employee.getGithubLink();
 break
 case 'manager':
        data.portfolio = employee.getMBAProjects();
 break
 }
    render(data);
 })
}

使用 Object.assign 设置默认属性

// Bad:
const 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;
}
createMenu(menuConfig);
// Good:
const menuConfig = {
  title: 'Order',
 // 不包含 body
  buttonText: 'Send',
  cancellable: true
};
function createMenu(config) {
  config = Object.assign({
    title: 'Foo',
    body: 'Bar',
    buttonText: 'Baz',
    cancellable: true
 }, config);
 // config : {title: "Order", body: "Bar", buttonText: "Send", cancellable: true}
 // ...
}
createMenu(menuConfig);

尽量不要写全局方法

在 JavaScript 中,永远不要污染全局,会在生产环境中产生难以预料的 bug。举个例子,比如你在 Array.prototype 上新增一个 diff 方法来判断两个数组的不同。而你同事也打算做类似的事情,不过他的 diff 方法是用来判断两个数组首位元素的不同。很明显你们方法会产生冲突,遇到这类问题我们可以用 ES2015/ES6 的语法来对 Array 进行扩展。

// Bad:
Array.prototype.diff = function diff(comparisonArray) {
 const hash = new Set(comparisonArray);
 return this.filter(elem => !hash.has(elem));
};
// Good:
class SuperArray extends Array {
  diff(comparisonArray) {
 const hash = new Set(comparisonArray);
 return this.filter(elem => !hash.has(elem)); 
 }
}

尽量别用“非”条件句

// Bad:
function isDOMNodeNotPresent(node) {
 // ...
}
if (!isDOMNodeNotPresent(node)) {
 // ...
}
// Good:
function isDOMNodePresent(node) {
 // ...
}
if (isDOMNodePresent(node)) {
 // ...
}

不要过度优化

现代浏览器已经在底层做了很多优化,过去的很多优化方案都是无效的,会浪费你的时间。

// Bad:
// 现代浏览器已对此( 缓存 list.length )做了优化。
for (let i = 0, len = list.length; i < len; i++) {
 // ...
}
// Good:
for (let i = 0; i < list.length; i++) {
 // ...
}

删除弃用代码

这里没有实例代码,删除就对了

三、类

使用 ES6 的 class

在 ES6 之前,没有类的语法,只能用构造函数的方式模拟类,可读性非常差。

// Good:
// 动物
class Animal {
  constructor(age) {
 this.age = age
 };
  move() {};
}
// 哺乳动物
class Mammal extends Animal{
  constructor(age, furColor) {
 super(age);
 this.furColor = furColor;
 };
  liveBirth() {};
}
// 人类
class Human extends Mammal{
  constructor(age, furColor, languageSpoken) {
 super(age, furColor);
 this.languageSpoken = languageSpoken;
 };
  speak() {};
}

使用链式调用

这种模式相当有用,可以在很多库中都有使用。它让你的代码简洁优雅。

class Car {
  constructor(make, model, color) {
 this.make = make;
 this.model = model;
 this.color = color;
 }
  setMake(make) {
 this.make = make;
 }
  setModel(model) {
 this.model = model;
 }
  setColor(color) {
 this.color = color;
 }
  save() {
    console.log(this.make, this.model, this.color);
 }
}
// Bad:
const car = new Car('Ford','F-150','red');
car.setColor('pink');
car.save();
// Good:  方法中要 return this 
const car = new Car('Ford','F-150','red')
 .setColor('pink')
 .save();

四、异步

使用 promise 或者 Async/Await 代替回调

// Bad:
get('https://en.wikipedia.org/wiki/Robert_Cecil_Martin', (requestErr, response) => {
 if (requestErr) {
    console.error(requestErr);
 } else {
    writeFile('article.html', response.body, (writeErr) => {
 if (writeErr) {
        console.error(writeErr);
 } else {
        console.log('File written');
 }
 });
 }
});
// Good:
get('https://en.wikipedia.org/wiki/Robert_Cecil_Martin')
 .then((response) => {
 return writeFile('article.html', response);
 })
 .then(() => {
    console.log('File written');
 })
 .catch((err) => {
    console.error(err);
 });
// perfect:
async function getCleanCodeArticle() {
 try {
 const response = await get('https://en.wikipedia.org/wiki/Robert_Cecil_Martin');
 await writeFile('article.html', response);
    console.log('File written');
 } catch(err) {
    console.error(err);
 }
}

Vue 相关文章输出计划

本文分享自微信公众号 - 小生方勤(XSFQ_HSD)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-06-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 检查JavaScript文件_TypeScript笔记18

    但为了确保文件内容只含有标准的 JavaScript 代码,.js文件按照 ES 语法规范来检查,因而不允许出现 TypeScript 类型标注:

    ayqy贾杰
  • ES2016

    一个数组包含性检测方法,一个幂运算符。没了,ES2016就这两个新特性,还都是锦上添花的东西

    ayqy贾杰
  • 命名空间_TypeScript笔记15

    注意到这里通过三斜线指令引入被拆分出去的“namespace 模块”(而不是像 module 一样 import),仍用import的话,会得到报错:

    ayqy贾杰
  • Linux之lsof命令

    lsof(list open files)是一个列出当前系统打开文件的工具。在linux环境下,任何事物都以文件的形式存在,通过文件不仅仅可以访问常规数据,还可...

    菲宇
  • 模块_TypeScript笔记13

    简单来讲,如果一个文件中含有合法的import或export语句,就会被当做模块(拥有模块作用域),否则就将在运行在全局作用域下。例如:

    ayqy贾杰
  • 前端开发教程:Javascript中如何定义类?

    Javascript虽然不是面向对象语言,但是我们一样可以实现类的定义,工作中我们定义类一般用下面的方式,如下:

    用户4831957
  • 【ES6基础】迭代器(iterator)

    迭代器(iterator)是一个结构化的模式,用于从源以一次一个的方式提取数据。迭代器的使用可以极大地简化数据操作,于是ES6也向JS中添加了这个迭代器特性。新...

    前端达人
  • 类_TypeScript笔记4

    TypeScript里的类的定义与ES6 Class规范一致,静态属性,实例属性,访问器等都支持:

    ayqy贾杰
  • 《深入理解ES6》阅读笔记 --- babel

    在2017年相信ES6已经得到了很大的普及,如果你写过React或者Vue,相信在多年之前就已经体验过ES6的魅力了。言归正传,《深入理解ES6》阅读笔记并不会...

    icepy
  • react-redux源码解读

    react-redux作为胶水一样的东西,似乎没有深入了解的必要,但实际上,作为数据层(redux)与UI层(react)的连接处,其实现细节对整体性能有着决定...

    ayqy贾杰

扫码关注云+社区

领取腾讯云代金券