如何写出干净的 JavaScript 代码

一段干净的代码，你在阅读、重用和重构的时候都能非常轻松。编写干净的代码非常重要，因为在我们日常的工作中，你不是仅仅是在为自己写代码。实际上，你还需要考虑一群需要理解、编辑和构建你的代码的同事。

1. 变量

使用有意义的名称

变量的名称应该是可描述，有意义的，JavaScript变量都应该采用驼峰式大小写 (camelCase) 命名。

//Don't❌
constfoo="JDoe@example.com";
constbar="John";
constage=23;
constqux=true;

//Do✅
constemail="John@example.com";
constfirstName="John";
constage=23;
constisActive=true

布尔变量通常需要回答特定问题，例如：

isActive
didSubscribe
hasLinkedAccount

避免添加不必要的上下文

当对象或类已经包含了上下文的命名时，不要再向变量名称添加冗余的上下文。

//Don't❌
constuser={
userId:"296e2589-7b33-400a-b762-007b730c8e6d",
userEmail:"JDoe@example.com",
userFirstName:"John",
userLastName:"Doe",
userAge:23,
};

user.userId;

//Do✅
constuser={
id:"296e2589-7b33-400a-b762-007b730c8e6d",
email:"JDoe@example.com",
firstName:"John",
lastName:"Doe",
age:23,
};

user.id;

避免硬编码值

确保声明有意义且可搜索的常量，而不是直接插入一个常量值。全局常量可以采用SCREAMING_SNAKE_CASE风格命名。

//Don't❌
setTimeout(clearSessionData,900000);

//Do✅
constSESSION_DURATION_MS=15*60*1000;

setTimeout(clearSessionData,SESSION_DURATION_MS);

2. 函数

使用有意义的名称

函数名称需要描述函数的实际作用，即使很长也没关系。函数名称通常使用动词，但返回布尔值的函数可能是个例外 — 它可以采用是或否问题的形式，函数名也应该是驼峰式的。

//Don't❌
functiontoggle(){
//...
}

functionagreed(user){
//...
}

//Do✅
functiontoggleThemeSwitcher(){
//...
}

functiondidAgreeToAllTerms(user){
//...
}

使用默认参数

默认参数比&& ||或在函数体内使用额外的条件语句更干净。

//Don't❌
functionprintAllFilesInDirectory(dir){
constdirectory=dir||"./";
//...
}

//Do✅
functionprintAllFilesInDirectory(dir="./"){
//...
}

限制参数的数量

尽管这条规则可能有争议，但函数最好是有3个以下参数。如果参数较多可能是以下两种情况之一：

该函数做的事情太多，应该拆分。
传递给函数的数据以某种方式相关，可以作为专用数据结构传递。

//Don't❌
functionsendPushNotification(title,message,image,isSilent,delayMs){
//...
}

sendPushNotification("NewMessage","...","http://...",false,1000);

//Do✅
functionsendPushNotification({title,message,image,isSilent,delayMs}){
//...
}

constnotificationConfig={
title:"NewMessage",
message:"...",
image:"http://...",
isSilent:false,
delayMs:1000,
};

sendPushNotification(notificationConfig);

避免在一个函数中做太多事情

一个函数应该一次做一件事，这有助于减少函数的大小和复杂性，使测试、调试和重构更容易。

/Don't❌
functionpingUsers(users){
users.forEach((user)=>{
constuserRecord=database.lookup(user);
if(!userRecord.isActive()){
ping(user);
}
});
}

//Do✅
functionpingInactiveUsers(users){
users.filter(!isUserActive).forEach(ping);
}

functionisUserActive(user){
constuserRecord=database.lookup(user);
returnuserRecord.isActive();
}

避免使用布尔标志作为参数

函数含有布尔标志的参数意味这个函数是可以被简化的。

//Don't❌
functioncreateFile(name,isPublic){
if(isPublic){
fs.create(`./public/${name}`);
}else{
fs.create(name);
}
}

