如何写出优雅耐看的JavaScript代码
前言
在咱们平时的工做开发中，大多数都是大人协同开发的公共项目；在咱们平时开发中代码codeing的时候咱们考虑代码的可读性、复用性和扩展性。es6
干净的代码，既在质量上较为可靠，也为后期维护、升级奠基了良好基础。数组
咱们从如下几个方面进行探讨：网络
变量
一、变量命名
通常咱们在定义变量是要使用有意义的词汇命令，要作到见面知义数据结构
//bad code
const yyyymmdstr = moment().format('YYYY/MM/DD');
//better code
const currentDate = moment().format('YYYY/MM/DD');
二、可描述
经过一个变量生成了一个新变量，也须要为这个新变量命名，也就是说每一个变量当你看到他第一眼你就知道他是干什么的。函数
//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);
三、形参命名
在for、forEach、map的循环中咱们在命名时要直接oop
//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);
});
四、避免无心义的前缀
例如咱们只建立一个对象是，没有必要再把每一个对象的属性上再加上对象名this
//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';
}
五、默认值
//bad code
function createMicrobrewery(name) {
const breweryName = name || 'Hipster Brew Co.';
// ...
}
//better code
function createMicrobrewery(name = 'Hipster Brew Co.') {
// ...
}
函数
一、参数
通常参数多的话要使用ES6的解构传参的方式spa
//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
});
二、单一化处理
一个方法里面最好只作一件事，不要过多的处理，这样代码的可读性很是高prototype
//bad code
function emailClients(clients) {
clients.forEach((client) => {
const clientRecord = database.lookup(client);
if (clientRecord.isActive()) {
email(client);
}
});
}
//better code
function emailActiveClients(clients) {
clients
.filter(isActiveClient)
.forEach(email);
}
function isActiveClient(client) {
const clientRecord = database.lookup(client);
return clientRecord.isActive();
}
三、对象设置默认属性
//bad code
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);
//better code
const menuConfig = {
title: 'Order',
// 'body' key 缺失
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);
四、避免反作用
函数接收一个值返回一个新值，除此以外的行为咱们都称之为反作用，好比修改全局变量、对文件进行 IO 操做等。设计
当函数确实须要反作用时，好比对文件进行 IO 操做时，请不要用多个函数/类进行文件操做，有且仅用一个函数/类来处理。也就是说反作用须要在惟一的地方处理。
反作用的三大天坑：随意修改可变数据类型、随意分享没有数据结构的状态、没有在统一地方处理反作用。
//bad code
// 全局变量被一个函数引用
// 如今这个变量从字符串变成了数组，若是有其余的函数引用，会发生没法预见的错误。
var name = 'Ryan McDermott';
function splitIntoFirstAndLastName() {
name = name.split(' ');
}
splitIntoFirstAndLastName();
console.log(name); // ['Ryan', 'McDermott'];
//better code
var name = 'Ryan McDermott';
var newName = splitIntoFirstAndLastName(name)
function splitIntoFirstAndLastName(name) {
return name.split(' ');
}
console.log(name); // 'Ryan McDermott';
console.log(newName); // ['Ryan', 'McDermott'];
在 JavaScript 中，基本类型经过赋值传递，对象和数组经过引用传递。以引用传递为例：
假如咱们写一个购物车，经过 addItemToCart()方法添加商品到购物车，修改 购物车数组。此时调用 purchase()方法购买，因为引用传递，获取的 购物车数组正好是最新的数据。
看起来没问题对不对？
若是当用户点击购买时，网络出现故障， purchase()方法一直在重复调用，与此同时用户又添加了新的商品，这时网络又恢复了。那么 purchase()方法获取到 购物车数组就是错误的。
为了不这种问题，咱们须要在每次新增商品时，克隆 购物车数组并返回新的数组。
//bad code
const addItemToCart = (cart, item) => {
cart.push({ item, date: Date.now() });
};
//better code
const addItemToCart = (cart, item) => {
return [...cart, {item, date: Date.now()}]
};
五、全局方法
在 JavaScript 中，永远不要污染全局，会在生产环境中产生难以预料的 bug。举个例子，好比你在 Array.prototype上新增一个 diff方法来判断两个数组的不一样。而你同事也打算作相似的事情，不过他的 diff方法是用来判断两个数组首位元素的不一样。很明显大家方法会产生冲突，遇到这类问题咱们能够用 ES2015/ES6 的语法来对 Array进行扩展。
//bad code
Array.prototype.diff = function diff(comparisonArray) {
const hash = new Set(comparisonArray);
return this.filter(elem => !hash.has(elem));
};
//better code
class SuperArray extends Array {
diff(comparisonArray) {
const hash = new Set(comparisonArray);
return this.filter(elem => !hash.has(elem));
}
}
六、避免类型检查
JavaScript 是无类型的，意味着你能够传任意类型参数，这种自由度很容易让人困扰，不自觉的就会去检查类型。仔细想一想是你真的须要检查类型仍是你的 API 设计有问题？
//bad code
function travelToTexas(vehicle) {
if (vehicle instanceof Bicycle) {
vehicle.pedal(this.currentLocation, new Location('texas'));
} else if (vehicle instanceof Car) {
vehicle.drive(this.currentLocation, new Location('texas'));
}
}
//better code
function travelToTexas(vehicle) {
vehicle.move(this.currentLocation, new Location('texas'));
}
若是你须要作静态类型检查，好比字符串、整数等，推荐使用 TypeScript，否则你的代码会变得又臭又长。
//bad code
function combine(val1, val2) {
if (typeof val1 === 'number' && typeof val2 === 'number' ||
typeof val1 === 'string' && typeof val2 === 'string') {
return val1 + val2;
}
throw new Error('Must be of type String or Number');
}
//better code
function combine(val1, val2) {
return val1 + val2;
}
复杂条件判断
咱们编写js代码时常常遇到复杂逻辑判断的状况，一般你们能够用if/else或者switch来实现多个条件判断，但这样会有个问题，随着逻辑复杂度的增长，代码中的if/else/switch会变得愈来愈臃肿，愈来愈看不懂，那么如何更优雅的写判断逻辑
一、if/else
点击列表按钮事件
/**
* 按钮点击事件
* @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消
*/
const onButtonClick = (status)=>{
if(status == 1){
sendLog('processing')
jumpTo('IndexPage')
}else if(status == 2){
sendLog('fail')
jumpTo('FailPage')
}else if(status == 3){
sendLog('fail')
jumpTo('FailPage')
}else if(status == 4){
sendLog('success')
jumpTo('SuccessPage')
}else if(status == 5){
sendLog('cancel')
jumpTo('CancelPage')
}else {
sendLog('other')
jumpTo('Index')
}
}
从上面咱们能够看到的是经过不一样的状态来作不一样的事情，代码看起来很是很差看，你们能够很轻易的提出这段代码的改写方案，switch出场：
二、switch/case
/**
* 按钮点击事件
* @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消
*/
const onButtonClick = (status)=>{
switch (status){
case 1:
sendLog('processing')
jumpTo('IndexPage')
break
case 2:
case 3:
sendLog('fail')
jumpTo('FailPage')
break
case 4:
sendLog('success')
jumpTo('SuccessPage')
break
case 5:
sendLog('cancel')
jumpTo('CancelPage')
break
default:
sendLog('other')
jumpTo('Index')
break
}
}
这样看起来比if/else清晰多了，细心的同窗也发现了小技巧，case 2和case 3逻辑同样的时候，能够省去执行语句和break，则case 2的状况自动执行case 3的逻辑。
三、存放到Object
将判断条件做为对象的属性名，将处理逻辑做为对象的属性值，在按钮点击的时候，经过对象属性查找的方式来进行逻辑判断，这种写法特别适合一元条件判断的状况。
const actions = {
'1': ['processing','IndexPage'],
'2': ['fail','FailPage'],
'3': ['fail','FailPage'],
'4': ['success','SuccessPage'],
'5': ['cancel','CancelPage'],
'default': ['other','Index'],
}
/**
* 按钮点击事件
* @param {number} status 活动状态：1开团进行中 2开团失败 3 商品售罄 4 开团成功 5 系统取消
*/
const onButtonClick = (status)=>{
let action = actions[status] || actions['default'],
logName = action[0],
pageName = action[1]
sendLog(logName)
jumpTo(pageName)
}
四、存放到Map
const actions = new Map([
[1, ['processing','IndexPage']],
[2, ['fail','FailPage']],
[3, ['fail','FailPage']],
[4, ['success','SuccessPage']],
[5, ['cancel','CancelPage']],
['default', ['other','Index']]
])
/**
* 按钮点击事件
* @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消
*/
const onButtonClick = (status)=>{
let action = actions.get(status) || actions.get('default')
sendLog(action[0])
jumpTo(action[1])
}
这样写用到了es6里的Map对象，是否是更爽了？Map对象和Object对象有什么区别呢？
- 一个对象一般都有本身的原型，因此一个对象总有一个"prototype"键。
- 一个对象的键只能是字符串或者Symbols，但一个Map的键能够是任意值。
- 你能够经过size属性很容易地获得一个Map的键值对个数，而对象的键值对个数只能手动确认。
代码风格
常量大写
//bad code
const DAYS_IN_WEEK = 7;
const daysInMonth = 30;
const songs = ['Back In Black', 'Stairway to Heaven', 'Hey Jude'];
const Artists = ['ACDC', 'Led Zeppelin', 'The Beatles'];
function eraseDatabase() {}
function restore_database() {}
class animal {}
class Alpaca {}
//better code
const DAYS_IN_WEEK = 7;
const DAYS_IN_MONTH = 30;
const SONGS = ['Back In Black', 'Stairway to Heaven', 'Hey Jude'];
const ARTISTS = ['ACDC', 'Led Zeppelin', 'The Beatles'];
function eraseDatabase() {}
function restoreDatabase() {}
class Animal {}
class Alpaca {}
先声明后调用
//bad code
class PerformanceReview {
constructor(employee) {
this.employee = employee;
}
lookupPeers() {
return db.lookup(this.employee, 'peers');
}
lookupManager() {
return db.lookup(this.employee, 'manager');
}
getPeerReviews() {
const peers = this.lookupPeers();
// ...
}
perfReview() {
this.getPeerReviews();
this.getManagerReview();
this.getSelfReview();
}
getManagerReview() {
const manager = this.lookupManager();
}
getSelfReview() {
// ...
}
}
const review = new PerformanceReview(employee);
review.perfReview();
//better code
class PerformanceReview {
constructor(employee) {
this.employee = employee;
}
perfReview() {
this.getPeerReviews();
this.getManagerReview();
this.getSelfReview();
}
getPeerReviews() {
const peers = this.lookupPeers();
// ...
}
lookupPeers() {
return db.lookup(this.employee, 'peers');
}
getManagerReview() {
const manager = this.lookupManager();
}
lookupManager() {
return db.lookup(this.employee, 'manager');
}
getSelfReview() {
// ...
}
}
const review = new PerformanceReview(employee);
review.perfReview();
相关文章
- 1. 如何写出优雅的Javascript代码
- 2. 如何优雅的编写JavaScript代码
- 3. 如何写出优雅的 Golang 代码
- 4. 如何写出优雅的css代码 ？
- 5. JDK8如何写出优雅代码
- 6. 教你如何写出优雅的 JavaScript 代码
- 7. 如何写出优美的 JavaScript 代码？
- 8. 写出优雅的代码
- 9. 代码质量管理——如何写出优雅的代码
- 10. 如何优雅的写代码
- 更多相关文章...
- • XSD 如何使用? - XML Schema 教程
- • Markdown 代码 - Markdown 教程
- • IntelliJ IDEA代码格式化设置
- • IntelliJ IDEA安装代码格式化插件
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 如何写出优雅的Javascript代码
- 2. 如何优雅的编写JavaScript代码
- 3. 如何写出优雅的 Golang 代码
- 4. 如何写出优雅的css代码 ？
- 5. JDK8如何写出优雅代码
- 6. 教你如何写出优雅的 JavaScript 代码
- 7. 如何写出优美的 JavaScript 代码？
- 8. 写出优雅的代码
- 9. 代码质量管理——如何写出优雅的代码
- 10. 如何优雅的写代码