如何写出优雅耐看的JavaScript代码

前言

在我们平时的工作开发中，大多数都是大人协同开发的公共项目;在我们平时开发中代码codeing的时候我们考虑代码的可读性、复用性和扩展性。

干净的代码，既在质量上较为可靠，也为后期维护、升级奠定了良好基础。

我们从以下几个方面进行探讨：

变量

1、变量命名

一般我们在定义变量是要使用有意义的词汇命令，要做到见面知义

//bad code 
const yyyymmdstr = moment().format('YYYY/MM/DD'); 
//better code 
const currentDate = moment().format('YYYY/MM/DD'); 

2、可描述

通过一个变量生成了一个新变量，也需要为这个新变量命名，也就是说每个变量当你看到他第一眼你就知道他是干什么的。

//bad code 
const ADDRESS = 'One Infinite Loop, Cupertino 95014'; 
const CITY_ZIP_CODE_REGEX = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/; 
saveCityZipCode(ADDRESS.match(CITY_ZIP_CODE_REGEX)[1], ADDRESS.match(CITY_ZIP_CODE_REGEX)[2]); 
 
//better code 
const ADDRESS = 'One Infinite Loop, Cupertino 95014'; 
const CITY_ZIP_CODE_REGEX = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/; 
const [, city, zipCode] = ADDRESS.match(CITY_ZIP_CODE_REGEX) || []; 
saveCityZipCode(city, zipCode); 

3、形参命名

在for、forEach、map的循环中我们在命名时要直接

//bad code 
const locations = ['Austin', 'New York', 'San Francisco']; 
locations.map((l) => { 
  doStuff(); 
  doSomeOtherStuff(); 
  // ... 
  // ... 
  // ... 
  // 需要看其他代码才能确定 'l' 是干什么的。 
  dispatch(l); 
}); 
 
//better code 
const locations = ['Austin', 'New York', 'San Francisco']; 
locations.forEach((location) => { 
  doStuff(); 
  doSomeOtherStuff(); 
  // ... 
  // ... 
  // ... 
  dispatch(location); 
}); 

4、避免无意义的前缀

例如我们只创建一个对象是，没有必要再把每个对象的属性上再加上对象名

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

5、默认值

//bad code 
function createMicrobrewery(name) { 
  const breweryName = name || 'Hipster Brew Co.'; 
  // ... 
} 
 
//better code 
function createMicrobrewery(name = 'Hipster Brew Co.') { 
  // ... 
} 

函数

1、参数

一般参数多的话要使用ES6的解构传参的方式

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

2、单一化处理

（编辑：ASP站长网）