当前位置: 开发笔记 > 编程语言 > 正文

浅谈写出优雅耐看JS代码的方法

作者：六月__的__旅行 | 来源：互联网 | 2020-09-11 14:25

在我们平时的工作开发中，大多数都是大人协同开发的公共项目；在我们平时开发中代码codeing的时候我们考虑代码的可读性、复用性和扩展性。干净的代码，既在质量上较为可靠，也为后期维护、升级奠定了良好基础。

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

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

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

变量

1、变量命名

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

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

2、可描述

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

//bad code
const ADDRESS = &＃39;One Infinite Loop, Cupertino 95014&＃39;;
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 = &＃39;One Infinite Loop, Cupertino 95014&＃39;;
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= [&＃39;Austin&＃39;, &＃39;New York&＃39;, &＃39;San Francisco&＃39;];
locations.map((l) => {
  doStuff();
  doSomeOtherStuff();
  // ...
  // ...
  // ...
  // 需要看其他代码才能确定 &＃39;l&＃39; 是干什么的。
  dispatch(l);
});

//better code
const locatiOns= [&＃39;Austin&＃39;, &＃39;New York&＃39;, &＃39;San Francisco&＃39;];
locations.forEach((location) => {
  doStuff();
  doSomeOtherStuff();
  // ...
  // ...
  // ...
  dispatch(location);
});

4、避免无意义的前缀

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

//bad code
const car = {
  carMake: &＃39;Honda&＃39;,
  carModel: &＃39;Accord&＃39;,
  carColor: &＃39;Blue&＃39;
};

function paintCar(car) {
  car.carColor = &＃39;Red&＃39;;
}

//better code
const car = {
  make: &＃39;Honda&＃39;,
  model: &＃39;Accord&＃39;,
  color: &＃39;Blue&＃39;
};

function paintCar(car) {
  car.color = &＃39;Red&＃39;;
}

5、默认值

//bad code
function createMicrobrewery(name) {
  const breweryName = name || &＃39;Hipster Brew Co.&＃39;;
  // ...
}

//better code
function createMicrobrewery(name = &＃39;Hipster Brew Co.&＃39;) {
  // ...
}

函数

1、参数

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

//bad code
function createMenu(title, body, buttonText, cancellable) {
  // ...
}

//better code
function createMenu({ title, body, buttonText, cancellable }) {
  // ...
}

//better code
createMenu({
  title: &＃39;Foo&＃39;,
  body: &＃39;Bar&＃39;,
  buttonText: &＃39;Baz&＃39;,
  cancellable: true
});

2、单一化处理

一个方法里面最好只做一件事，不要过多的处理，这样代码的可读性非常高

//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();
}

3、对象设置默认属性

//bad code
const menuCOnfig= {
  title: null,
  body: &＃39;Bar&＃39;,
  buttonText: null,
  cancellable: true
};
function createMenu(config) {
  config.title = config.title || &＃39;Foo&＃39;;
  config.body = config.body || &＃39;Bar&＃39;;
  config.buttOnText= config.buttonText || &＃39;Baz&＃39;;
  config.cancellable = config.cancellable !== undefined ? config.cancellable : true;
}
createMenu(menuConfig);
//better code
const menuCOnfig= {
  title: &＃39;Order&＃39;,
  // &＃39;body&＃39; key 缺失
  buttonText: &＃39;Send&＃39;,
  cancellable: true
};
function createMenu(config) {
  cOnfig= Object.assign({
    title: &＃39;Foo&＃39;,
    body: &＃39;Bar&＃39;,
    buttonText: &＃39;Baz&＃39;,
    cancellable: true
  }, config);
  // config 就变成了: {title: "Order", body: "Bar", buttonText: "Send", cancellable: true}
  // ...
}
createMenu(menuConfig);

4、避免副作用

函数接收一个值返回一个新值，除此之外的行为我们都称之为副作用，比如修改全局变量、对文件进行 IO 操作等。

当函数确实需要副作用时，比如对文件进行 IO 操作时，请不要用多个函数/类进行文件操作，有且仅用一个函数/类来处理。也就是说副作用需要在唯一的地方处理。

副作用的三大天坑：随意修改可变数据类型、随意分享没有数据结构的状态、没有在统一地方处理副作用。