//Do✅
functioncreateFile(name){
fs.create(name);
}

functioncreatePublicFile(name){
createFile(`./public/${name}`);
}

避免写重复的代码

如果你写了重复的代码，每次有逻辑改变，你都需要改动多个位置。

//Don't❌
functionrenderCarsList(cars){
cars.forEach((car)=>{
constprice=car.getPrice();
constmake=car.getMake();
constbrand=car.getBrand();
constnbOfDoors=car.getNbOfDoors();

render({price,make,brand,nbOfDoors});
});
}

functionrenderMotorcyclesList(motorcycles){
motorcycles.forEach((motorcycle)=>{
constprice=motorcycle.getPrice();
constmake=motorcycle.getMake();
constbrand=motorcycle.getBrand();
constseatHeight=motorcycle.getSeatHeight();

render({price,make,brand,nbOfDoors});
});
}

//Do✅
functionrenderVehiclesList(vehicles){
vehicles.forEach((vehicle)=>{
constprice=vehicle.getPrice();
constmake=vehicle.getMake();
constbrand=vehicle.getBrand();

constdata={price,make,brand};

switch(vehicle.type){
case"car":
data.nbOfDoors=vehicle.getNbOfDoors();
break;
case"motorcycle":
data.seatHeight=vehicle.getSeatHeight();
break;
}

render(data);
});
}

避免副作用

在JavaScript中，你应该更喜欢函数式模式而不是命令式模式。换句话说，大多数情况下我们都应该保持函数纯。副作用可能会修改共享状态和资源，从而导致一些奇怪的问题。所有的副作用都应该集中管理，例如你需要更改全局变量或修改文件，可以专门写一个 util 来做这件事。

//Don't❌
letdate="21-8-2021";

functionsplitIntoDayMonthYear(){
date=date.split("-");
}

splitIntoDayMonthYear();

//Anotherfunctioncouldbeexpectingdateasastring
console.log(date);//['21','8','2021'];

//Do✅
functionsplitIntoDayMonthYear(date){
returndate.split("-");
}

constdate="21-8-2021";
constnewDate=splitIntoDayMonthYear(date);

//Originalvlaueisintact
console.log(date);//'21-8-2021';
console.log(newDate);//['21','8','2021'];

另外，如果你将一个可变值传递给函数，你应该直接克隆一个新值返回，而不是直接改变该它。

//Don't❌
functionenrollStudentInCourse(course,student){
course.push({student,enrollmentDate:Date.now()});
}

//Do✅
functionenrollStudentInCourse(course,student){
return[...course,{student,enrollmentDate:Date.now()}];
}

3. 条件语句

使用非负条件

//Don't❌
functionisUserNotVerified(user){
//...
}

if(!isUserNotVerified(user)){
//...
}

//Do✅
functionisUserVerified(user){
//...
}

if(isUserVerified(user)){
//...
}

尽可能使用简写

//Don't❌
if(isActive===true){
//...
}

if(firstName!==""&&firstName!==null&&firstName!==undefined){
//...
}

constisUserEligible=user.isVerified()&&user.didSubscribe()?true:false;

//Do✅
if(isActive){
//...
}

if(!!firstName){
//...
}

constisUserEligible=user.isVerified()&&user.didSubscribe();

避免过多分支

尽早return会使你的代码线性化、更具可读性且不那么复杂。

//Don't❌
functionaddUserService(db,user){
if(!db){
if(!db.isConnected()){
if(!user){
returndb.insert("users",user);
}else{
thrownewError("Nouser");
}
}else{
thrownewError("Nodatabaseconnection");
}
}else{
thrownewError("Nodatabase");
}
}

//Do✅
functionaddUserService(db,user){
if(!db)thrownewError("Nodatabase");
if(!db.isConnected())thrownewError("Nodatabaseconnection");
if(!user)thrownewError("Nouser");

returndb.insert("users",user);
}

优先使用 map 而不是 switch 语句

