有沒有似曾相識
如果你對于代碼，除了關注是否能準確的執行業務邏輯，還關心代碼本身是怎么寫的，是否易讀，那么你應該會關注如何寫出干凈優雅的代碼。作為專業的工程師，除了保證自己的代碼沒有bug，能正確的完成業務邏輯，還應該保證幾個月后的自己，或者其他工程師，也能夠維護自己的代碼。你寫的每一段代碼，通常情況下，都不會是 一次性 工作，通常伴隨著后續的不斷迭代。如果代碼不夠優雅，那么將來維護這段代碼的人(甚至你自己)，都將感到非常痛苦。祈禱吧，將來面對這些糟糕代碼的人，不是你自己，而是別人。
OK，我們先來簡單定義下，什么是 干凈優雅 的代碼：干凈優雅的代碼，應該是自解釋的，容易看懂的，并且很容易修改或者擴展一些功能 。
現在，靜下來回憶一下，有多少次，當你接手前輩留下來的糟糕代碼而懵逼時，心里默默的說過 "我*"的：
"我*，那是啥玩意兒"
"我*，這段代碼是干啥的”
"我*，這個變量又是干啥的"
嗯，下面這個圖片完美的展示了這種情形：
引用 Robert C. Martin 的名言來說明這種情況：
丑陋的代碼也能實現功能。但是不夠優雅的代碼，往往會讓整個開發團隊都跪在地上哭泣。
在這篇文章里，我主要講下載 JavaScript里怎么書寫干凈優雅的代碼，但是對于其他編程語言，道理也是類似的。
JavaScript優雅代碼的最佳實踐
1. 強類型校驗
使用 === 而不是 == 。
// 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 // true0 === false // false2 == "2" // true2 === "2" // false// exampleconst value = "500";if (value === 500) {console.log(value);// it will not be reached}if (value === "500") {console.log(value);// it will be reached}2. 變量命名
變量、字段命名，應該包含它所對應的真實含義。這樣更容易在代碼里搜索，并且其他人看到這些變量，也更容易理解。
錯誤的示范
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;
不要強迫開發者去記住變量名的上下文。
錯誤的示范
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. 函數相關
盡量使用足夠長的能夠描述函數功能的命名。通常函數都會執行一個明確的動作或意圖，那么函數名就應該是能夠描述這個意圖一個動詞或者表達語句，包含函數的參數命名也應該能清晰的表達具體參數的含義。
錯誤的示范
function notif(user) {// implementation}正確的示范
function notifyUser(emailAddress) {// implementation}避免函數有太多的形參。比較理想的情況下，一個函數的參數應該 <=2個 。函數的參數越少，越容易測試。
錯誤的示范
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'});如果函數的某個參數有默認值，那么應該使用新的參數默認值語法，而不是在函數里使用 || 來判斷。
錯誤的示范
function createShape(type) {const shapeType = type || "cube";// ...}正確的示范
function createShape(type = "cube") {// ...}一個函數應該做一件事情。避免在一個函數里，實現多個動作。
錯誤的示范
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 來給對象設置默認值。
錯誤的示范
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);不要在函數參數中，包括某些標記參數，通常這意味著你的函數實現了過多的邏輯。
錯誤的示范
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}`);}不要污染全局變量、函數、原生對象的 prototype。如果你需要擴展一個原生提供的對象，那么應該使用 ES新的 類和繼承語法來創造新的對象，而不是去修改原生對象的prototype 。
錯誤的示范
Array.prototype.myFunc = function myFunc() {// implementation};正確的示范
class SuperArray extends Array {myFunc() {// implementation}}4. 條件分支
不要用函數來實現 否定 的判斷。比如判斷用戶是否合法，應該提供函數 isUserValid() ，而不是實現函數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...}在可能的情況下，盡量 避免 使用條件分支。優先使用 多態 和 繼承 來實現代替條件分支。
錯誤的示范
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里，類是新規范引入的語法糖。類的實現和以前 ES5 里使用 prototype 的實現完全一樣，只是它看上去更簡潔，你應該優先使用新的類的語法。
錯誤的示范
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() {/* ... */}}使用方法的 鏈式調用。很多開源的JS庫，都引入了函數的鏈式調用，比如 jQuery 和 Lodash 。鏈式調用會讓代碼更加簡潔。在 class 的實現里，只需要簡單的在每個方法最后都返回 this，就能實現鏈式調用了。
錯誤的示范
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 chainingreturn this;}setAge(age) {this.age = age;// Return this for chainingreturn this;}save() {console.log(this.name, this.surname, this.age);// Return this for chainingreturn this;}}const person = new Person("John").setSurname("Doe").setAge(29).save();6. 避免冗余代碼
通常來講，我們應該避免重復寫相同的代碼，不應該有未被用到的函數或者死代碼(永遠也不會執行到的代碼)的存在。
我們太容易就會寫出重復冗余的代碼。舉個栗子，有兩個組件，他們大部分的邏輯都一樣，但是可能由于一小部分差異，或者臨近交付時間，導致你選擇了把代碼拷貝了一份來修改。在這種場景下，要去掉冗余的代碼，只能進一步提高組建的抽象程度。
至于死代碼，正如它名字所代表的含義。這些代碼的存在，可能是在你開發中的某個階段，你發現某段代碼完全用不上了，于是就把它們放在那兒，而沒有刪除掉。你應該在代碼里找出這樣的代碼，并且刪掉這些永遠不會執行的函數或者代碼塊。我能給你的惟一建議，就是當你決定某段代碼再也不用時，就立即刪掉它，否則晚些時候，可能你自己也會忘記這些代碼是干神馬的。
當你面對這些死代碼時，可能會像下面這張圖所描繪的一樣：
結論
上面這些建議，只是一部分能提升你代碼的實踐。我在這里列出這些點，是工程師經常會違背的。他們或許嘗試遵守這些實踐，但是由于各種原因，有的時候也沒能做到?；蛟S當我們在項目的初始階段，確實很好的遵守了這些實踐，保持了干凈優雅的代碼，但是隨著項目上線時間的臨近，很多準則都被忽略了，盡管我們會在忽略的地方備注上TODO 或者REFACTOR (但正如你所知道的，通常 later也就意味著never)。
OK，就這樣吧，希望我們都能夠努力踐行這些最佳實踐，寫出 干凈優雅 的代碼 ☺
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