//bad code
// 全局变量被一个函数引用
// 现在这个变量从字符串变成了数组，如果有其他的函数引用，会发生无法预见的错误。
var name = &＃39;Ryan McDermott&＃39;;
function splitIntoFirstAndLastName() {
  name = name.split(&＃39; &＃39;);
}
splitIntoFirstAndLastName();
console.log(name); // [&＃39;Ryan&＃39;, &＃39;McDermott&＃39;];
//better code
var name = &＃39;Ryan McDermott&＃39;;
var newName = splitIntoFirstAndLastName(name)
function splitIntoFirstAndLastName(name) {
  return name.split(&＃39; &＃39;);
}
console.log(name); // &＃39;Ryan McDermott&＃39;;
console.log(newName); // [&＃39;Ryan&＃39;, &＃39;McDermott&＃39;];

在 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()}]
};

5、全局方法

在 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));        
  }
}

6、避免类型检查

Javascript 是无类型的，意味着你可以传任意类型参数，这种自由度很容易让人困扰，不自觉的就会去检查类型。仔细想想是你真的需要检查类型还是你的 API 设计有问题？

//bad code
function travelToTexas(vehicle) {
  if (vehicle instanceof Bicycle) {
    vehicle.pedal(this.currentLocation, new Location(&＃39;texas&＃39;));
  } else if (vehicle instanceof Car) {
    vehicle.drive(this.currentLocation, new Location(&＃39;texas&＃39;));
  }
}

//better code
function travelToTexas(vehicle) {
  vehicle.move(this.currentLocation, new Location(&＃39;texas&＃39;));
}

如果你需要做静态类型检查，比如字符串、整数等，推荐使用 TypeScript，不然你的代码会变得又臭又长。

//bad code
function combine(val1, val2) {
  if (typeof val1 === &＃39;number&＃39; && typeof val2 === &＃39;number&＃39; ||
      typeof val1 === &＃39;string&＃39; && typeof val2 === &＃39;string&＃39;) {
    return val1 + val2;
  }
  throw new Error(&＃39;Must be of type String or Number&＃39;);
}
//better code
function combine(val1, val2) {
  return val1 + val2;
}

复杂条件判断

我们编写js代码时经常遇到复杂逻辑判断的情况，通常大家可以用if/else或者switch来实现多个条件判断，但这样会有个问题，随着逻辑复杂度的增加，代码中的if/else/switch会变得越来越臃肿，越来越看不懂，那么如何更优雅的写判断逻辑

1、if/else

点击列表按钮事件

/**
 * 按钮点击事件
 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消
 */
const OnButtonClick= (status)=>{
  if(status == 1){
    sendLog(&＃39;processing&＃39;)
    jumpTo(&＃39;IndexPage&＃39;)
  }else if(status == 2){
    sendLog(&＃39;fail&＃39;)
    jumpTo(&＃39;FailPage&＃39;)
  }else if(status == 3){
    sendLog(&＃39;fail&＃39;)
    jumpTo(&＃39;FailPage&＃39;)
  }else if(status == 4){
    sendLog(&＃39;success&＃39;)
    jumpTo(&＃39;SuccessPage&＃39;)
  }else if(status == 5){
    sendLog(&＃39;cancel&＃39;)
    jumpTo(&＃39;CancelPage&＃39;)
  }else {
    sendLog(&＃39;other&＃39;)
    jumpTo(&＃39;Index&＃39;)
  }
}

从上面我们可以看到的是通过不同的状态来做不同的事情，代码看起来非常不好看，大家可以很轻易的提出这段代码的改写方案，switch出场：

2、switch/case

/**
 * 按钮点击事件
 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消
 */
const OnButtonClick= (status)=>{
  switch (status){
    case 1:
      sendLog(&＃39;processing&＃39;)
      jumpTo(&＃39;IndexPage&＃39;)
      break
    case 2:
    case 3:
      sendLog(&＃39;fail&＃39;)
      jumpTo(&＃39;FailPage&＃39;)
      break  
    case 4:
      sendLog(&＃39;success&＃39;)
      jumpTo(&＃39;SuccessPage&＃39;)
      break
    case 5:
      sendLog(&＃39;cancel&＃39;)
      jumpTo(&＃39;CancelPage&＃39;)
      break
    default:
      sendLog(&＃39;other&＃39;)
      jumpTo(&＃39;Index&＃39;)
      break
  }
}

这样看起来比if/else清晰多了，细心的同学也发现了小技巧，case 2和case 3逻辑一样的时候，可以省去执行语句和break，则case 2的情况自动执行case 3的逻辑。

3、存放到Object

