背景
這篇算是javascript的原則第二篇把蛔溃，前一篇主要基礎(chǔ)的講解，這篇主要會講一些數(shù)據(jù)結(jié)構(gòu)和異常處理的講解。
對象和數(shù)據(jù)結(jié)構(gòu)
JavaScript 沒有接口或類型秒梳， 所以堅持這個模式是非常困難的法绵， 因為我們沒有 public 和 private 關(guān)鍵字。 正因為如此酪碘， 使用 getters 和 setters 來訪問對象上的數(shù)據(jù)比簡單的在一個對象上查找屬性 要好得多朋譬。 “為什么？” 你可能會問兴垦， 好吧徙赢， 原因請看下面的列表：
- 當(dāng)你想在獲取一個對象屬性的背后做更多的事情時， 你不需要在代碼庫中查找和修改每一處訪問探越；
使用 set 可以讓添加驗證變得容易狡赐；
封裝內(nèi)部實現(xiàn)；
使用 getting 和 setting 時钦幔， 容易添加日志和錯誤處理枕屉；
繼承這個類， 你可以重寫默認(rèn)功能鲤氢；
你可以延遲加載對象的屬性搀擂， 比如說從服務(wù)器獲取。 - 使用 set 可以讓添加驗證變得容易铜异；
- 封裝內(nèi)部實現(xiàn)
- 使用 getting 和 setting 時哥倔， 容易添加日志和錯誤處理；
- 繼承這個類揍庄， 你可以重寫默認(rèn)功能咆蒿；
- 你可以延遲加載對象的屬性， 比如說從服務(wù)器獲取蚂子。
Bad:class BankAccount {
constructor() {
this.balance = 1000;
}
}
const bankAccount = new BankAccount();
// Buy shoes...
bankAccount.balance -= 100;
Goods：
>class BankAccount {
constructor(balance = 1000) {
this._balance = balance;
}
// It doesn't have to be prefixed with `get` or `set` to be a getter/setter
set balance(amount) {
if (verifyIfAmountCanBeSetted(amount)) {
this._balance = amount;
}
}
get balance() {
return this._balance;
}
verifyIfAmountCanBeSetted(val) {
// ...
}
}
const bankAccount = new BankAccount();
// Buy shoes...
bankAccount.balance -= shoesPrice;
// Get balance
let balance = bankAccount.balance;
私有變量
Bad:
>const Employee = function(name) {
this.name = name;
};
Employee.prototype.getName = function getName() {
return this.name;
};
const employee = new Employee('John Doe');
console.log(`Employee name: ${employee.getName()}`); // Employee name: John Doe
delete employee.name;
console.log(`Employee name: ${employee.getName()}`); // Employee name: undefined
Good:
>const Employee = function (name) {
this.getName = function getName() {
return name;
};
};
const employee = new Employee('John Doe');
console.log(`Employee name: ${employee.getName()}`); // Employee name: John Doe
delete employee.name;
console.log(`Employee name: ${employee.getName()}`); // Employee name: John Doe
類
ES2015/ES6 類優(yōu)先與 ES5
Bad:
> const Animal = function(age) {
if (!(this instanceof Animal)) {
throw new Error('Instantiate Animal with `new`');
}
this.age = age;
};
Animal.prototype.move = function move() {};
const Mammal = function(age, furColor) {
if (!(this instanceof Mammal)) {
throw new Error('Instantiate Mammal with `new`');
}
Animal.call(this, age);
this.furColor = furColor;
};
Mammal.prototype = Object.create(Animal.prototype);
Mammal.prototype.constructor = Mammal;
Mammal.prototype.liveBirth = function liveBirth() {};
const Human = function(age, furColor, languageSpoken) {
if (!(this instanceof Human)) {
throw new Error('Instantiate Human with `new`');
}
Mammal.call(this, age, furColor);
this.languageSpoken = languageSpoken;
};
Human.prototype = Object.create(Mammal.prototype);
Human.prototype.constructor = Human;
Human.prototype.speak = function speak() {};
Good:
>class Animal {
constructor(age) {
this.age = age;
}
move() { /* ... */ }
}
class Mammal extends Animal {
constructor(age, furColor) {
super(age);
this.furColor = furColor;
}
liveBirth() { /* ... */ }
}
class Human extends Mammal {
constructor(age, furColor, languageSpoken) {
super(age, furColor);
this.languageSpoken = languageSpoken;
}
speak() { /* ... */ }
}
Class 支持方法鏈
Bad:
>class Car {
constructor() {
this.make = 'Honda';
this.model = 'Accord';
this.color = 'white';
}
setMake(make) {
this.make = make;
}
setModel(model) {
this.model = model;
}
setColor(color) {
this.color = color;
}
save() {
console.log(this.make, this.model, this.color);
}
}
const car = new Car();
car.setColor('pink');
car.setMake('Ford');
car.setModel('F-150');
car.save();
Good:
>class Car {
constructor() {
this.make = 'Honda';
this.model = 'Accord';
this.color = 'white';
}
setMake(make) {
this.make = make;
// NOTE: Returning this for chaining
return this;
}
setModel(model) {
this.model = model;
// NOTE: Returning this for chaining
return this;
}
setColor(color) {
this.color = color;
// NOTE: Returning this for chaining
return this;
}
save() {
console.log(this.make, this.model, this.color);
// NOTE: Returning this for chaining
return this;
}
}
const car = new Car()
.setColor('pink')
.setMake('Ford')
.setModel('F-150')
.save();
單一職責(zé)原則 (SRP)
正如代碼整潔之道所述沃测， “永遠不要有超過一個理由來修改一個類”。
Bad：
>class UserSettings {
constructor(user) {
this.user = user;
}
changeSettings(settings) {
if (this.verifyCredentials()) {
// ...
}
}
verifyCredentials() { }
}
Good:
>class UserAuth {
constructor(user) {
this.user = user;
}
verifyCredentials() {
// ...
}
}
class UserSettings {
constructor(user) {
this.user = user;
this.auth = new UserAuth(user);
}
changeSettings(settings) {
if (this.auth.verifyCredentials()) {
// ...
}
}
}
并發(fā)
使用 Promises, 不要使用回調(diào)
Bad:
>require('request').get('https://en.wikipedia.org/wiki/Robert_Cecil_Martin', (requestErr, response) => {
if (requestErr) {
console.error(requestErr);
} else {
require('fs').writeFile('article.html', response.body, (writeErr) => {
if (writeErr) {
console.error(writeErr);
} else {
console.log('File written');
}
});
}
});
Good:
>require('request-promise').get('https://en.wikipedia.org/wiki/Robert_Cecil_Martin')
.then((response) => {
return require('fs-promise').writeFile('article.html', response);
})
.then(() => {
console.log('File written');
})
.catch((err) => {
console.error(err);
});
Async/Await 比 Promises 更加簡潔
Promises 是回調(diào)的一個非常簡潔的替代品食茎， 但是 ES2017/ES8 帶來的 async 和 await 提供了一個 更加簡潔的解決方案蒂破。 你需要的只是一個前綴為 async 關(guān)鍵字的函數(shù)， 接下來就可以不需要 then 函數(shù)鏈來編寫邏輯了别渔。
Bad:
>require('request-promise').get('https://en.wikipedia.org/wiki/Robert_Cecil_Martin')
.then((response) => {
return require('fs-promise').writeFile('article.html', response);
})
.then(() => {
console.log('File written');
})
.catch((err) => {
console.error(err);
});
Good:
>async function getCleanCodeArticle() {
try {
const response = await require('request-promise').get('https://en.wikipedia.org/wiki/Robert_Cecil_Martin');
await require('fs-promise').writeFile('article.html', response);
console.log('File written');
} catch(err) {
console.error(err);
}
}
格式化
使用一致的大小寫
JavaScript 是無類型的附迷， 所以大小寫告訴你關(guān)于你的變量、 函數(shù)等的很多事情哎媚。 這些規(guī)則是主觀的喇伯， 所以你的團隊可以選擇他們想要的。 重點是拨与， 不管你們選擇了什么稻据， 要保持一致。
Bad:
>const DAYS_IN_WEEK = 7;
const daysInMonth = 30;
const songs = ['Back In Black', 'Stairway to Heaven', 'Hey Jude'];
const Artists = ['ACDC', 'Led Zeppelin', 'The Beatles'];
function eraseDatabase() {}
function restore_database() {}
class animal {}
class Alpaca {}
Good:
>const DAYS_IN_WEEK = 7;
const DAYS_IN_MONTH = 30;
const songs = ['Back In Black', 'Stairway to Heaven', 'Hey Jude'];
const artists = ['ACDC', 'Led Zeppelin', 'The Beatles'];
function eraseDatabase() {}
function restoreDatabase() {}
class Animal {}
class Alpaca {}
注釋
代碼能夠說清的盡量不要寫注釋
Bad:
>function hashIt(data) {
// The hash
let hash = 0;
// Length of string
const length = data.length;
// Loop through every character in data
for (let i = 0; i < length; i++) {
// Get character code.
const char = data.charCodeAt(i);
// Make the hash
hash = ((hash << 5) - hash) + char;
// Convert to 32-bit integer
hash &= hash;
}
}
Good:
>function hashIt(data) {
let hash = 0;
const length = data.length;
for (let i = 0; i < length; i++) {
const char = data.charCodeAt(i);
hash = ((hash << 5) - hash) + char;
// Convert to 32-bit integer
hash &= hash;
}
}
不要有日志式的評論
要用版本控制來查看評論
Bad:
>/** 2016-12-20: Removed monads, didn't understand them (RM)
2016-10-01: Improved using special monads (JP)
2016-02-03: Removed type-checking (LI)
2015-03-14: Added combine with type-checking (JR)
*/
function combine(a, b) {
return a + b;
}
Good：
>function combine(a, b) {
return a + b;
}
千里之行买喧，始于足下捻悯。
