這篇文章主要介紹如何編寫JavaScript代碼,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
目前創(chuàng)新互聯(lián)建站已為超過(guò)千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、禪城網(wǎng)站維護(hù)等服務(wù),公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng),共同發(fā)展。
如果你對(duì)于代碼,除了關(guān)注是否能準(zhǔn)確的執(zhí)行業(yè)務(wù)邏輯,還關(guān)心代碼本身是怎么寫的,是否易讀,那么你應(yīng)該會(huì)關(guān)注如何寫出干凈優(yōu)雅的代碼。作為專業(yè)的工程師,除了保證自己的代碼沒(méi)有bug,能正確的完成業(yè)務(wù)邏輯,還應(yīng)該保證幾個(gè)月后的自己,或者其他工程師,也能夠維護(hù)自己的代碼。你寫的每一段代碼,通常情況下,都不會(huì)是 一次性 工作,通常伴隨著后續(xù)的不斷迭代。如果代碼不夠優(yōu)雅,那么將來(lái)維護(hù)這段代碼的人(甚至你自己),都將感到非常痛苦。祈禱吧,將來(lái)面對(duì)這些糟糕代碼的人,不是你自己,而是別人。
OK,我們先來(lái)簡(jiǎn)單定義下,什么是 干凈優(yōu)雅 的代碼:干凈優(yōu)雅的代碼,應(yīng)該是自解釋的,容易看懂的,并且很容易修改或者擴(kuò)展一些功能 。
現(xiàn)在,靜下來(lái)回憶一下,有多少次,當(dāng)你接手前輩留下來(lái)的糟糕代碼而懵逼時(shí),心里默默的說(shuō)過(guò) "我*"的:
"我*,那是啥玩意兒"
"我*,這段代碼是干啥的”
"我*,這個(gè)變量又是干啥的"
嗯,下面這個(gè)圖片完美的展示了這種情形:
引用 Robert C. Martin 的名言來(lái)說(shuō)明這種情況:
丑陋的代碼也能實(shí)現(xiàn)功能。但是不夠優(yōu)雅的代碼,往往會(huì)讓整個(gè)開(kāi)發(fā)團(tuán)隊(duì)都跪在地上哭泣。
在這篇文章里,我主要講下載 JavaScript里怎么書寫干凈優(yōu)雅的代碼,但是對(duì)于其他編程語(yǔ)言,道理也是類似的。
JavaScript優(yōu)雅代碼的最佳實(shí)踐
1. 強(qiáng)類型校驗(yàn)
使用 === 而不是 == 。
// 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)該包含它所對(duì)應(yīng)的真實(shí)含義。這樣更容易在代碼里搜索,并且其他人看到這些變量,也更容易理解。
錯(cuò)誤的示范
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;
不要在變量名中加入不必要的單詞。
錯(cuò)誤的示范
let nameValue; let theProduct;
正確的示范
let name; let product;
不要強(qiáng)迫開(kāi)發(fā)者去記住變量名的上下文。
錯(cuò)誤的示范
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); });
不要在變量名中添加多余的上下文信息。
錯(cuò)誤的示范
const user = { userName: "John", userSurname: "Doe", userAge: "28" }; ... user.userName;
正確的示范
const user = { name: "John", surname: "Doe", age: "28" }; ... user.name;
3. 函數(shù)相關(guān)
盡量使用足夠長(zhǎng)的能夠描述函數(shù)功能的命名。通常函數(shù)都會(huì)執(zhí)行一個(gè)明確的動(dòng)作或意圖,那么函數(shù)名就應(yīng)該是能夠描述這個(gè)意圖一個(gè)動(dòng)詞或者表達(dá)語(yǔ)句,包含函數(shù)的參數(shù)命名也應(yīng)該能清晰的表達(dá)具體參數(shù)的含義。
錯(cuò)誤的示范
function notif(user) { // implementation }
正確的示范
function notifyUser(emailAddress) { // implementation }
避免函數(shù)有太多的形參。比較理想的情況下,一個(gè)函數(shù)的參數(shù)應(yīng)該 <=2個(gè) 。函數(shù)的參數(shù)越少,越容易測(cè)試。
錯(cuò)誤的示范
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ù)的某個(gè)參數(shù)有默認(rèn)值,那么應(yīng)該使用新的參數(shù)默認(rèn)值語(yǔ)法,而不是在函數(shù)里使用 || 來(lái)判斷。
錯(cuò)誤的示范
function createShape(type) { const shapeType = type || "cube"; // ... }
正確的示范
function createShape(type = "cube") { // ... }
一個(gè)函數(shù)應(yīng)該做一件事情。避免在一個(gè)函數(shù)里,實(shí)現(xiàn)多個(gè)動(dòng)作。
錯(cuò)誤的示范
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 來(lái)給對(duì)象設(shè)置默認(rèn)值。
錯(cuò)誤的示范
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ù)實(shí)現(xiàn)了過(guò)多的邏輯。
錯(cuò)誤的示范
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ù)、原生對(duì)象的 prototype。如果你需要擴(kuò)展一個(gè)原生提供的對(duì)象,那么應(yīng)該使用 ES新的 類和繼承語(yǔ)法來(lái)創(chuàng)造新的對(duì)象,而不是去修改原生對(duì)象的prototype 。
錯(cuò)誤的示范
Array.prototype.myFunc = function myFunc() { // implementation };
正確的示范
class SuperArray extends Array { myFunc() { // implementation } }
4. 條件分支
不要用函數(shù)來(lái)實(shí)現(xiàn) 否定 的判斷。比如判斷用戶是否合法,應(yīng)該提供函數(shù) isUserValid() ,而不是實(shí)現(xiàn)函數(shù)isUserNotValid() 。
錯(cuò)誤的示范
function isUserNotBlocked(user) { // implementation } if (!isUserNotBlocked(user)) { // implementation }
正確的示范
function isUserBlocked(user) { // implementation } if (isUserBlocked(user)) { // implementation }
在你明確知道一個(gè)變量類型是 boolean 的情況下,條件判斷使用 簡(jiǎn)寫。這確實(shí)是顯而易見(jiàn)的,前提是你能明確這個(gè)變量是boolean類型,而不是 null 或者 undefined 。
錯(cuò)誤的示范
if (isValid === true) { // do something... } if (isValid === false) { // do something... }
正確的示范
if (isValid) { // do something... } if (!isValid) { // do something... }
在可能的情況下,盡量 避免 使用條件分支。優(yōu)先使用 多態(tài) 和 繼承 來(lái)實(shí)現(xiàn)代替條件分支。
錯(cuò)誤的示范
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ī)范引入的語(yǔ)法糖。類的實(shí)現(xiàn)和以前 ES5 里使用 prototype 的實(shí)現(xiàn)完全一樣,只是它看上去更簡(jiǎn)潔,你應(yīng)該優(yōu)先使用新的類的語(yǔ)法。
錯(cuò)誤的示范
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)用。很多開(kāi)源的JS庫(kù),都引入了函數(shù)的鏈?zhǔn)秸{(diào)用,比如 jQuery 和 Lodash 。鏈?zhǔn)秸{(diào)用會(huì)讓代碼更加簡(jiǎn)潔。在 class 的實(shí)現(xiàn)里,只需要簡(jiǎn)單的在每個(gè)方法最后都返回 this,就能實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用了。
錯(cuò)誤的示范
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. 避免冗余代碼
通常來(lái)講,我們應(yīng)該避免重復(fù)寫相同的代碼,不應(yīng)該有未被用到的函數(shù)或者死代碼(永遠(yuǎn)也不會(huì)執(zhí)行到的代碼)的存在。
我們太容易就會(huì)寫出重復(fù)冗余的代碼。舉個(gè)栗子,有兩個(gè)組件,他們大部分的邏輯都一樣,但是可能由于一小部分差異,或者臨近交付時(shí)間,導(dǎo)致你選擇了把代碼拷貝了一份來(lái)修改。在這種場(chǎng)景下,要去掉冗余的代碼,只能進(jìn)一步提高組建的抽象程度。
至于死代碼,正如它名字所代表的含義。這些代碼的存在,可能是在你開(kāi)發(fā)中的某個(gè)階段,你發(fā)現(xiàn)某段代碼完全用不上了,于是就把它們放在那兒,而沒(méi)有刪除掉。你應(yīng)該在代碼里找出這樣的代碼,并且刪掉這些永遠(yuǎn)不會(huì)執(zhí)行的函數(shù)或者代碼塊。我能給你的惟一建議,就是當(dāng)你決定某段代碼再也不用時(shí),就立即刪掉它,否則晚些時(shí)候,可能你自己也會(huì)忘記這些代碼是干神馬的。
當(dāng)你面對(duì)這些死代碼時(shí),可能會(huì)像下面這張圖所描繪的一樣:
結(jié)論
上面這些建議,只是一部分能提升你代碼的實(shí)踐。我在這里列出這些點(diǎn),是工程師經(jīng)常會(huì)違背的。他們或許嘗試遵守這些實(shí)踐,但是由于各種原因,有的時(shí)候也沒(méi)能做到?;蛟S當(dāng)我們?cè)陧?xiàng)目的初始階段,確實(shí)很好的遵守了這些實(shí)踐,保持了干凈優(yōu)雅的代碼,但是隨著項(xiàng)目上線時(shí)間的臨近,很多準(zhǔn)則都被忽略了,盡管我們會(huì)在忽略的地方備注上TODO 或者REFACTOR (但正如你所知道的,通常 later也就意味著never)。
OK,就這樣吧,希望我們都能夠努力踐行這些最佳實(shí)踐,寫出 干凈優(yōu)雅 的代碼 ?
以上是“如何編寫JavaScript代碼”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)站欄目:如何編寫JavaScript代碼
文章起源:http://bm7419.com/article20/jcijco.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供做網(wǎng)站、品牌網(wǎng)站制作、定制開(kāi)發(fā)、網(wǎng)站策劃、軟件開(kāi)發(fā)、全網(wǎng)營(yíng)銷推廣
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)