将判断条件作为对象的属性名，将处理逻辑作为对象的属性值，在按钮点击的时候，通过对象属性查找的方式来进行逻辑判断，这种写法特别适合一元条件判断的情况。

const actiOns= {
  &＃39;1&＃39;: [&＃39;processing&＃39;,&＃39;IndexPage&＃39;],
  &＃39;2&＃39;: [&＃39;fail&＃39;,&＃39;FailPage&＃39;],
  &＃39;3&＃39;: [&＃39;fail&＃39;,&＃39;FailPage&＃39;],
  &＃39;4&＃39;: [&＃39;success&＃39;,&＃39;SuccessPage&＃39;],
  &＃39;5&＃39;: [&＃39;cancel&＃39;,&＃39;CancelPage&＃39;],
  &＃39;default&＃39;: [&＃39;other&＃39;,&＃39;Index&＃39;],
}
/**
 * 按钮点击事件
 * @param {number} status 活动状态：1开团进行中 2开团失败 3 商品售罄 4 开团成功 5 系统取消
 */
const OnButtonClick= (status)=>{
  let action = actions[status] || actions[&＃39;default&＃39;],
      logName = action[0],
      pageName = action[1]
  sendLog(logName)
  jumpTo(pageName)
}

4、存放到Map

const actiOns= new Map([
  [1, [&＃39;processing&＃39;,&＃39;IndexPage&＃39;]],
  [2, [&＃39;fail&＃39;,&＃39;FailPage&＃39;]],
  [3, [&＃39;fail&＃39;,&＃39;FailPage&＃39;]],
  [4, [&＃39;success&＃39;,&＃39;SuccessPage&＃39;]],
  [5, [&＃39;cancel&＃39;,&＃39;CancelPage&＃39;]],
  [&＃39;default&＃39;, [&＃39;other&＃39;,&＃39;Index&＃39;]]
])
/**
 * 按钮点击事件
 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消
 */
const OnButtonClick= (status)=>{
  let action = actions.get(status) || actions.get(&＃39;default&＃39;)
  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= [&＃39;Back In Black&＃39;, &＃39;Stairway to Heaven&＃39;, &＃39;Hey Jude&＃39;];
const Artists = [&＃39;ACDC&＃39;, &＃39;Led Zeppelin&＃39;, &＃39;The Beatles&＃39;];
function eraseDatabase() {}
function restore_database() {}
class animal {}
class Alpaca {}
//better code
const DAYS_IN_WEEK = 7;
const DAYS_IN_MOnTH= 30;
const SOnGS= [&＃39;Back In Black&＃39;, &＃39;Stairway to Heaven&＃39;, &＃39;Hey Jude&＃39;];
const ARTISTS = [&＃39;ACDC&＃39;, &＃39;Led Zeppelin&＃39;, &＃39;The Beatles&＃39;];
function eraseDatabase() {}
function restoreDatabase() {}
class Animal {}
class Alpaca {}

先声明后调用

//bad code
class PerformanceReview {
  constructor(employee) {
    this.employee = employee;
  }
  lookupPeers() {
    return db.lookup(this.employee, &＃39;peers&＃39;);
  }
  lookupManager() {
    return db.lookup(this.employee, &＃39;manager&＃39;);
  }
  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, &＃39;peers&＃39;);
  }
  getManagerReview() {
    const manager = this.lookupManager();
  }
  lookupManager() {
    return db.lookup(this.employee, &＃39;manager&＃39;);
  }
  getSelfReview() {
    // ...
  }
}

const review = new PerformanceReview(employee);
review.perfReview();

以上就是浅谈写出优雅耐看 JS代码的方法的详细内容，更多请关注第一PHP社区其它相关文章！

推荐阅读

java
软件开发史上最具影响力的十位编程大师（附图解）

在软件开发领域，有十位编程大师对行业发展产生了深远影响。本文基于国外知名社区的一项评选，通过图文并茂的形式，详细介绍了这十位杰出人物，包括游戏开发先驱John Carmack等，为读者呈现了他们卓越的技术贡献与创新精神。 ... [详细]

蜡笔小新 2024-10-25 11:23:00
java
如何在TypeScript中定义可选为空的类型？ - Declaring Types as Optionally Nullable in TypeScript

在TypeScript中，我定义了一个名为 `Employee` 的接口，其中包含 `id` 和 `name` 属性。为了使这些属性可选为空，可以通过使用 `| null` 或 `| undefined` 来扩展其类型定义。例如，`id: number | null` 表示 `id` 可以是数字或空值。这种类型的灵活性在处理不确定的数据时非常有用，可以提高代码的健壮性和可维护性。 ... [详细]

