通過實踐編寫優(yōu)雅的JavaScript代碼
有沒有似曾相識
如果你對于代碼，除了關(guān)注是否能準(zhǔn)確的執(zhí)行業(yè)務(wù)邏輯，還關(guān)心代碼本身是怎么寫的，是否易讀，那么你應(yīng)該會關(guān)注如何寫出干凈優(yōu)雅的代碼。作為專業(yè)的工程師，除了保證自己的代碼沒有bug，能正確的完成業(yè)務(wù)邏輯，還應(yīng)該保證幾個月后的自己，或者其他工程師，也能夠維護(hù)自己的代碼。你寫的每一段代碼，通常情況下，都不會是 一次性 工作，通常伴隨著后續(xù)的不斷迭代。如果代碼不夠優(yōu)雅，那么將來維護(hù)這段代碼的人(甚至你自己)，都將感到非常痛苦。祈禱吧，將來面對這些糟糕代碼的人，不是你自己，而是別人。
OK，我們先來簡單定義下，什么是 干凈優(yōu)雅 的代碼：干凈優(yōu)雅的代碼，應(yīng)該是自解釋的，容易看懂的，并且很容易修改或者擴(kuò)展一些功能 。
現(xiàn)在，靜下來回憶一下，有多少次，當(dāng)你接手前輩留下來的糟糕代碼而懵逼時，心里默默的說過 "我*"的：
"我*，那是啥玩意兒"
"我*，這段代碼是干啥的”
"我*，這個變量又是干啥的"
嗯，下面這個圖片完美的展示了這種情形：
引用 Robert C. Martin 的名言來說明這種情況：
丑陋的代碼也能實現(xiàn)功能。但是不夠優(yōu)雅的代碼，往往會讓整個開發(fā)團(tuán)隊都跪在地上哭泣。
在這篇文章里，我主要講下載 JavaScript里怎么書寫干凈優(yōu)雅的代碼，但是對于其他編程語言，道理也是類似的。
JavaScript優(yōu)雅代碼的最佳實踐
1. 強(qiáng)類型校驗
使用 === 而不是 == 。
// If not handled properly, it can dramatically affect the program logic. It's like, you expect to go left, but for some reason, you go right.
0 == false // true
0 === false // false
2 == "2" // true
2 === "2" // false
// example
const value = "500";
if (value === 500) {
console.log(value);
// it will not be reached
}
if (value === "500") {
console.log(value);
// it will be reached
}
2. 變量命名
變量、字段命名，應(yīng)該包含它所對應(yīng)的真實含義。這樣更容易在代碼里搜索，并且其他人看到這些變量，也更容易理解。
錯誤的示范
let daysSLV = 10;
let y = new Date().getFullYear();
let ok;
if (user.age > 30) {
ok = true;
}
正確的示范
const MAX_AGE = 30; let daysSinceLastVisit = 10; let currentYear = new Date().getFullYear(); ... const isUserOlderThanAllowed = user.age > MAX_AGE;
不要在變量名中加入不必要的單詞。
錯誤的示范
let nameValue; let theProduct;
正確的示范
let name; let product;
不要強(qiáng)迫開發(fā)者去記住變量名的上下文。
錯誤的示范
const users = ["John", "Marco", "Peter"];
users.forEach(u => {
doSomething();
doSomethingElse();
// ...
// ...
// ...
// ...
// Here we have the WTF situation: WTF is `u` for?
register(u);
});
正確的示范
const users = ["John", "Marco", "Peter"];
users.forEach(user => {
doSomething();
doSomethingElse();
// ...
// ...
// ...
// ...
register(user);
});
不要在變量名中添加多余的上下文信息。
錯誤的示范
const user = {
userName: "John",
userSurname: "Doe",
userAge: "28"
};
...
user.userName;
正確的示范
const user = {
name: "John",
surname: "Doe",
age: "28"
};
...
user.name;
3. 函數(shù)相關(guān)
盡量使用足夠長的能夠描述函數(shù)功能的命名。通常函數(shù)都會執(zhí)行一個明確的動作或意圖，那么函數(shù)名就應(yīng)該是能夠描述這個意圖一個動詞或者表達(dá)語句，包含函數(shù)的參數(shù)命名也應(yīng)該能清晰的表達(dá)具體參數(shù)的含義。
錯誤的示范
function notif(user) {
// implementation
}
正確的示范
function notifyUser(emailAddress) {
// implementation
}
避免函數(shù)有太多的形參。比較理想的情況下，一個函數(shù)的參數(shù)應(yīng)該 <=2個 。函數(shù)的參數(shù)越少，越容易測試。
錯誤的示范
function getUsers(fields, fromDate, toDate) {
// implementation
}
正確的示范
function getUsers({ fields, fromDate, toDate }) {
// implementation
}
getUsers({
fields: ['name', 'surname', 'email'],
fromDate: '2019-01-01',
toDate: '2019-01-18'
});
如果函數(shù)的某個參數(shù)有默認(rèn)值，那么應(yīng)該使用新的參數(shù)默認(rèn)值語法，而不是在函數(shù)里使用 || 來判斷。
錯誤的示范
function createShape(type) {
const shapeType = type || "cube";
// ...
}
正確的示范
function createShape(type = "cube") {
// ...
}
一個函數(shù)應(yīng)該做一件事情。避免在一個函數(shù)里，實現(xiàn)多個動作。
錯誤的示范
function notifyUsers(users) {
users.forEach(user => {
const userRecord = database.lookup(user);
if (userRecord.isVerified()) {
notify(user);
}
});
}
正確的示范
function notifyVerifiedUsers(users) {
users.filter(isUserVerified).forEach(notify);
}
function isUserVerified(user) {
const userRecord = database.lookup(user);
return userRecord.isVerified();
}
使用 Object.assign 來給對象設(shè)置默認(rèn)值。
錯誤的示范
const shapeConfig = {
type: "cube",
width: 200,
height: null
};
function createShape(config) {
config.type = config.type || "cube";
config.width = config.width || 250;
config.height = config.width || 250;
}
createShape(shapeConfig);
正確的示范
const shapeConfig = {
type: "cube",
width: 200
// Exclude the 'height' key
};
function createShape(config) {
config = Object.assign(
{
type: "cube",
width: 250,
height: 250
},
config
);
...
}
createShape(shapeConfig);
不要在函數(shù)參數(shù)中，包括某些標(biāo)記參數(shù)，通常這意味著你的函數(shù)實現(xiàn)了過多的邏輯。
錯誤的示范
function createFile(name, isPublic) {
if (isPublic) {
fs.create(`./public/${name}`);
} else {
fs.create(name);
}
}
正確的示范
function createFile(name) {
fs.create(name);
}
function createPublicFile(name) {
createFile(`./public/${name}`);
}
不要污染全局變量、函數(shù)、原生對象的 prototype。如果你需要擴(kuò)展一個原生提供的對象，那么應(yīng)該使用 ES新的 類和繼承語法來創(chuàng)造新的對象，而不是去修改原生對象的prototype 。
錯誤的示范
Array.prototype.myFunc = function myFunc() {
// implementation
};
正確的示范
class SuperArray extends Array {
myFunc() {
// implementation
}
}
4. 條件分支
不要用函數(shù)來實現(xiàn) 否定 的判斷。比如判斷用戶是否合法，應(yīng)該提供函數(shù) isUserValid() ，而不是實現(xiàn)函數(shù)isUserNotValid() 。
錯誤的示范
function isUserNotBlocked(user) {
// implementation
}
if (!isUserNotBlocked(user)) {
// implementation
}
正確的示范
function isUserBlocked(user) {
// implementation
}
if (isUserBlocked(user)) {
// implementation
}
在你明確知道一個變量類型是 boolean 的情況下，條件判斷使用 簡寫。這確實是顯而易見的，前提是你能明確這個變量是boolean類型，而不是 null 或者 undefined 。
錯誤的示范
if (isValid === true) {
// do something...
}
if (isValid === false) {
// do something...
}
正確的示范
if (isValid) {
// do something...
}
if (!isValid) {
// do something...
}
在可能的情況下，盡量 避免 使用條件分支。優(yōu)先使用 多態(tài) 和 繼承 來實現(xiàn)代替條件分支。
錯誤的示范
class Car {
// ...
getMaximumSpeed() {
switch (this.type) {
case "Ford":
return this.someFactor() + this.anotherFactor();
case "Mazda":
return this.someFactor();
case "McLaren":
return this.someFactor() - this.anotherFactor();
}
}
}
正確的示范
class Car {
// ...
}
class Ford extends Car {
// ...
getMaximumSpeed() {
return this.someFactor() + this.anotherFactor();
}
}
class Mazda extends Car {
// ...
getMaximumSpeed() {
return this.someFactor();
}
}
class McLaren extends Car {
// ...
getMaximumSpeed() {
return this.someFactor() - this.anotherFactor();
}
}
5. ES的類
在ES里，類是新規(guī)范引入的語法糖。類的實現(xiàn)和以前 ES5 里使用 prototype 的實現(xiàn)完全一樣，只是它看上去更簡潔，你應(yīng)該優(yōu)先使用新的類的語法。
錯誤的示范
const Person = function(name) {
if (!(this instanceof Person)) {
throw new Error("Instantiate Person with `new` keyword");
}
this.name = name;
};
Person.prototype.sayHello = function sayHello() { /**/ };
const Student = function(name, school) {
if (!(this instanceof Student)) {
throw new Error("Instantiate Student with `new` keyword");
}
Person.call(this, name);
this.school = school;
};
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
Student.prototype.printSchoolName = function printSchoolName() { /**/ };
正確的示范
class Person {
constructor(name) {
this.name = name;
}
sayHello() {
/* ... */
}
}
class Student extends Person {
constructor(name, school) {
super(name);
this.school = school;
}
printSchoolName() {
/* ... */
}
}
使用方法的 鏈?zhǔn)秸{(diào)用。很多開源的JS庫，都引入了函數(shù)的鏈?zhǔn)秸{(diào)用，比如 jQuery 和 Lodash 。鏈?zhǔn)秸{(diào)用會讓代碼更加簡潔。在 class 的實現(xiàn)里，只需要簡單的在每個方法最后都返回 this，就能實現(xiàn)鏈?zhǔn)秸{(diào)用了。
錯誤的示范
class Person {
constructor(name) {
this.name = name;
}
setSurname(surname) {
this.surname = surname;
}
setAge(age) {
this.age = age;
}
save() {
console.log(this.name, this.surname, this.age);
}
}
const person = new Person("John");
person.setSurname("Doe");
person.setAge(29);
person.save();
正確的示范
class Person {
constructor(name) {
this.name = name;
}
setSurname(surname) {
this.surname = surname;
// Return this for chaining
return this;
}
setAge(age) {
this.age = age;
// Return this for chaining
return this;
}
save() {
console.log(this.name, this.surname, this.age);
// Return this for chaining
return this;
}
}
const person = new Person("John")
.setSurname("Doe")
.setAge(29)
.save();
6. 避免冗余代碼
通常來講，我們應(yīng)該避免重復(fù)寫相同的代碼，不應(yīng)該有未被用到的函數(shù)或者死代碼(永遠(yuǎn)也不會執(zhí)行到的代碼)的存在。
我們太容易就會寫出重復(fù)冗余的代碼。舉個栗子，有兩個組件，他們大部分的邏輯都一樣，但是可能由于一小部分差異，或者臨近交付時間，導(dǎo)致你選擇了把代碼拷貝了一份來修改。在這種場景下，要去掉冗余的代碼，只能進(jìn)一步提高組建的抽象程度。
至于死代碼，正如它名字所代表的含義。這些代碼的存在，可能是在你開發(fā)中的某個階段，你發(fā)現(xiàn)某段代碼完全用不上了，于是就把它們放在那兒，而沒有刪除掉。你應(yīng)該在代碼里找出這樣的代碼，并且刪掉這些永遠(yuǎn)不會執(zhí)行的函數(shù)或者代碼塊。我能給你的惟一建議，就是當(dāng)你決定某段代碼再也不用時，就立即刪掉它，否則晚些時候，可能你自己也會忘記這些代碼是干神馬的。
當(dāng)你面對這些死代碼時，可能會像下面這張圖所描繪的一樣：
結(jié)論
上面這些建議，只是一部分能提升你代碼的實踐。我在這里列出這些點，是工程師經(jīng)常會違背的。他們或許嘗試遵守這些實踐，但是由于各種原因，有的時候也沒能做到?；蛟S當(dāng)我們在項目的初始階段，確實很好的遵守了這些實踐，保持了干凈優(yōu)雅的代碼，但是隨著項目上線時間的臨近，很多準(zhǔn)則都被忽略了，盡管我們會在忽略的地方備注上TODO 或者REFACTOR (但正如你所知道的，通常 later也就意味著never)。
OK，就這樣吧，希望我們都能夠努力踐行這些最佳實踐，寫出 干凈優(yōu)雅 的代碼 ☺
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
下面小編就為大家?guī)硪黄獪\談js的解析順序 作用域 嚴(yán)格模式。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
js中Object.defineProperty()方法的不詳解
這篇文章主要介紹了js中Object.defineProperty()方法的不詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要為大家分享了原生js實現(xiàn)移動端瀑布流式代碼示例，對瀑布流布局感興趣的小伙伴們可以參考一下2015-12-12
JS 控制小數(shù)位數(shù)的實現(xiàn)代碼
上網(wǎng)查一查的確存在這種Bug，除了位數(shù)上控制之外也沒什么也好的方法（希望高手能提出其它思路）。2011-08-08
本文通過案例給大家介紹了JavaScript fetch接口,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
uniapp 微信默認(rèn)地圖選點功能實現(xiàn)
這篇文章主要介紹了uniapp 微信默認(rèn)地圖選點功能實現(xiàn),本文通過實例代碼效果圖展示給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
這篇文章全面解析了Bootstrap表單的使用方法，本文重點介紹Bootstrap表單按鈕，感興趣的小伙伴們可以參考一下2015-11-11
JavaScript中高級語法??表達(dá)式用法示例詳解
這篇文章主要為大家介紹了JavaScript中高級語法??表達(dá)式用法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要給大家介紹了關(guān)于微信小程序授權(quán)登錄的優(yōu)雅處理方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
javascript引用類型之時間Date和數(shù)組Array
引用類型的值（對象）其實就是引用類型的一個實例，接下來，通過本篇文章給大家介紹javascript引用類型之時間Date和數(shù)組Array，需要的朋友可以參考下2015-08-08