如何编写干净的JavaScript代码?

开发 前端
在 JavaScript 中,良好命名的关键不在于最短的变量名,而在于最具描述性的变量名。map、filter等方法都需要一个匿名函数作为参数,在这些情况下,使用箭头函数是最方便和优雅的方式。

今天来分享几个编写干净的JavaScript代码的技巧!

1. 更好的命名

在 JavaScript 中,良好命名的关键不在于最短的变量名,而在于最具描述性的变量名。

(1)减少幻数

将代码中的一些数字定义为一个常量,以使它更有意义,也便于后期的维护。

for (i=0; i < 8765; i++){}

const HOURS_IN_A_YEAR = 8765

for (i=0; i < HOURS_IN_A_YEAR; i++){}

(2)语义化命名

尽可能语义化变量和函数的名称。

onst expired = true; 
const e = true;

const hasExpired = true; // 布尔值应该有一个类似于is、has或was的前缀
const expiredDate = new Date()
let expiredElementsAmount = 0
let allExpiredElemnts = []

2. 保持简洁

(1)避免重复

为了更好地实现简洁的代码,应该遵循DRY(Don't Repeat Yourself)原则。减少代码的重复。

  async function notifyUsers(userIds, message) {
userIds.foreach(userId => {
const user = await User.findByPk(userId)
if(user.isSubscribed) {
const Notification = await Notifications.create({
date: new Date(),
user_id: userId,
message,
emailNotify: true });
Notification.save();
} else {
const Notification = await Notifications.create({
date: new Date(),
user_id: userId,
message,
emailNotify: true });
Notification.save();
}
}
}

async function notifyUsers(userIds, message) {
userIds.foreach(userId => {
const user = await User.findByPk(userId)
notifyUsers(userId, message, user.isSubscribed)
}
}

async function createNotification(userId, message, isSubscribed) {
const Notification = await Notifications.create({
date: new Date(),
user_id: userId,
message,
emailNotify: isSubscribed });
Notification.save();
}

(2)使用递归

有些情况下,使用递归的代码会比迭代更加简洁。

const stepsToHundred = (number) => {
let steps = 0

while(number < 100) {
number *= 2
steps++
}

return steps
}

const stepsToHundred = (number, steps) =>
number < 100 ? stepsToHundred(number * 2, steps + 1) : steps

(3)字符串连接

ES6中新增了模板字符串功能使我们可以在拼接字符串时代码更短、更简洁。

const welcomeMessage = "你好" + user1 + ", 我是" + user2;

const welcomeMessage = `你好 ${user1}, 我是 ${user2}`

3. 减少多层嵌套

(1)条件语句

不要将 return 语句嵌套到 if-else 中。

const getUSTime = (time) => {
if(time <= 12){
return time + "AM"
} else {
return time + "PM"
}
}

const getUSTime = (time) => {
if(time <= 12) return time + "AM"
return time + "PM"
}

也可以使用三元表达式来写:

const getUSTime = (time) => {
return time + (time <= 12 ? "AM" : "PM")
}

(2)async/await

当使用链式的 Promise 时,代码的可读性就会变差。可以使用async/await来优化异步嵌套的代码。

const sharePost = () => {
getPost().then(post => {
sendTweet(post.url, `分享一篇文章: ${post.title}`)
.then(() => {
console.log("分享成功");
});
});
}

const sharePost = async () => {
const post = await getPost();
await sendTweet(post.url, `分享一篇文章: ${post.title}`)
console.log("分享成功");
}

4. 干净的函数

(1)处理大量参数的函数

当函数的参数很多时,需要按照顺序传递参数就很麻烦,可以使用对象包装所有的参数,这样传递参数时就可以乱序传递,避免传参时出错。

function addUser(firstName, lastName, age, city, state, zipCode) {
// ...
}

function addUser({ firstName, lastName, age, city, state, zipCode }) {
// ...
}

(2)单一责任原则

使用单一职责原则,可以轻松的命名函数,每个函数只做一件事。可以通过它的名称确切地知道该函数的作用,并且该函数不会是冗长的。

async function signupUser(email) {
const user = await User.create({ email });
await user.save();

const notifcation = await Notification.create({ email });
await notifcation.save();

const date = new Date()
Log.add(date, "已注册", email)
}

const logSignup(email) => Log.add(new Date(), "已注册", email)

async function signupUser(email) {
createUser(email)
notifyUser(email)
logSignup(email)
}

async function createUser(email) {
const user = await User.create({ email });
await user.save();
}

async function notifyUser(email) {
const notifcation = await Notification.create({ email });
await notifcation.save();
}

(3)回调中首选箭头函数

在 JavaScript 中,map、filter等方法都需要一个匿名函数作为参数,在这些情况下,使用箭头函数是最方便和优雅的方式

[1, 2, 3].forEach(function (x) {
const y = x ** 2;
return x + y;
});

[1, 2, 3].forEach((x) => {
const y = x ** 2;
return x + y;
});

责任编辑:武晓燕 来源: 前端充电宝
相关推荐

2021-09-01 08:55:20

JavaScript代码开发

2021-11-30 10:20:24

JavaScript代码前端

2020-07-15 14:51:39

代码C+开发

2020-08-27 07:00:00

代码软件应用程序

2023-03-27 15:05:10

Python技巧

2013-04-15 09:02:43

JavaScriptJS

2017-09-14 12:45:35

2015-05-11 10:48:28

代码干净的代码越少越干净

2023-01-27 14:53:03

2011-03-04 10:11:09

JavascriptAPI

2024-02-23 08:00:00

2012-12-17 13:51:22

Web前端JavaScriptJS

2016-11-30 18:35:03

JavaScript

2021-12-29 16:34:19

JavaScript代码库开发

2020-06-15 11:04:38

JavaScript 代码JavaScript

2014-04-21 10:14:52

PromisesJavaScript

2009-06-24 15:00:39

Javascript代

2022-07-18 10:15:16

Python

2012-07-11 10:51:37

编程

2021-03-17 08:00:59

JS语言Javascript
点赞
收藏

51CTO技术栈公众号