蜡笔小新 2024-11-05 10:19:41
java
在打印文件中“使用严格”? - “Use Strict” needed in a TypeScript file?

IveseenpostsregardingwheretoputtheusestrictlineinaTypeScriptcodefile.Myquestion ... [详细]

蜡笔小新 2024-10-20 13:53:26
java
如何找到我点击的页面（Javascript）

我有一个页面，并且我想使用JavaScript来获取我在页面上单击的任何元素的相对xpath ... [详细]

蜡笔小新 2024-10-09 11:14:27
java
使用CorelDRAW X7轻松绘制卡通风格杯子教程

本文将引导您通过CorelDRAW X7软件，利用贝塞尔工具和交互式填充功能，创作出一个既可爱又生动的卡通杯子。我们将详细介绍每个步骤，帮助您掌握绘制技巧。 ... [详细]

蜡笔小新 2024-11-23 16:38:47
string
egg实现登录鉴权（七）：权限管理

权限管理包含三部分：访问页面的权限，操作功能的权限和获取数据权限。页面权限：登录用户所属角色的可访问页面的权限功能权限：登录用户所属角色的可访问页面的操作权限数据权限：登录用户所属 ... [详细]

蜡笔小新 2024-11-23 16:30:15
string
iOS开发中的UIView及其子类应用

本文介绍了用户界面（User Interface, UI）的基本概念，以及在iOS应用程序中UIView及其子类的重要性和使用方式。文章详细探讨了UIView如何作为用户交互的核心组件，以及它与其他UI控件和业务逻辑的关系。 ... [详细]

蜡笔小新 2024-11-23 16:25:09
string
线性表中的元素删除算法

本文探讨了线性表中元素的删除方法，包括顺序表和链表的不同实现策略，以及这些策略在实际应用中的性能分析。 ... [详细]

蜡笔小新 2024-11-23 16:14:36
string
《风流子》译文与赏析——宋代词人宋方君的诗意世界

本文深入解析宋代著名词人宋方君的作品《风流子》，通过细腻的译文和独到的赏析，带领读者走进词人的内心世界，感受其独特的艺术魅力。 ... [详细]

蜡笔小新 2024-11-23 16:11:01
string
在AI设计中精准对齐单个对象而不影响其他对象

本文将详细介绍如何在Adobe Illustrator中实现仅移动一个对象以完成对齐，同时确保另一个对象保持原位不变的方法。通过具体的操作步骤，帮助设计师们更加高效地完成设计任务。 ... [详细]

蜡笔小新 2024-11-23 16:03:27
byte
Python网络编程：深入探讨TCP粘包问题及解决方案

本文详细探讨了TCP协议下的粘包现象及其产生的原因，并提供了通过自定义报头解决粘包问题的具体实现方案。同时，对比了TCP与UDP协议在数据传输上的不同特性。 ... [详细]

蜡笔小新 2024-11-23 15:55:15
rsa
实现Win10与Linux服务器的SSH无密码登录

本文介绍了如何在Windows 10环境下使用Git工具，通过配置SSH密钥对，实现与Linux服务器的无密码登录。主要步骤包括生成本地公钥、上传至服务器以及配置服务器端的信任关系。 ... [详细]

蜡笔小新 2024-11-23 15:50:03
rsa
利用他人信息注册游戏账号的反思与讨论

本文探讨了在无法使用个人身份信息的情况下，利用他人（如网络上公开的个人信息）注册游戏账号的行为及其潜在的法律和道德问题。 ... [详细]

蜡笔小新 2024-11-23 15:35:44
web
Oasis 公布 Q3、Q4 路线图 | 推动 Sapphire 成为隐私王冠上闪耀明珠

Oasis 公布 Q3、Q4 路线图 | 推动 Sapphire 成为隐私王冠上闪耀明珠 ... [详细]

蜡笔小新 2024-09-30 13:53:16
string
React项目中运用React技巧解决实际问题的总结

本文总结了在React项目中如何运用React技巧解决一些实际问题，包括取消请求和页面卸载的关联，利用useEffect和AbortController等技术实现请求的取消。文章中的代码是简化后的例子，但思想是相通的。 ... [详细]

蜡笔小新 2023-12-12 11:31:15

六月__的__旅行

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章