既能减少复杂度又能提升性能。

//Don't❌
constgetColorByStatus=(status)=>{
switch(status){
case"success":
return"green";
case"failure":
return"red";
case"warning":
return"yellow";
case"loading":
default:
return"blue";
}
};

//Do✅
conststatusColors={
success:"green",
failure:"red",
warning:"yellow",
loading:"blue",
};

constgetColorByStatus=(status)=>statusColors[status]||"blue";

使用可选链接

constuser={
email:"JDoe@example.com",
billing:{
iban:"...",
swift:"...",
address:{
street:"SomeStreetName",
state:"CA",
},
},
};

//Don't❌
constemail=(user&&user.email)||"N/A";
conststreet=
(user&&
user.billing&&
user.billing.address&&
user.billing.address.street)||
"N/A";
conststate=
(user&&
user.billing&&
user.billing.address&&
user.billing.address.state)||
"N/A";

//Do✅
constemail=user?.email??"N/A";
conststreet=user?.billing?.address?.street??"N/A";
conststreet=user?.billing?.address?.state??"N/A";

4.并发

避免回调

回调很混乱，会导致代码嵌套过深，使用Promise替代回调。

//Don't❌
getUser(function(err,user){
getProfile(user,function(err,profile){
getAccount(profile,function(err,account){
getReports(account,function(err,reports){
sendStatistics(reports,function(err){
console.error(err);
});
});
});
});
});

//Do✅
getUser()
.then(getProfile)
.then(getAccount)
.then(getReports)
.then(sendStatistics)
.catch((err)=>console.error(err));

//orusingAsync/Await✅✅

asyncfunctionsendUserStatistics(){
try{
constuser=awaitgetUser();
constprofile=awaitgetProfile(user);
constaccount=awaitgetAccount(profile);
constreports=awaitgetReports(account);
returnsendStatistics(reports);
}catch(e){
console.error(err);
}
}

5. 错误处理

处理抛出的错误和 reject 的 promise

/Don't❌
try{
//Possibleerronouscode
}catch(e){
console.log(e);
}

//Do✅
try{
//Possibleerronouscode
}catch(e){
//Followthemostapplicable(orall):
//1-Moresuitablethanconsole.log
console.error(e);

//2-Notifyuserifapplicable
alertUserOfError(e);

//3-Reporttoserver
reportErrorToServer(e);

//4-Useacustomerrorhandler
thrownewCustomError(e);
}

6.注释

只注释业务逻辑

可读的代码使你免于过度注释，因此，你应该只注释复杂的逻辑。

//Don't❌
functiongenerateHash(str){
//Hashvariable
lethash=0;

//Getthelengthofthestring
letlength=str.length;

//Ifthestringisemptyreturn
if(!length){
returnhash;
}

//Loopthrougheverycharacterinthestring
for(leti=0;i<length;i++){
//Getcharactercode.
constchar=str.charCodeAt(i);

//Makethehash
hash=(hash<<5)-hash+char;

//Convertto32-bitinteger
hash&=hash;
}
}

//Do✅
functiongenerateHash(str){
lethash=0;
letlength=str.length;
if(!length){
returnhash;
}

for(leti=0;i<length;i++){
constchar=str.charCodeAt(i);
hash=(hash<<5)-hash+char;
hash=hash&hash;//Convertto32bitinteger
}
returnhash;
}

使用版本控制

在代码里不需要保留历史版本的注释，想查的话你直接用git log就可以搜到。。

//Don't❌
/**
*2021-7-21:Fixedcornercase
*2021-7-15:Improvedperformance
*2021-7-10:Handledmutlipleusertypes
*/
functiongenerateCanonicalLink(user){
//constsession=getUserSession(user)
constsession=user.getSession();
//...
}

//Do✅
functiongenerateCanonicalLink(user){
constsession=user.getSession();
//...
}

好了，去写出你漂亮的代码吧！

链接: https://fly63.com/article/detial/10877