Dark Mode

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Clean Code concepts adapted for JavaScript (Wu Xia De Cheng Shi Ma JavaScript)

License

Notifications You must be signed in to change notification settings

trylovetom/clean-code-javascript

Folders and files

NameName
Last commit message
Last commit date

Latest commit

History

518 Commits

Repository files navigation

Wu Xia De Cheng Shi Ma JavaScript

Yuan Zuo : https://github.com/ryanmcdermott/clean-code-javascript
Yuan Zuo Zhe : https://github.com/ryanmcdermott
Yi Zhe : https://github.com/trylovetom

Mu Lu (Table of Contents)

  1. Jie Shao (Introduction)
  2. Bian Shu (Variables)
  3. Han Shu (Functions)
  4. Wu Jian (Objects)Yu Zi Liao Jie Gou (Data Structures)
  5. Lei Bie (Classes)
  6. Wu Jian Dao Xiang Ji Ben Yuan Ze (SOLID)
  7. Ce Shi (Testing)
  8. Bing Fa (Concurrency)
  9. Cuo Wu Chu Li (Error Handling)
  10. Ge Shi Hua (Formatting)
  11. Zhu Jie (Comments)
  12. Fan Yi (Translation)

Jie Shao (Introduction)


Tou Guo Ji Suan Yue Du Cheng Shi Ma Shi De Zhou Ma Ci Shu ,Lai Ping Gu Ruan Ti Pin Zhi

Wen Zhang Zuo Zhe Gen Ju Robert C. Martin De <> ,Zhuan Xie Yi Fen Shi Yong Yu JavaScript De Yuan Ze . Ben Wen Bu Shi Feng Ge Zhi Nan (Style Guide),Er Shi Jiao Dao Ni Zhuan Xie Chu Ke Yue Du , Ke Zhong Fu Shi Yong Yu Ke Zhong Gou De JS Cheng Shi Ma .

Zhu Yi !Ni Bu Bi Yan Ge Zun Shou Mei Yi Xiang Yuan Ze ,You Xie Shen Zhi Bu Bei Da Zhong Suo Ren Tong . Sui Ran Zhe Zhi Shi Fen Zhi Nan ,Que Shi Lai Zi <> Zuo Zhe De Duo Nian Jie Jing .

Ruan Ti Gong Cheng Zhi Fa Zhan Liao Wu Shi Nian ,Reng Ran You Hen Duo Di Fang Zhi De Qu Tan Tao . Dang Ruan Ti Yu Jian Zhu Yi Yang Gu Lao Shi ,Ye Xu Hui You Yi Xie Mo Shou Cheng Gui De Yuan Ze . Dan Xian Zai ,Xian Rang Zhe Fen Zhi Nan Dang Shi Jin Shi ,Zuo Wei Ni He Tuan Dui De JS Cheng Shi Ma Biao Zhun .

Huan You Yi Jian Shi Qing :Zhi Dao Zhe Xie Yuan Ze ,Bing Bu Hui Li Ke Rang Ni Cheng Wei Chu Se De Kai Fa Zhe ,Chang Qi Feng Xing Ta Men ,Bu Dai Biao Ni Neng Gao Zhen Wu You Bu Zai Fan Cuo . Dan Shi ,Qian Li Zhi Xing ,Shi Yu Zu Xia ,Shi Chang Yu Zhi Tong Dao He Men Jin Xing Tao Lun (Code Review),Gai Shan Bu Wan Bei Zhi Chu . Bu Yao Yin Wei Zi Ji Xie Chu Lai De Cheng Shi Ma Hen Zao Gao Er Hai Pa Fen Xiang ,Er Shi Yao Wei Ju Zi Ji Ju Ran Xie Chu Liao Zhe Yang De Cheng Shi Ma !

Yi Zhe Xu

Xian Gei Ao Jiao Wen Chuang De Suo You Gong Cheng Shi Huo Ban ,Yu Re Ai JavaScript De Ge Wei .

<> Shi Yi Ben Hao Shu ,Shi Bu Ke Fou Ren Zhe Ge Shi Shi . Wo Re Ai Zhu JS,Dang Zhao Dao Zhe Fen JS Ban Ben De Hou ,Wo Wu Bi Kai Xin Li Ke Zhu Shou Fan Yi ,Yin Ci You Liao Zhe Fen <> . Dui Yu Clean Code De Shu Ming Cai Yong Bo Shuo Wen Hua De Fan Yi ,Ye Shi Dui Yuan Ban Yi Zhe De Zun Jing . Ben Fan Yi Zhong Hui Chuan Cha Yi Xie Wo Dui Wen Zhang Zhong Zhu Jie ,Ye Qing Du Zhe Yuan Liang Wo De Tao Rao . Ling Wai Zhuan Ye Shu Yu De Fan Yi You Ke Neng Hui You Chu Ru ,Wo Hui Biao Shi Chu Ying Wen Yuan Wen ,Bi Mian Du Zhe Wu Jie . Ru You Fan Yi Huo Shi Li Jie Shang De Cuo Wu ,Fan Qing Lian Luo Wo ,Xie Xie . (Lian Luo Fang Shi Zai Shang Fang ,Wo De GitHub Zhong . )

Bian Shu (Variables)

Shi Yong Ju You Yi Yi Qie Ke Yue Du De Ming Cheng

Zao Gao De :

const yyyymmdstr = moment().format('YYYY/MM/DD');

Shi Dang De :

const currentDate = moment().format('YYYY/MM/DD');

Hui Dao Mu Lu

Xiang Tong Lei Xing De Bian Shu Shi Yong Xiang Tong De Ming Cheng

Zao Gao De :

getUserInfo();
getClientData();
getCustomerRecord();

Shi Dang De :

getUser();

Hui Dao Mu Lu

Shi Yong Ke Sou Xun De Ming Cheng

Shi Yong Yi Yu Yue Du Yu Sou Xun De Ming Cheng Fei Chang Zhong Yao ,Yin Wei Wo Men Yao Yue Du De Cheng Shi Ma Yuan Bi Zi Ji Xie De Duo . Shi Yong Mei You Yi Yi De Ming Cheng ,Hui Dao Zhi Cheng Shi Ma Nan Yi Li Jie ,Dui Hou Xu Yue Du Zhe Shi Ge Zao Gao De Ti Yan . Ling Wai Shi Yong Yi Xia Gong Ju ,Ke Yi Xie Zhu Ni Zhao Chu Wei Ming Ming De Chang Shu :

Zao Gao De :

// 86400000 Dai Biao Shi Mo Yi Yi ?
setTimeout(blastOff, 86400000);

Shi Dang De :

// Xuan Gao (Declare)Yi Ge You Yi Yi De Chang Shu (constants)
const MILLISECONDS_IN_A_DAY = 86400000;

setTimeout(blastOff, MILLISECONDS_IN_A_DAY);

Hui Dao Mu Lu

Shi Yong Ke Jie Shi De Bian Shu

Zao Gao De :

const address = 'One Infinite Loop, Cupertino 95014';
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
saveCityZipCode(
address.match(cityZipCodeRegex)[1],
address.match(cityZipCodeRegex)[2]
);

Shi Dang De :

const address = 'One Infinite Loop, Cupertino 95014';
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
const [_, city, zipCode] = address.match(cityZipCodeRegex) || [];
saveCityZipCode(city, zipCode);

Yi Zhe Fu Zhu

address.match(cityZipCodeRegex) Qu Chu Liao Zi Chuan Zhong De city Yu zipCode Bing Yi Zhen Lie (Array)De Fang Shi Shu Chu . Zai Zao Gao De Fan Li Zhong ,Ni Bu Hui Zhi Dao Na Ge Shi city,Na Ge Shi zipCode. Zai Shi Dang De Fan Li Zhong ,Ze Qing Chu Di Jie Shi Liao .

Hui Dao Mu Lu

Bi Mian Xin Li Zuo Yong (Mental Mapping)

Qing Xi (Explicit)De Biao Da Hui Bi Yin Cang (Implicit)Geng Hao .

Zao Gao De :

{ doStuff(); doSomeOtherStuff(); // ... // ... // ... // Deng Deng ,Zhe `l` Shi ...? dispatch(l); });">const locations = ['Austin', 'New York', 'San Francisco'];
locations.forEach(l => {
doStuff();
doSomeOtherStuff();
// ...
// ...
// ...
// Deng Deng ,Zhe `l` Shi ...?
dispatch(l);
});

Shi Dang De :

{ doStuff(); doSomeOtherStuff(); // ... // ... // ... dispatch(location); });">const locations = ['Austin', 'New York', 'San Francisco'];
locations.forEach(location => {
doStuff();
doSomeOtherStuff();
// ...
// ...
// ...
dispatch(location);
});

Yi Zhe Fu Zhu

Zai Zao Gao De Fan Li Zhong ,Cheng Shi Ma De Zuo Zhe Ren Wei Cong locations Qu Chu De Du Shi Di Zhi ,Suo Yi Xuan Yong Suo Jian Hou De l Zuo Wei Ming Cheng . Bu Guo Zhe Zhi You Zuo Zhe Zi Ji Zhe Mo Ren Wei ,Qi Ta Ren Ke Bu Yi Ding Zhi Dao . Bi Mian [Wo Ren Wei ] , [Wo Yi Wei ] , [Wo Jue De ] ,Zhe Yang De Xin Li Zuo Yong .

Hui Dao Mu Lu

Bi Mian Shi Yong Bu Bi Yao De Miao Shu (Context)

Ru Guo Ni De Lei Bie Yu Wu Jian Ming Cheng Shi You Guan Lian Yi Yi De ,Jiu Bu Yong Zai Nei Bu Bian Shu Shang Zai Ci Zhong Fu .

Zao Gao De :

const Car = {
carMake: 'Honda',
carModel: 'Accord',
carColor: 'Blue'
};

function paintCar(car, color) {
car.carColor = color;
}

Shi Dang De :

const Car = {
make: 'Honda',
model: 'Accord',
color: 'Blue'
};

function paintCar(color) {
car.color = color;
}

Hui Dao Mu Lu

Shi Yong Yu She Can Shu (Parameter)Dai Ti Tiao Jian Pan Duan (Conditionals)

Shi Yong Yu She Can Shu Jiao Zheng Jie ,Dan Qing Zhu Yi ,Dang Can Shu Wei undefined Shi Cai Hui Zuo Yong ,Qi Ta Zhong Lei De Xu Zhi (Falsy)Bu Hui ,Xiang Shi '', false, null, 0, NaN Deng .

Zao Gao De :

function createMicrobrewery(name) {
const breweryName = name || 'Hipster Brew Co.';
// ...
}

Shi Dang De :

function createMicrobrewery(name = 'Hipster Brew Co.') {
// ...
}

Yi Zhe Fu Zhu

Yu She Can Shu Fei Chang Hao Yong ,Ke Yi Jie He Gong Chang Mo Shi Zuo Chu Hen Duo Ying Yong . Ling Wai Jian Yi Tong Yi Shi Yong undefined Dai Ti null Dang Zuo Kong Zhi De Hui Chuan Zhi .

Ci Chu Yuan Wen Wei Arguments,Dan Shi Han Shu De Can Shu Ding Yi Ying Gai Wei Parameter,Er Hu Jiao Han Shu Shi Chuan Di De Yin Shu Cai Shi Arguments.

Hui Dao Mu Lu

Han Shu (Functions)

Can Shu (Parameter) (Shao Yu 2 Ge Jiao Jia )

Xian Zhi Han Shu De Can Shu Shu Liang Fei Chang Zhong Yao ,Yin Wei Neng Rang Ni Geng Rong Yi Di Ce Shi . Guo Duo De Can Shu Dai Biao Zhu Guo Duo De Zu He ,Hui Dao Zhi Ni Bu De Bu Bian Xie Chu Da Liang Ce Shi .

Yi Ge Zhi Er Ge Shi Zui Li Xiang De ,Jin Ke Neng Bi Mian Da Yu San Ge Yi Shang . Ru Guo Ni You Chao Guo Liang Ge Yi Shang De Can Shu ,Dai Biao Ni De Han Shu Zuo Tai Duo Shi Qing . Ru Guo Wu Fa Bi Mian Shi ,Ke Yi You Xiao Di Shi Yong Wu Jian Ti Dai Da Liang De Can Shu .

Wei Liao Rang Ni Ke Yi Qing Xi Di Biao Da ,Yu Qi Shi Yong Na Xie Wu Jian De Shu Xing (Properties),Ke Yi Shi Yong ES2015/ES6 Ti Gong De Jie Gou (Destructuring)Yu Fa . Shi Yong Zhe Zhong Yu Fa You Yi Xia You Dian :

  1. Han Shu Xu Yao Wu Jian De Na Xie Shu Xing ,Ke Yi Xiang Can Shu Yi Yang Qing Xi Di Biao Da .
  2. Jie Gou Yu Fa Hui Fu Zhi Lai Zi Wu Jian De Yuan Shi Xing Tai (Primitive),Zhe Neng Bang Zhu Ni Bi Mian Fu Zuo Yong (Side Effect). Zhu Yi !Chao Zhuang Wu Jian Yu Zhen Lie ,Bing Bu Hui Bei Jie Gou Yu Fa Fu Zhi .
  3. Shi Yong Jie Gou Yu Fa Neng Rang Wu Jian Shu Xing Bei Cheng Shi Ma Jian Cha Qi (Linter)Zuo Yong ,Ti Xing Ni Na Xie Shu Xing Wei Bei Shi Yong Dao .

Zao Gao De :

function createMenu(title, body, buttonText, cancellable) {
// ...
}

Shi Dang De :

function createMenu({ title, body, buttonText, cancellable }) {
// ...
}

createMenu({
title: 'Foo',
body: 'Bar',
buttonText: 'Baz',
cancellable: true
});

Yi Zhe Fu Zhu

Zhe Zhong Fang Fa Fei Chang Shi He Yong Yu Gong Chang Mo Shi ,Jie He Shang Yi Zhang De Yu She Can Shu ,Yi Zhe Tui Jian De Shi Yong Fang Shi Ru Xia :

function createMenu({
title = 'Default Title', // Chuan Di De Wu Jian Bu Qi Quan ,Shi Yong Yu She Shu Xing
body = '',
buttonText = 'My Button',
cancellable = true
} = {}) { // Ru Wei Chuan Di Ren He Can Shu Shi Yong Yu She Kong Wu Jian ,Shi Yong `= {}` Ke Bi Mian TypeError: Cannot destructure property `...` of 'undefined' or 'null'.
return {
title,
body,
buttonText,
cancellable
}
}

const myMenu = createMenu({
title: 'Foo',
body: 'Bar',
buttonText: 'Baz',
cancellable: true
});

Xiang Liao Jie Geng Duo Gong Chang Mo Shi Yu ES6 De Jie He ,Ke Can Kao Lian Jie Wen Zhang :JavaScript Factory Functions with ES6+.

Hui Dao Mu Lu

Yi Ge Han Shu Zhi Zuo Yi Jian Shi Qing (Dan Yi Xing )

Zhe Shi Ge Fei Chang Zhong Yao De Yuan Ze ,Dang Ni De Han Shu Zuo Chao Guo Yi Jian Shi Qing Shi ,Ta Hui Geng Nan Yi Bei Zhuan Xie , Ce Shi Yu Li Jie . Dang Ni Ge Li (Isolate)Ni De Han Shu Dao Zhi Zuo Yi Jian Shi Qing Shi ,Ta Neng Geng Rong Yi Di Bei Zhong Gou (Refactor)Yu Qing Xi Di Yue Du . Ru Guo Yan Ge Zun Shou Ci Xiang Yuan Ze ,Ni Jiang Hui Ling Xian Xu Duo Kai Fa Zhe .

Zao Gao De :

function emailClients(clients) {
clients.forEach(client => {
const clientRecord = database.lookup(client);
if (clientRecord.isActive()) {
email(client);
}
});
}

Shi Dang De :

function emailActiveClients(clients) {
clients.filter(isActiveClient).forEach(email);
}

function isActiveClient(client) {
const clientRecord = database.lookup(client);
return clientRecord.isActive();
}

Hui Dao Mu Lu

Han Shu Ming Cheng Ying Gai Shuo Ming Ta Zuo De Nei Rong

Zao Gao De :

function addToDate(date, month) {
// ...
}

const date = new Date();

// Nan Yi Cong Han Shu Ming Cheng Kan Chu Dao Di Jia Ru Liao Shi Mo
addToDate(date, 1);

Shi Dang De :

function addMonthToDate(month, date) {
// ...
}

const date = new Date();
addMonthToDate(1, date);

Yi Zhe Fu Zhu

Jian Yi Han Shu Ming Ming Yi Dong Ci Kai Tou ,Xiang Shi doSomething(), setupUserProfile().

Hui Dao Mu Lu

Han Shu Ying Gai Zhi Zuo Yi Ceng Chou Xiang (Abstraction)

Dang Ni De Han Shu Xu Yao De Chou Xiang Duo Yu Yi Ceng Shi ,Dai Biao Ni De Han Shu Zuo Tai Duo Shi Qing Liao . Jiang Qi Fen Jie Yi Li Zhong Yong Yu Ce Shi .

Zao Gao De :

{ statements.forEach(statement => { // ... }); }); const ast = []; tokens.forEach(token => { // lex... }); ast.forEach(node => { // parse... }); }">function parseBetterJSAlternative(code) {
const REGEXES = [
// ...
];

const statements = code.split(' ');
const tokens = [];
REGEXES.forEach(REGEX => {
statements.forEach(statement => {
// ...
});
});

const ast = [];
tokens.forEach(token => {
// lex...
});

ast.forEach(node => {
// parse...
});
}

Shi Dang De :

{ statements.forEach(statement => { tokens.push(/* ... */); }); }); return tokens; } function parse(tokens) { const syntaxTree = []; tokens.forEach(token => { syntaxTree.push(/* ... */); }); return syntaxTree; }">function parseBetterJSAlternative(code) {
const tokens = tokenize(code);
const syntaxTree = parse(tokens);
syntaxTree.forEach(node => {
// parse...
});
}

function tokenize(code) {
const REGEXES = [
// ...
];

const statements = code.split(' ');
const tokens = [];
REGEXES.forEach(REGEX => {
statements.forEach(statement => {
tokens.push(/* ... */);
});
});

return tokens;
}

function parse(tokens) {
const syntaxTree = [];
tokens.forEach(token => {
syntaxTree.push(/* ... */);
});

return syntaxTree;
}

Yi Zhe Fu Zhu

Zhe Ge Yuan Ze Yu Qian Mian Ti Dao De [Yi Ge Han Shu Zhi Zuo Yi Jian Shi Qing (Dan Yi Xing )] Gai Nian Xiang Si .

Hui Dao Mu Lu

Yi Chu Zhong Fu De (Duplicate)Cheng Shi Ma

Jue Dui Bi Mian Zhong Fu De Cheng Shi Ma ,Zhong Fu De Cheng Shi Ma Dai Biao Zhu Geng Dong Luo Ji Shi ,Xu Yao Tong Shi Xiu Gai Duo Chu .

Xiang Xiang Yi Xia Ni Jing Ying Zhu Yi Jia Can Ting ,Xu Yao Chi Xu Zhui Zong Cun Huo :Fan Qie , Yang Cong , Da Suan Yu Ge Zhong Xiang Liao Deng . Ru Guo Ni You Duo Fen Ji Lu Biao ,Dang Shi Yong Fan Qie Zuo Wan Yi Dao Liao Li Shi ,Xu Yao Geng Xin Duo Fen Ji Lu Biao ,Ke Neng Hui Wang Ji Geng Xin Qi Zhong Yi Fen . Ru Guo Ni Zhi You Yi Fen Ji Lu Biao ,Jiu Bu Hui You Ci Wen Ti !

Tong Chang Zhong Fu De Cheng Shi Ma ,Shi Yin Wei You Liang Ge Shao Wei Bu Tong De Dong Xi . Ta Men Zhi Jian Jue Da Bu Fen Xiang Tong ,Dan Xie Wei Bu Tong Zhi Chu ,Po Shi Ni Shi Yong Duo Ge Han Shu Chu Li Xiang Si De Shi Qing . Ru Guo Chu Xian Zhong Fu De Cheng Shi Ma ,Ke Yi Shi Yong Han Shu , Mo Zu Huo Shi Lei Bie Lai Chou Xiang Hua Chu Li .

Zheng Que De Chou Xiang Hua Shi Fei Chang Guan Jian De ,Zhe Ye Shi Wei Shi Mo Ni Ying Gai Zun Xun Lei Bie (Classes)Zhang Jie Zhong ,Wu Jian Dao Xiang Ji Ben Yuan Ze SOLID De Yuan Yin . Qing Xiao Xin ,Jiao Chai De Chou Xiang Hua Hui Bi Zhong Fu De Cheng Shi Ma Geng Zao !Zhe Mo Shuo Ba ,Ru Guo Ni You Ba Wo Zuo Chu Hao De Chou Xiang Hua ,Jin Qing Fang Shou Qu Zuo . Bie Rang Cheng Shi Ma Chu Xian Zhong Fu De Di Fang ,Bu Ran Ni Hui Xu Yao Xiu Gai Geng Duo De Cheng Shi Ma .

Zao Gao De :

function showDeveloperList(developers) {
developers.forEach(developer => {
const expectedSalary = developer.calculateExpectedSalary();
const experience = developer.getExperience();
const githubLink = developer.getGithubLink();
const data = {
expectedSalary,
experience,
githubLink
};

render(data);
});
}

function showManagerList(managers) {
managers.forEach(manager => {
const expectedSalary = manager.calculateExpectedSalary();
const experience = manager.getExperience();
const portfolio = manager.getMBAProjects();
const data = {
expectedSalary,
experience,
portfolio
};

render(data);
});
}

Shi Dang De :

function showEmployeeList(employees) {
employees.forEach(employee => {
const expectedSalary = employee.calculateExpectedSalary();
const experience = employee.getExperience();

const data = {
expectedSalary,
experience
};

switch (employee.type) {
case 'manager':
data.portfolio = employee.getMBAProjects();
break;
case 'developer':
data.githubLink = employee.getGithubLink();
break;
}

render(data);
});
}

Yi Zhe Fu Zhu

Gang Du Wan Zhe Ge Yuan Ze Shi ,Wo Fei Chang Zun Shou ,Dan Shi Ge Ren Gui Mao De Ge Xing ,Zao Cheng Liao Bu Shao Ma Fan ,Wo Hui Zai Kai Fa Shi Bu Duan De Si Kao Shi Fou Hui Chu Xian Liao Zhong Fu De Cheng Shi Ma ,Shen Zhi Kao Lu Dao Liao Zhi Hou De Zhong Yong Xing . Dai Jia Jiu Shi Guo Du She Ji (Over Engineering)Zao Cheng Gong Neng Kai Fa Zhi Ai Nan Xing ,She Ji Liao Liang Hao Jia Gou ,Dan Shi Ji Shang Bing Wei Bei Shi Yong Dao . Zui Hou Zong Jie Liao Yi Ge Jian Yi Zuo Wei Fu Jia Yuan Ze :Yi Kai Shi Zhuan Xie Cheng Shi Ma Xian Yi Gong Neng Kai Fa You Xian ,Dang Ni Fa Xian You Liang Ge Yi Shang De Di Fang Zhong Fu Shi ,Zai Lai Kao Lu Yao Bu Yao Zhong Gou .

Hui Dao Mu Lu

Shi Yong Object.assign She Ding Object De Yu She Zhi

Zao Gao De :

const menuConfig = {
title: null,
body: 'Bar',
buttonText: null,
cancellable: true
};

function createMenu(config) {
config.title = config.title || 'Foo';
config.body = config.body || 'Bar';
config.buttonText = config.buttonText || 'Baz';
config.cancellable =
config.cancellable !== undefined ? config.cancellable : true;
}

createMenu(menuConfig);

Shi Dang De :

const menuConfig = {
title: 'Order',
// Shi Yong Zhe Lou Diao Liao 'body'
buttonText: 'Send',
cancellable: true
};

function createMenu(config) {
let finalConfig = Object.assign(
{
title: 'Foo',
body: 'Bar',
buttonText: 'Baz',
cancellable: true
},
config
);
return finalConfig;
// config Xian Zai Deng Tong Yu : {title: 'Order', body: 'Bar', buttonText: 'Send', cancellable: true}
// ...
}

createMenu(menuConfig);

Hui Dao Mu Lu

Bu Yao Shi Yong Qi Biao (Flag)Zuo Wei Can Shu

Dang Ni De Han Shu Shi Yong Liao Qi Biao Dang Zuo Can Shu Shi ,Dai Biao Han Shu Zuo Bu Zhi Yi Jian Shi Qing ,Yi Zhao Bu Tong Qi Biao Lu Jing Qie Fen Ni De Han Shu .

Zao Gao De :

function createFile(name, temp) {
if (temp) {
fs.create(`./temp/${name}`);
} else {
fs.create(name);
}
}

Shi Dang De :

function createFile(name) {
fs.create(name);
}

function createTempFile(name) {
createFile(`./temp/${name}`);
}

Hui Dao Mu Lu

Bi Mian Fu Zuo Yong (Side Effects)

Dang Han Shu Zuo Yong Zai Chu Liao Hui Chuan Zhi Wai De Di Fang ,Xiang Shi Du Xie Wen Jian , Xiu Gai Quan Yu Bian Shu Huo Shi Jiang Ni De Qian Zhuan Zhang Dao Qi Ta Ren Zhang Hu ,Ze Cheng Wei Fu Zuo Yong .

Cheng Shi Zai Mou Xie Qing Kuang Xia Shi Xu Yao Fu Zuo Yong De ,Xiang Shi Shang Mian Suo Ti Dao De Li Zi . Zhe Shi Ni Ying Gai Jiang Zhe Xie Gong Neng Ji Zhong Zai Yi Qi ,Bu Yao Tong Shi You Duo Ge Han Shu Huo Shi Lei Bie Tong Shi Cao Zuo Zi Yuan ,Ying Gai Zhi Yong Yi Ge Fu Wu (Service)Wan Cheng Zhe Xie Shi Qing .

Chang Jian De Wen Ti Xiang Shi :

  • Zai Mei You Ren He Jia Gou Xia ,Tong Shi Duo Ge Wu Jian Zhong Fen Xiang Gong You Zhuang Tai .
  • Ke Bian De Zhuang Tai ,Qie Ke Yi Bei Ren He Ren Xie Ru
  • Fu Zuo Yong Fa Sheng De Di Fang Mei You Bei Ji Zhong .

Ru Guo Ni Neng Bi Mian Zhe Xie Wen Ti ,Ni Hui Bi Da Duo Shu De Gong Cheng Shi Kuai Le .

Zao Gao De :

// Quan Yu Bian Shu Bei Yi Xia Han Shu Shi Yong
// Jia Ru You Qi Ta De Han Shu Shi Yong Liao Zhe Ge Ming Cheng ,Xian Zai Ta Bian Cheng Liao Zhen Lie ,Jiang Hui Bei Po Huai Er Chu Cuo .
let name = 'Ryan McDermott';

function splitIntoFirstAndLastName() {
name = name.split(' ');
}

splitIntoFirstAndLastName();

console.log(name); // ['Ryan', 'McDermott'];

Shi Dang De :

function splitIntoFirstAndLastName(name) {
return name.split(' ');
}

const name = 'Ryan McDermott';
const newName = splitIntoFirstAndLastName(name);

console.log(name); // 'Ryan McDermott';
console.log(newName); // ['Ryan', 'McDermott'];

Hui Dao Mu Lu

Bi Mian Fu Zuo Yong (Side Effects)Di Er Bu Fen

Zai JavaScript Zhong ,Yuan Shi Zi Liao Lei Xing Chuan Di Shu Zhi (Value),Wu Jian /Zhen Lie Chuan Di Can Zhao (Reference). Zai Ben An Li Zhong ,Ni De Han Shu Gai Bian Liao Gou Wu Che Qing Dan cart Zhong De Zhen Lie ,Xiang Shi Ni Zeng Jia Liao Yi Ge Shang Pin ,Qi Ta Shi Yong Gou Wu Che Qing Dan De Han Shu Jiang Hui Bei Ying Xiang . Zhe Zuo Fa You Hao You Huai ,Rang Wo Jie Shi Yi Xia Wen Ti Suo Zai :

Shi Yong Zhe An Xia Fu Kuan An Niu Hou ,Jiang Hui Hu Jiao purchase Han Shu ,Chan Sheng Yi Ge Wang Lu Qing Qiu Chuan Song Gou Wu Che Qing Dan Zhen Lie Dao Si Fu Qi . Yin Wei Jiao Chai De Wang Lu Lian Xian ,Bi Xu Duo Chang Shi Ji Ci . Ci Shi Shi Yong Zhe Bu Xiao Xin You An Xia Jia Ru Gou Wu Che An Niu ,Yin Wei Shi Can Kao De Guan Xi ,Qing Qiu Jiang Hui Song Chu Xin Jia Ru De Shang Pin .

Jiao Hao De Jie Jue Ban Fa Shi addItemToCart Han Shu ,Zhi Xing Qian Fu Zhi Xin De Yi Fen Gou Wu Che Qing Dan ,Xiu Gai Fu Zhi De Zi Liao Hou Zai Hui Chuan . Zhe Neng Que Bao Qi Ta De Han Shu De Gou Wu Che Qing Dan Mei You Ren He Ji Hui Bei Bei Can Kao Suo Ying Xiang .

Shi Yong Zhe Fang Fa Qian ,You Liang Ge Jing Gao Yao Gao Zhi :

  1. Dang Cai Yong Zhe Zhong Zuo Fa Hou ,Ni Hui Fa Xian ,Xu Yao Xiu Gai Shu Ru Wu Jian De Qing Kuang Fei Chang Shao . Da Duo Shu De Cheng Shi Ma Ke Yi Zai Mei You Fu Zuo Yong De Qing Kuang Xia Zhong Gou !

  2. Fu Zhi Da Xing Wu Jian ,Xu Yao Hua Fei Gao Ang De Xiao Neng . Xing Hao ,Wo Men You Hao De Han Shu Ku ,Ke Yi Ti Sheng Fu Zhi Wu Jian Yu Zhen Lie De Su Du Yu Jian Shao Ji Yi Ti Shi Yong .

Zao Gao De :

const addItemToCart = (cart, item) => {
cart.push({ item, date: Date.now() });
};

Shi Dang De :

const addItemToCart = (cart, item) => {
return [...cart, { item, date: Date.now() }];
};

Yi Zhe Fu Zhu

Yi Zhe Zhe Bian Ling Wai Zai Ti Gong Yi Ge An Li ,Han Shu checkIs18Age Yong Lai Jian Cha Shi Fou Cheng Nian . Di Yi Ge Xie Fa Zhong ,Yin Yong Liao Quan Yu (global)Bian Shu minimum,Zhe Gong Neng Kan Qi Lai Neng Zheng Chang Yun Zuo Mei Wen Ti ,Dan Shi Jin Tian Ru Guo You Qi Ta Han Shu setMinAge Xiu Gai Liao Quan Yu Bian Shu minimum,Han Shu checkIs18Age Jiang Hui Yin Wei Fu Zuo Yong De Guan Xi Bian De Wu Fa Yu Qi ,Shen Zhi Shi Qu Ta De Zuo Yong .

Jiao Hao De Xie Fa Shi ,Cai Yong Chun Han Shu (pure function),Shi Yong Yi Ge Ke Yu Qi De Bian Shu ,Lai Bi Mian Fu Zuo Yong Ying Xiang .

let minimum = 18

// impure with side effect
const checkIs18Age = age => age >= minimum
const setMinAge = age => minimum = age

// pure
const checkIs18Age = age => {
let minimum = 18
return age >= minimum
}

Ling Wai Shi Yong Jie Gou De Fang Shi Fu Zhi Zi Liao ,Zhi Hui Fu Zhi Di Yi Ceng Er Yi .

// Chao Zhuang Jie Gou Zhi Neng Fu Zhi Di Yi Ceng
const obj1 = { subObj: { message: 'Hey' } }
const obj2 = { ...obj1 }

obj2.subObj.message = 'Yo'
console.log(obj1.subObj.message) // 'Yo'

Ru Guo Yao Fu Zhi Chao Zhuang Jie Gou ,Ni Xu Yao Shen Du Fu Zhi . Ke Yi Shi Yong Yi Xie Han Shu Ku loadsh De _.CloneDeep Huo Shi ramda De clone. Huo Shi Shi Yong JSON.parse(JSON.stringify(object)) Lai Shi Xian . Bu Guo Shi Yong JSON De Hua ,Hui Shi Qu Function De Fu Zhi .

// Shi Yong JSON Lai Shen Du Fu Zhi
const obj1 = { subObj: { message: 'Hey' } }
const obj2 = JSON.parse(JSON.stringify(obj1))

obj2.subObj.message = 'Yo'
console.log(obj1.subObj.message) // 'Hey'

Hui Dao Mu Lu

Bie Xie Quan Yu Han Shu (Global Function)

Zai JavaScript Zhong Nong Zang Quan Yu Shi Ge Bu Hao De Zuo Fa ,Yin Wei Ni Ke Neng Hui Ying Xiang Dao Qi Ta Han Shu Ku Huo Shi API. Ju Ge Li Zi ,Ru Guo Nai Xiang Yao Zai JavaScript De Yuan Sheng Zhen Lie Fang Fa ,Kuo Zhan diff Fang Fa ,Yong B Zhen Lie Lai Qu Chu A Zhen Lie Zhong De Yuan Su (Element). Chang Jian Zuo Fa Ni Ke Neng Hui Zai Array.prototype Zhong Zeng Jia Yi Ge Quan Xin De Han Shu ,Ru Guo Qi Ta Han Shu Ku Ye You Zi Ji De diff Shi Xian De Hua Jiang Hui Hu Xiang Ying Xiang . Zhe Jiu Shi Wei Shi Mo Wo Men Xu Yao Shi Yong ES2015/ES6 De Lei Bie ,Lai Kuo Zhan De Yuan Yin .

Zao Gao De :

Array.prototype.diff = function diff(comparisonArray) {
const hash = new Set(comparisonArray);
return this.filter(elem => !hash.has(elem));
};

Shi Dang De :

class SuperArray extends Array {
diff(comparisonArray) {
const hash = new Set(comparisonArray);
return this.filter(elem => !hash.has(elem));
}
}

Hui Dao Mu Lu

Pian Hao Shi Yong Han Shu Shi Cheng Shi (Functional Programming)She Ji Dai Ti Ming Ling Shi Cheng Shi She Ji (Imperative Programming)

JavaScript Bu Shi Xiang Haskell Yi Yang De Han Shu Shi Yu Yan ,Dan Ta Ju You Lei Si Te Xing . Han Shu Shi Cheng Shi She Ji Geng Jia Gan Jing Qie Rong Yi Bei Ce Shi . Dang Ni Zai Xie Cheng Shi Shi ,Jin Liang Xuan Ze Ci She Ji Fang Shi .

Zao Gao De :

const programmerOutput = [
{
name: 'Uncle Bobby',
linesOfCode: 500
},
{
name: 'Suzie Q',
linesOfCode: 1500
},
{
name: 'Jimmy Gosling',
linesOfCode: 150
},
{
name: 'Gracie Hopper',
linesOfCode: 1000
}
];

let totalOutput = 0;

for (let i = 0; i < programmerOutput.length; i++) {
totalOutput += programmerOutput[i].linesOfCode;
}

Shi Dang De :

totalLines + output.linesOfCode, 0 );">const programmerOutput = [
{
name: 'Uncle Bobby',
linesOfCode: 500
},
{
name: 'Suzie Q',
linesOfCode: 1500
},
{
name: 'Jimmy Gosling',
linesOfCode: 150
},
{
name: 'Gracie Hopper',
linesOfCode: 1000
}
];

const totalOutput = programmerOutput.reduce(
(totalLines, output) => totalLines + output.linesOfCode,
0
);

Hui Dao Mu Lu

Feng Zhuang Zhuang Tai (Encapsulate Conditionals)

Zao Gao De :

if (fsm.state === 'fetching' && isEmpty(listNode)) {
// ...
}

Shi Dang De :

function shouldShowSpinner(fsm, listNode) {
return fsm.state === 'fetching' && isEmpty(listNode);
}

if (shouldShowSpinner(fsmInstance, listNodeInstance)) {
// ...
}

Hui Dao Mu Lu

Bi Mian Fu Mian Zhuang Tai (Negative Conditionals)

Zao Gao De :

function isDOMNodeNotPresent(node) {
// ...
}

if (!isDOMNodeNotPresent(node)) {
// ...
}

Shi Dang De :

function isDOMNodePresent(node) {
// ...
}

if (isDOMNodePresent(node)) {
// ...
}

Hui Dao Mu Lu

Bi Mian Zhuang Tai

Dang Ni Di Yi Ci Ting Dao Shi ,Zhe Ting Qi Lai Shi Bu Ke Neng De Ren Wu . Da Bu Fen De Ren Hui Shuo :[Zen Mo Ke Neng Bu Shi Yong if Yu Fa ?] Shi Shi Shang Ni Ke Yi Shi Yong Duo Tai Xing (Polymorphism) Da Dao Xiang Tong De Xiao Guo . Di Er Ge Wen Ti Lai Liao ,[Wei Shi Mo Wo Men Xu Yao Zhe Yang Zuo Ni ?] Yi Ju Qian Mian Gai Nian ,Wei Liao Bao Chi Cheng Shi Ma De Gan Jing ,Dang Lei Bie Huo Shi Han Shu Chu Xian if Yu Fa ,Dai Biao Ni De Han Shu Zuo Liao Chao Guo Yi Jian Shi Qing . Ji Zhu ,Yi Ge Han Shu Zhi Zuo Yi Jian Shi Qing !

Zao Gao De :

class Airplane {
// ...
getCruisingAltitude() {
switch (this.type) {
case '777':
return this.getMaxAltitude() - this.getPassengerCount();
case 'Air Force One':
return this.getMaxAltitude();
case 'Cessna':
return this.getMaxAltitude() - this.getFuelExpenditure();
}
}
}

Shi Dang De :

class Airplane {
// ...
}

class Boeing777 extends Airplane {
// ...
getCruisingAltitude() {
return this.getMaxAltitude() - this.getPassengerCount();
}
}

class AirForceOne extends Airplane {
// ...
getCruisingAltitude() {
return this.getMaxAltitude();
}
}

class Cessna extends Airplane {
// ...
getCruisingAltitude() {
return this.getMaxAltitude() - this.getFuelExpenditure();
}
}

Hui Dao Mu Lu

Bi Mian Xing Bie (Type)Jian Cha :Di Yi Bu Fen

JavaScript Wei Ruo Xing Bie Yu Yan ,Dai Biao Han Shu Ying Neng Chu Li Ren He Xing Bie De Yin Shu (argument). You Shi Zhe Hui Dai Gei Ni Yi Xie Ma Fan ,Rang Ni Xu Yao Zuo Xing Bie Jian Cha . You Hen Duo Fang Fa Ke Yi Bi Mian Zhe Zhong Wen Ti Fa Sheng ,Di Yi Zhong Jiu Shi Tong Yi Suo You De API.

Zao Gao De :

function travelToTexas(vehicle) {
if (vehicle instanceof Bicycle) {
vehicle.pedal(this.currentLocation, new Location('texas'));
} else if (vehicle instanceof Car) {
vehicle.drive(this.currentLocation, new Location('texas'));
}
}

Shi Dang De :

function travelToTexas(vehicle) {
vehicle.move(this.currentLocation, new Location('texas'));
}

Yi Zhe Fu Zhu

Ci Fan Li Tong Yi Liao Suo You De Che Liang Yi Dong De Can Shu , Fang Fa Yu Shi Zuo ,Suo Yi Bu Zai Xu Yao Qu Fen Bu Tong De Lei Bie De Che Liang Hu Jiao Bu Tong De Fang Fa .

Hui Dao Mu Lu

Bi Mian Xing Bie Jian Cha :Di Er Bu Fen

Jia She Ni Xu Yao Xing Bie Jian Cha Yuan Shi Shu Zhi ,Xiang Shi Zi Chuan Yu Zheng Shu Qie Ni Wu Fa Shi Yong Duo Tai Xing Chu Li ,Kao Lu Shi Yong TypeScript Ba . Ta Shi Ti Gong Biao Zhun JavaScript Jing Tai Lei Xing De De Zui Jia Xuan Ze . Shou Dong Xing Bie Jian Cha Xu Yao Hen Duo E Wai Chu Li ,Ni De Dao De Shi Xu Jia De Xing Bie An Quan ,Qie Shi Qu De Ke Du Xing . Bao Chi Ni De JavaScript Cheng Shi Ma De Zheng Jie , Xie Hao Ce Shi Yu Zu Gou De Cheng Shi Ma Shen Cha (Code Review). Ru Guo Jia Shang Shi Yong TypeScript Hui Shi Geng Hao De Xuan Ze .

Zao Gao De :

function combine(val1, val2) {
if (
(typeof val1 === 'number' && typeof val2 === 'number') ||
(typeof val1 === 'string' && typeof val2 === 'string')
) {
return val1 + val2;
}

throw new Error('Must be of type String or Number');
}

Shi Dang De :

function combine(val1, val2) {
return val1 + val2;
}

Hui Dao Mu Lu

Bie Guo Du You Hua

Xian Dai Liu Lan Qi Zai Yun Xing Shi Bang Ni Zuo Liao Hen Duo You Hua . Da Duo Shu De Qing Kuang ,Ni Suo Zuo De You Hua Du Shi Zai Lang Fei Ni De Shi Jian . Zhe Li You Xie Hen Hao De Zi Yuan ,Qu Liao Jie Na Xie You Hua Shi Wu Yong De .

Zao Gao De :

// Zai Jiu De Liu Lan Qi Zhong Bing Bu Hui Kuai Qu (cache)`list.length`,Mei Ci Die Dai (iteration)Shi De Zhong Xin Ji Suan Xiang Dang Sun Hao Xiao Neng .
// Zhe Zai Xin Liu Lan Qi Zhong Yi Bei You Hua ,Ni Bu Yong Shou Dong Qu Kuai Qu .
for (let i = 0, len = list.length; i < len; i++) {
// ...
}

Shi Dang De :

for (let i = 0; i < list.length; i++) {
// ...
}

Yi Zhe Fu Zhu

Jian Dan Lai Shuo ,Ni Bu Yong Zai Yi Cheng Shi Yu Yan Ceng Mian Shang You Hua ,Yin Wei Zhe Bu Fen Hui Yin Wei Ban Ben Geng Xin Er De Dao You Hua . Dan Bu Yao Yin Ci Fang Qi Suo You De You Hua ,Yan Suan Fa De You Hua Cai Shi Ni Gai Zhu Yi De Di Fang !

Hui Dao Mu Lu

Yi Chu Wu Yong De Cheng Shi Ma (Dead Code)

Mei You Ren He Li You Bao Liu Wu Yong De Cheng Shi Ma ,Ru Guo Ta Men Mei You Bei Shi Yong Dao ,Yi Chu Ta !Rang Ta Men Bei Bao Liu Zai Ban Ben Li Shi Zhong .

Zao Gao De :

function oldRequestModule(url) {
// ...
}

function newRequestModule(url) {
// ...
}

const req = newRequestModule;
inventoryTracker('apples', req, 'www.inventory-awesome.io');

Shi Dang De :

function newRequestModule(url) {
// ...
}

const req = newRequestModule;
inventoryTracker('apples', req, 'www.inventory-awesome.io');

Hui Dao Mu Lu

Wu Jian (Objects)Yu Zi Liao Jie Gou (Data Structures)

Shi Yong getters Yu setters

Shi Yong getters Yu setters Lai Cun Qu Wu Jian Zhong Zi Liao ,Hui Bi Dan Chun Shi Yong Shu Xing (property)Lai De Hao . Yin Wei :

  • Dang Ni Xiang Yao Zai Qu De Wu Jian Shu Xing Shi Zuo Geng Duo Shi Qing ,Ni Bu Yong Zhao Chu Suo You De Cheng Shi Ma Xiu Gai .
  • Tou Guo set Ke Yi Jian Li Gui Ze Jin Xing Zi Liao Xiao Yan .
  • Feng Zhuang Nei Bu Luo Ji .
  • Cun Qu Shi Zeng Jia Ri Zhi (logging)Yu Cuo Wu Chu Li (error handling).
  • Ni Ke Yi Yan Chi Zai Ru Ni De Wu Jian Shu Xing ,Xiang Shi Lai Zi Si Fu Qi De Zi Liao .

Zao Gao De :

function makeBankAccount() {
// ...

return {
balance: 0
// ...
};
}

const account = makeBankAccount();
account.balance = 100;

Shi Dang De :

function makeBankAccount() {
// Si You Bian Shu
let balance = 0;

// 'getter',Jing You Xia Fang De Fan Hui Wu Jian Dui Wai Gong Kai
function getBalance() {
return balance;
}

// 'setter',Jing You Xia Fang De Fan Hui Wu Jian Dui Wai Gong Kai
function setBalance(amount) {
// ... Geng Xin Qian Xian Jin Xing Yan Zheng
balance = amount;
}

return {
// ...
getBalance,
setBalance
};
}

const account = makeBankAccount();
account.setBalance(100);

Hui Dao Mu Lu

Rang Wu Jian Yong You Si You Cheng Yuan (members)

Ke Yi Tou Guo Bi Bao (closures)Lai Si You Hua Can Shu (Shi Yong Yu ES5 Yi Xia ).

Zao Gao De :

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

Shi Dang De :

function makeEmployee(name) {
return {
getName() {
return name;
}
};
}

const employee = makeEmployee('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

Hui Dao Mu Lu

Lei Bie (Classes)

Lei Bie Yu Fa Pian Hao Shi Yong ES2015/ES6 De Lei Bie Geng Shen Yu ES5 Han Shu

ES5 De Lei Bie Ding Yi Fei Chang Nan Yi Yue Du , Ji Cheng , Jian Zao Yu Ding Yi Fang Fa . Jia She Ni Xu Yao Ji Cheng (Qing Zhu Yi Ni You Ke Neng Bu Xu Yao ),Pian Hao Shi Yong ES2015/ES6 De Lei Bie . Chu Fei Ni Xu Yao Da Xing Qie Fu Za De Wu Jian ,Bu Ran Shi Yong Xiao Xing Han Shu Hui Bi Lei Bie Geng Hao .

Zao Gao De :

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() {};

Shi Dang De :

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() {
// ...
}
}

Hui Dao Mu Lu

Shi Yong Fang Fa Lian (method chaining)

Zhe Ge Mo Shi (pattern)Zai JavaScript Zhong Fei Chang You Yong ,Ni Ke Yi Zai Hen Duo Han Shu Ku Zhong Kan Dao ,Xiang Shi jQuery Yu Lodash. Ta Ke Yi Rang Ni De Cheng Shi Ma Biao Da De Geng Hao .

Ji Yu Zhe Ge Yuan Yin ,Fang Fa Lian Ke Yi Rang Ni De Cheng Shi Ma Kan Qi Lai Geng Jia Jian Jie . Zai Ni De Lei Bie Han Shu Zhong ,Zhi Xu Yao Hui Chuan this Zai Mei Yi Ge Han Shu Zhong ,Ni Jiu Ke Yi Lian Jie Suo You Lei Bie Zhong De Fang Fa .

Zao Gao De :

class Car {
constructor(make, model, color) {
this.make = make;
this.model = model;
this.color = color;
}

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('Ford', 'F-150', 'red');
car.setColor('pink');
car.save();

Shi Dang De :

class Car {
constructor(make, model, color) {
this.make = make;
this.model = model;
this.color = color;
}

setMake(make) {
this.make = make;
// Zhu Yi :Hui Chuan this Yi Lian Jie
return this;
}

setModel(model) {
this.model = model;
// Zhu Yi :Hui Chuan this Yi Lian Jie
return this;
}

setColor(color) {
this.color = color;
// Zhu Yi :Hui Chuan this Yi Lian Jie
return this;
}

save() {
console.log(this.make, this.model, this.color);
// Zhu Yi :Hui Chuan this Yi Lian Jie
return this;
}
}

const car = new Car('Ford', 'F-150', 'red').setColor('pink').save();

Hui Dao Mu Lu

Pian Hao Zu He (composition)Geng Shen Yu Ji Cheng (inheritance)

Zheng Ru Si Ren Bang De She Ji Mo Shi ,Ke Yi De Hua Ni Ying Gai You Xian Shi Yong Zu He Er Bu Shi Ji Cheng . You Xu Duo Hao Li You Qu Shi Yong Ji Cheng Huo Shi Zu He . Zhong Dian Shi ,Ru Guo Ni Zhu Guan Ren Ding Shi Ji Cheng ,Chang Shi Xiang Yi Xia Zu He Neng Fou Ti Wen Ti Dai Lai Geng Hao De Jie Fa . Ni Ying Gai Pian Hao Shi Yong Zu He Geng Shen Yu Ji Cheng .

Shi Mo Shi Hou Shi Yong Ji Cheng ?Zhe Qu Jue Yu Ni Shou Shang De Wen Ti ,Bu Guo Zhe You Yi Xie Bu Cuo De Can Kao ,Shuo Ming Shi Mo Shi Mo Shi Hou Ji Cheng Bi Zu He Geng Hao Yong :

  1. Ni De Ji Cheng Wei Shi Yi Zhong (is-a)De Guan Xi ,Er Bu Shi You Yi Ge (has-a). Li Ru [Ren Lei Shi Yi Zhong Dong Wu Human -> Animal] vs.[Shi Yong Zhe You Yi Ge Shi Yong Zhe Zi Liao User -> UserDetails] .
  2. Ni Neng Zhong Fu Shi Yong Ji Lei (base classes)De Cheng Shi Ma . Li Ru ,Ren Lei Neng Xiang Dong Wu Yi Yang Yi Dong .
  3. Ni Xi Wang Neng Tong Guo Xiu Gai Ji Lei De Cheng Shi Ma Lai Jin Xing Quan Yu Xiu Gai . Li Ru ,Gai Bian Suo You Dong Wu Yi Dong Shi De Re Liang Xiao Hao .

Zao Gao De :

class Employee {
constructor(name, email) {
this.name = name;
this.email = email;
}

// ...
}

// Yin Wei Gu Yuan You Shui Lu Jin Zi Liao ,Er Bu Shi Yi Zhong Gu Yuan
class EmployeeTaxData extends Employee {
constructor(ssn, salary) {
super();
this.ssn = ssn;
this.salary = salary;
}

// ...
}

Shi Dang De :

class EmployeeTaxData {
constructor(ssn, salary) {
this.ssn = ssn;
this.salary = salary;
}

// ...
}

class Employee {
constructor(name, email) {
this.name = name;
this.email = email;
}

setTaxData(ssn, salary) {
this.taxData = new EmployeeTaxData(ssn, salary);
}
// ...
}

Hui Dao Mu Lu

Wu Jian Dao Xiang Ji Ben Yuan Ze (SOLID)

Dan Yi Gong Neng Yuan Ze Single Responsibility Principle (SRP)

Zheng Ru Clean Code Suo Shu :[Yong Yuan Bu Yao You Chao Guo Yi Ge Li You Lai Xiu Gai Yi Ge Lei Xing ] . Gei Yi Ge Lei Bie Sai Man Xu Duo Gong Neng ,Ru Tong Ni Zai Hang Ban Shang Zhi Neng Dai Yi Ge Xing Li Xiang Yi Yang . Zhe Yang Zuo De Wen Ti Shi ,Ni De Lei Bie Bu Hui You Li Xiang De Nei Ju Xing ,Jiang Hui You Tai Duo Li You Lai Dui Ta Jin Xing Xiu Gai . Zui Xiao Hua Xu Yao Xiu Gai Yi Ge Lei Bie De Ci Shu Hen Zhong Yao ,Yin Wei Yi Ge Lei Bie You Tai Duo De Gong Neng De Hua ,Yi Dan Ni Xiu Gai Yi Xiao Bu Fen ,Jiang Hui Hen Nan Nong Qing Chu Ta Hui Dui Cheng Shi Ma De Qi Ta Mo Zu Zao Cheng Shi Mo Ying Xiang .

Zao Gao De :

class UserSettings {
constructor(user) {
this.user = user;
}

changeSettings(settings) {
if (this.verifyCredentials()) {
// ...
}
}

verifyCredentials() {
// ...
}
}

Shi Dang De :

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()) {
// ...
}
}
}

Hui Dao Mu Lu

Kai Bi Yuan Ze Open/Closed Principle (OCP)

Bertrand Meyer Shuo Guo ,[Ruan Ti Shi Ti (Lei Bie , Mo Zu , Han Shu )Ying Wei Kai Fang Kuo Zhan ,Dan Shi Guan Bi Xiu Gai ] . Zhe Yuan Ze Ji Ben Shang Shuo Ming Ni Ying Gai Tong Yi Shi Yong Zhe Zeng Jia Gong Neng ,Er Bu Yong Xiu Gai Xian You Cheng Shi Ma .

Zao Gao De :

{ // Zhuan Huan Hui Ying Bing Hui Chuan }); } else if (this.adapter.name === 'nodeAdapter') { return makeHttpCall(url).then(response => { // Zhuan Huan Hui Ying Bing Hui Chuan }); } } } function makeAjaxCall(url) { // Fa Song Qing Qiu Bing Hui Chuan promise } function makeHttpCall(url) { // Fa Song Qing Qiu Bing Hui Chuan promise }">class AjaxAdapter extends Adapter {
constructor() {
super();
this.name = 'ajaxAdapter';
}
}

class NodeAdapter extends Adapter {
constructor() {
super();
this.name = 'nodeAdapter';
}
}

class HttpRequester {
constructor(adapter) {
this.adapter = adapter;
}

fetch(url) {
if (this.adapter.name === 'ajaxAdapter') {
return makeAjaxCall(url).then(response => {
// Zhuan Huan Hui Ying Bing Hui Chuan
});
} else if (this.adapter.name === 'nodeAdapter') {
return makeHttpCall(url).then(response => {
// Zhuan Huan Hui Ying Bing Hui Chuan
});
}
}
}

function makeAjaxCall(url) {
// Fa Song Qing Qiu Bing Hui Chuan promise
}

function makeHttpCall(url) {
// Fa Song Qing Qiu Bing Hui Chuan promise
}

Shi Dang De :

{ // transform response and return }); } }">class AjaxAdapter extends Adapter {
constructor() {
super();
this.name = 'ajaxAdapter';
}

request(url) {
// Fa Song Qing Qiu Bing Hui Chuan promise
}
}

class NodeAdapter extends Adapter {
constructor() {
super();
this.name = 'nodeAdapter';
}

request(url) {
// Fa Song Qing Qiu Bing Hui Chuan promise
}
}

class HttpRequester {
constructor(adapter) {
this.adapter = adapter;
}

fetch(url) {
return this.adapter.request(url).then(response => {
// transform response and return
});
}
}

Hui Dao Mu Lu

Li Shi Ti Huan Yuan Ze Liskov Substitution Principle (LSP)

Zhe Shi Yi Ge Jing Ren Dan Jian Dan De Gai Nian ,Zheng Shi De Ding Yi Wei :[Jia Ru Lei Bie S Shi Lei Bie T De Zi Lei Bie ,Na Mo Lei Bie T De Wu Jian (Object)Ke Yi Bei Ti Huan Cheng Lei Bie S De Wu Jian (Li Ru ,Lei Bie S De Wu Jian Ke Zuo Wei Lei Bie T De Wu Jian De Ti Dai Pin ),Er Bu Xu Yao Gai Bian Ren He Cheng Shi De Shu Xing (Zheng Que Xing , Bei Zhi Xing De Ren Wu Deng ).

Zui Hao De Jie Shi Shi Zhe Yang ,Jia Ru Ni You Fu Lei Bie Yu Zi Lei Bie ,Fu Lei Bie Yu Zi Lei Bie Ke Yi Hu Huan ,Er Mei You Wen Ti Fa Sheng . Rang Wo Men Kan Kan Yi Ge Jing Dian De Zheng Fang Xing Yu Chang Fang Xing De An Li . Zai Shu Xue Shang ,Zheng Fang Xing Shi Chang Fang Xing De Yi Zhong ,Dan Ru Guo Ni Shi Yong Shi Yi Zhong (is-a)De Guan Xi Yong Ji Cheng Lai Shi Xian ,Ni Hen Kuai Hui Fa Xian Wen Ti .

Zao Gao De :

class Rectangle {
constructor() {
this.width = 0;
this.height = 0;
}

setColor(color) {
// ...
}

render(area) {
// ...
}

setWidth(width) {
this.width = width;
}

setHeight(height) {
this.height = height;
}

getArea() {
return this.width * this.height;
}
}

class Square extends Rectangle {
setWidth(width) {
this.width = width;
this.height = width;
}

setHeight(height) {
this.width = height;
this.height = height;
}
}

function renderLargeRectangles(rectangles) {
rectangles.forEach(rectangle => {
rectangle.setWidth(4);
rectangle.setHeight(5);
const area = rectangle.getArea(); // Zao Gao :Jie Guo Wei 25,Ying Gai Wei 20 Cai Zheng Que
rectangle.render(area);
});
}

const rectangles = [new Rectangle(), new Rectangle(), new Square()];
renderLargeRectangles(rectangles);

Shi Dang De :

class Shape {
setColor(color) {
// ...
}

render(area) {
// ...
}
}

class Rectangle extends Shape {
constructor(width, height) {
super();
this.width = width;
this.height = height;
}

getArea() {
return this.width * this.height;
}
}

class Square extends Shape {
constructor(length) {
super();
this.length = length;
}

getArea() {
return this.length * this.length;
}
}

function renderLargeShapes(shapes) {
shapes.forEach(shape => {
const area = shape.getArea();
shape.render(area);
});
}

const shapes = [new Rectangle(4, 5), new Rectangle(4, 5), new Square(5)];
renderLargeShapes(shapes);

Yi Zhe Fu Zhu

setWidth Yu setHeight Fang Fa Wu Fa Bei Ji Cheng ,Shi Yong Shang De Bu Yi Zhi ,Geng Zao Cheng Liao Jie Guo Cuo Wu .

Hui Dao Mu Lu

Jie Mian Ge Li Yuan Ze Interface Segregation Principle (ISP)

JavaScript Mei You Jie Mian (interfaces),Suo Yi Zhe Ge Yuan Ze Bi Jiao Bu Xiang Qi Ta Yu Yan Yi Yang Yan Ge . Bu Guo Ta Zai JavaScript Zhe Zhong Que Shao Lei Xing De Yu Yan Lai Shuo Yi Yang Zhong Yao .

ISP Yuan Ze Shi [Ke Hu Duan Bu Ying Gai Bei Qiang Zhi Yi Lai Ta Men Bu Xu Yao De Jie Mian . ] Yin Wei JavaScript Shi Yi Zhong Ruo Xing Bie De Yu Yan ,Suo Yi Jie Mian Shi Yi Zhong Yin Shi (implicit)De Xie Yi .

Ju Da De She Ding Wu Jian (objects)Shi Zhe Ge Yuan Ze De Hao Fan Li ,Bu Xu Yao Ke Hu Qu She Ding Da Liang De Xuan Xiang Shi You Hao Chu De ,Yin Wei Duo Shu De Qing Kuang Xia ,Ta Men Bu Xu Yao Quan Bu De She Ding . Rang Ta Men Ke Yi Bei Xuan Ze ,Ke Yi Fang Zhi Chu Xian Yi Ge Guo Pang De Jie Mian .

Zao Gao De :

class DOMTraverser {
constructor(settings) {
this.settings = settings;
this.setup();
}

setup() {
this.rootNode = this.settings.rootNode;
this.animationModule.setup();
}

traverse() {
// ...
}
}

const $ = new DOMTraverser({
rootNode: document.getElementsByTagName('body'),
animationModule() {} // Da Duo Shu De Qing Kuang Xia ,Zhi Xing traverse Shi ,Wo Men Qi Shi Bu Xu Yao Shi Yong animation.
// ...
});

Shi Dang De :

class DOMTraverser {
constructor(settings) {
this.settings = settings;
this.options = settings.options;
this.setup();
}

setup() {
this.rootNode = this.settings.rootNode;
this.setupOptions();
}

setupOptions() {
if (this.options.animationModule) {
// ...
}
}

traverse() {
// ...
}
}

const $ = new DOMTraverser({
rootNode: document.getElementsByTagName('body'),
options: { // animationModule Ke Bei Xuan Ze Yao Bu Yao Shi Yong
animationModule() {}
}
});

Hui Dao Mu Lu

Yi Lai Fan Zhuan Yuan Ze Dependency Inversion Principle (DIP)

Zhe Yuan Ze Shuo Ming Liang Ge Bi Yao Shi Qing :

  1. Gao Ceng Ji De Mo Zu (modules)Bu Ying Gai Yi Lai Yu Di Ceng Ji De Mo Zu . Ta Men Liang Zhe Bi Xu Yi Lai Yu Chou Xiang .
  2. Chou Xiang (abstract)Bu Ying Gai Yi Lai Yu Ju Ti Shi Xian (implement),Ju Ti Shi Xian Ze Ying Yi Lai Yu Chou Xiang .

Zhe Yuan Ze Yi Kai Shi Hen Nan Li Jie ,Dan Ru Guo Ni Shi Yong Guo AngularJS,Ni Ying Gai Yi Jing Zhi Dao ,Shi Yong Yi Lai Zhu Ru (Dependency Injection)Lai Shi Xian Zhe Ge Yuan Ze . Sui Ran Bu Shi Tong Yi Zhong Gai Nian ,Dan Tou Guo Yi Lai Zhu Ru Rang Gao Ceng Ji Mo Zu Yuan Li Di Ceng Ji Mo Zu De Xi Jie Yu She Ding . Zhe Yang Zuo De Ju Da Hao Chu Shi ,Jiang Di Mo Zu Jian De Ou He . Ou He Shi Hen Zao De Kai Fa Mo Shi ,Yin Wei Hui Dao Zhi Cheng Shi Ma Nan Yi Zhong Gou (refactor).

Ru Shang Suo Shi ,JavaScript Mei You Jie Mian ,Suo Yi Bei Yi Lai De Chou Xiang Shi Yin Shi Xie Yi . Ye Shi Jiu Shuo ,Yi Ge Wu Jian /Lei Bie De Shu Xing Zhi Jie Bao Lu Gei Ling Wai Yi Ge . Zai Yi Xia De Fan Li Zhong ,Ren He De Qing Qiu Mo Zu (Request Module)De Yin Shi Xie Yi InventoryTracker Du Hui You Yi Ge requestItems De Fang Fa .

Zao Gao De :

{ this.requester.requestItem(item); }); } } const inventoryTracker = new InventoryTracker(['apples', 'bananas']); inventoryTracker.requestItems();">class InventoryRequester {
constructor() {
this.REQ_METHODS = ['HTTP'];
}

requestItem(item) {
// ...
}
}

class InventoryTracker {
constructor(items) {
this.items = items;

// Zao Gao De :Wo Men Jian Li Liao Yi Zhong Yi Lai ,Yi Lai Yu Te Ding (InventoryRequester)Qing Qiu Mo Zu De Shi Xian .
// Wo Men Shi Ji Shang Zhi You `requestItems` Fang Fa Yi Lai Yu Ming Wei `request` De Qing Qiu Fang Fa .
this.requester = new InventoryRequester();
}

requestItems() {
this.items.forEach(item => {
this.requester.requestItem(item);
});
}
}

const inventoryTracker = new InventoryTracker(['apples', 'bananas']);
inventoryTracker.requestItems();

Shi Dang De :

class InventoryTracker {
constructor(items, requester) {
this.items = items;
this.requester = requester;
}

requestItems() {
this.items.forEach(item => {
this.requester.requestItem(item);
});
}
}

class InventoryRequesterV1 {
constructor() {
this.REQ_METHODS = ['HTTP'];
}

requestItem(item) {
// ...
}
}

class InventoryRequesterV2 {
constructor() {
this.REQ_METHODS = ['WS'];
}

requestItem(item) {
// ...
}
}

// Tong Guo Wai Bu Chuang Jian Shi Jiang Yi Lai Zhu Ru ,Wo Men Ke Yi Qing Song Di Yong Quan Xin De WebSockets De Qing Qiu Mo Zu Ti Huan .
const inventoryTracker = new InventoryTracker(
['apples', 'bananas'],
new InventoryRequesterV2()
);
inventoryTracker.requestItems();

Yi Zhe Fu Zhu

Zai Zao Gao De An Li Zhong ,InventoryTracker Mei You Ti Gong Ti Huan Qing Qiu Mo Zu De Ke Neng ,InventoryTracker Yi Lai Yu InventoryRequester. Zao Cheng Ou He ,Ce Shi Jiang Hui Bei Nan Yi Zhuan Xie ,Xiu Gai Cheng Shi Ma Shi Jiang Hui Qian Yi Fa Er Dong Quan Shen .

Hui Dao Mu Lu

Ce Shi (Testing)

Ce Shi Bi Fa Bu Geng Jia Zhong Yao . Dang Fa Bu Shi ,Ru Guo Ni Mei You Ce Shi Huo Shi Ce Shi Bu Gou Chong Fen ,Ni Hui Wu Fa Que Ren You Mei You Ren He Gong Neng Bei Po Huai . Ce Shi De Liang ,You Tuan Dui Jue Ding ,Dan Shi Yong You 100% De Ce Shi Fu Gai Lu (Bao Han Zhuang Tai Yu Fen Zhi ),Shi Ni Wei Shi Mo Neng You Gao Du Zi Xin Yu Nei Xin Ping Jing De Yuan Yin . Suo Yi Ni Xu Yao Yi Ge Wei Da De Ce Shi Kuang Jia ,Ye Xu Yao Yi Ge Hao De Fu Gai Lu (coverage)Gong Ju .

Mei You Ren He Jie Kou Bu Xie Ce Shi . Zhe Li You Hen Duo Hao De JS Ce Shi Kuang Jia ,Xuan Yi Ge Ni De Tuan Dui Xi Huan De . Xuan Ze Hao Zhi Hou ,Jie Xia Lai De Mu Biao Shi Wei Ren He Xin Gong Neng Huo Shi Mo Zu Zhuan Xie Ce Shi . Ru Guo Ni Xi Hao Ce Shi Qu Dong Kai Fa (Test Driven Development)De Fang Shi ,Na Jiu Tai Bang Liao ,Zhong Dian Shi Que Bao Shang Xian Qian Huo Shi Zhong Gou Zhi Qian ,Da Dao Zu Gou De Fu Gai Lu .

Yi Zhe Fu Zhu

Ce Shi Shi Yi Zhong Bao Zhang ,Dang Ni Gan Zhu Xiu Zheng Cuo Wu Shi ,Ce Shi Hui Gao Su Ni Hui Bu Hui Gai Liao A Huai Liao B. Que Bao Mei Ci Shang Xian Qian De Gong Neng Jie Ke Zheng Chang Yun Zuo . Ling Wai Ce Shi You Fen Zhong Lei ,Xiang Qing Jian Lian Jie Ce Shi De Zhong Lei .

Mei Ge Ce Shi Zhi Ce Shi Yi Ge Gai Nian

Zao Gao De :

{ it('handles date boundaries', () => { let date; date = new MakeMomentJSGreatAgain('1/1/2015'); date.addDays(30); assert.equal('1/31/2015', date); date = new MakeMomentJSGreatAgain('2/1/2016'); date.addDays(28); assert.equal('02/29/2016', date); date = new MakeMomentJSGreatAgain('2/1/2015'); date.addDays(28); assert.equal('03/01/2015', date); }); });">import assert from 'assert';

describe('MakeMomentJSGreatAgain', () => {
it('handles date boundaries', () => {
let date;

date = new MakeMomentJSGreatAgain('1/1/2015');
date.addDays(30);
assert.equal('1/31/2015', date);

date = new MakeMomentJSGreatAgain('2/1/2016');
date.addDays(28);
assert.equal('02/29/2016', date);

date = new MakeMomentJSGreatAgain('2/1/2015');
date.addDays(28);
assert.equal('03/01/2015', date);
});
});

Shi Dang De :

{ it('handles 30-day months', () => { const date = new MakeMomentJSGreatAgain('1/1/2015'); date.addDays(30); assert.equal('1/31/2015', date); }); it('handles leap year', () => { const date = new MakeMomentJSGreatAgain('2/1/2016'); date.addDays(28); assert.equal('02/29/2016', date); }); it('handles non-leap year', () => { const date = new MakeMomentJSGreatAgain('2/1/2015'); date.addDays(28); assert.equal('03/01/2015', date); }); });">import assert from 'assert';

describe('MakeMomentJSGreatAgain', () => {
it('handles 30-day months', () => {
const date = new MakeMomentJSGreatAgain('1/1/2015');
date.addDays(30);
assert.equal('1/31/2015', date);
});

it('handles leap year', () => {
const date = new MakeMomentJSGreatAgain('2/1/2016');
date.addDays(28);
assert.equal('02/29/2016', date);
});

it('handles non-leap year', () => {
const date = new MakeMomentJSGreatAgain('2/1/2015');
date.addDays(28);
assert.equal('03/01/2015', date);
});
});

Yi Zhe Fu Zhu

Ru Guo Ni Dan Ge Ce Shi ,Ce Shi Guo Duo De Gong Neng Huo Shi Gai Nian ,Dang Zhe Ge Ce Shi Chu Cuo De Shi Hou ,Ni Jiang Hui Nan Yi Zhao Dao Chu Cuo De Cheng Shi Ma .

Hui Dao Mu Lu

Bing Fa (Concurrency)

Shi Yong Promises,Bu Yao Shi Yong Hui Hu Han Shi (callback)

Hui Hu Han Shi Bu Zen Mo Jian Jie ,Ta Men Hui Dao Zhi Guo Duo De Chao Zhuang . Zai ES2016/ES6,Promises Yi Jing Shi Nei Jian De Quan Ju Lei Xing (global type). Shi Yong Ta Men Ba !

Zao Gao De :

{ if (requestErr) { console.error(requestErr); } else { writeFile('article.html', response.body, writeErr => { if (writeErr) { console.error(writeErr); } else { console.log('File written'); } }); } } );">import { get } from 'request';
import { writeFile } from 'fs';

get(
'https://en.wikipedia.org/wiki/Robert_Cecil_Martin',
(requestErr, response) => {
if (requestErr) {
console.error(requestErr);
} else {
writeFile('article.html', response.body, writeErr => {
if (writeErr) {
console.error(writeErr);
} else {
console.log('File written');
}
});
}
}
);

Shi Dang De :

{ return writeFile('article.html', response); }) .then(() => { console.log('File written'); }) .catch(err => { console.error(err); });">import { get } from 'request';
import { writeFile } from 'fs';

get('https://en.wikipedia.org/wiki/Robert_Cecil_Martin')
.then(response => {
return writeFile('article.html', response);
})
.then(() => {
console.log('File written');
})
.catch(err => {
console.error(err);
});

Hui Dao Mu Lu

Async/Await Bi Promises Geng Jia Jian Jie

Promises Shi Hui Hu Han Shi De Yi Zhong Fei Chang Jian Jie De Ti Dai Pin ,Dan Shi ES2017/ES8 Dai Lai Liao async Yu await,Ti Gong Liao Yi Ge Geng Jian Jie De Fang An . Ni Xu Yao De Zhi Shi Yi Ge Qian Zhui Wei async Guan Jian Zi De Han Shu ,Jie Xia Lai Ni Bian Xie Luo Ji Shi Jiu Bu Xu Yao Shi Yong then Han Shu Lian . Ru Guo Ni Neng Shi Yong ES2017/ES8 De Jin Jie Gong Neng De Hua ,Jin Tian Jiu Shi Yong Ta Ba !

Zao Gao De :

{ return writeFile('article.html', response); }) .then(() => { console.log('File written'); }) .catch(err => { console.error(err); });">import { get } from 'request-promise';
import { writeFile } from 'fs-promise';

get('https://en.wikipedia.org/wiki/Robert_Cecil_Martin')
.then(response => {
return writeFile('article.html', response);
})
.then(() => {
console.log('File written');
})
.catch(err => {
console.error(err);
});

Shi Dang De :

import { get } from 'request-promise';
import { writeFile } from 'fs-promise';

async function getCleanCodeArticle() {
try {
const response = await get(
'https://en.wikipedia.org/wiki/Robert_Cecil_Martin'
);
await writeFile('article.html', response);
console.log('File written');
} catch (err) {
console.error(err);
}
}

Hui Dao Mu Lu

Cuo Wu Chu Li (Error Handling)

Pao Chu Cuo Wu Shi Yi Jian Hao Shi Qing !Dai Biao Yun Xing Shi Ke Yi Cheng Gong Bian Shi Cheng Shi Zhong De Cuo Wu ,Tong Guo Ting Zhi Zhi Xing Mu Qian Dui Die (stack)Shang De Zhi Xing Han Shu ,Jie Shu (Node.js Zhong De )Mu Qian Cheng Xu (process),Bing Zai Kong Zhi Tai Zhong Yong Yi Ge Dui Die Zhui Zong (stack trace)Ti Xing Ni .

Bu Yao Hu Lue Bu Zhuo Dao De Cuo Wu

Bu Zhuo Dao Yi Ge Cuo Wu Shi Er Bu Zuo Ren He Chu Li ,Hui Rang Ni Shi Qu Xiu Fu Huo Shi Fan Ying Cuo Wu De Neng Li . Jiang Cuo Wu Ji Lu Yu Kong Zhi Tai (console.log)Ye Bu Zen Mo Hao ,Yin Wei Ni Wang Wang Hui Mi Shi Zai Kong Zhi Tai Da Liang De Ji Lu Zhi Zhong . Ru Guo Ni Shi Yong try/catch Bao Zhu Cheng Shi Ma ,Dai Biao Ni Yu Qi Zhe Li Ke Neng Hui Chu Cuo ,Yin Ci Dang Cuo Wu Fa Sheng Shi Ni Bi Xu Yao You Ge Chu Li Fang Fa .

Zao Gao De :

try {
functionThatMightThrow();
} catch (error) {
console.log(error);
}

Shi Dang De :

try {
functionThatMightThrow();
} catch (error) {
// Ke Yi Zhe Yang (Hui Bi console.log Geng Chao )
console.error(error);
// Huo Zhe Zhong Fang Fa
notifyUserOfError(error);
// Ling Wai Yi Zhong Fang Fa
reportErrorToService(error);
// Huo Shi Quan Bu Du Zuo !
}

Bu Yao Hu Lue Bei Ju Jue De Promises

Yuan Yin Ru Shang Jie Suo Shu ,Bu Yao Hu Lue Ren He Bu Zhuo Dao De Cuo Wu .

Zao Gao De :

getdata()
.then(data => {
functionThatMightThrow(data);
})
.catch(error => {
console.log(error);
});

Shi Dang De :

getdata()
.then(data => {
functionThatMightThrow(data);
})
.catch(error => {
// Ke Yi Zhe Yang (Hui Bi console.log Geng Chao )
console.error(error);
// Huo Zhe Zhong Fang Fa
notifyUserOfError(error);
// Ling Wai Yi Zhong Fang Fa
reportErrorToService(error);
// Huo Shi Quan Bu Du Zuo !
});

Hui Dao Mu Lu

Ge Shi Hua (Formatting)

Ge Shi Hua Shi Hen Zhu Guan De ,Jiu Xiang Qi Ta Gui Ze Yi Yang Mei You Ying Xing Gui Ding ,Mei You Bi Yao Wei Liao Ge Shi Er Zheng Lun ,Zhe Li You Da Liang De Zi Dong Hua Ge Shi Gong Ju ,Xuan Yi Ge Jiu Shi Liao !Dui Gong Cheng Shi Lai Shuo ,Zheng Lun Ge Shi Jiu Shi Zai Lang Fei Shi Jian Yu Jin Qian .

Zhen Dui Zi Dong Ge Shi Hua Gong Ju Bu Neng Han Gai De Wen Ti ,Zhe Li You Yi Xie Zhi Nan .

Shi Yong Yi Zhi De Da Xiao Xie

JavaScript Shi Dong Tai Xing Bie De Yu Yan ,Suo Yi Cong Da Xiao Xie Ke Yi Kan Chu Guan Yu Bian Shu , Han Shu Deng Hen Duo De Shi Qing . Zhe Xie Gui Ze Shi Hen Zhu Guan De ,Suo Yi Ni De Tuan Dui Ke Yi Zi You Xuan Ze . Zhong Dian Shi ,Bu Guan Xuan Liao Qu Shi Mo ,Jiu Bao Chi Yi Zhi .

Zao Gao De :

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 {}

Shi Dang De :

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 {}

Hui Dao Mu Lu

Han Shu De Hu Jiao Zhe Ying Gai Yu Bei Hu Jiao Zhe Kao Jin

Ru Guo Yi Ge Han Shu Hu Jiao Ling Wai Yi Ge ,Zai Cheng Shi Ma Zhong Liang Ge Han Shu De Chui Zhi Wei Zhi Ying Gai Kao Jin . Li Xiang Qing Kuang Xia ,Hu Jiao Han Shu Ying Yu Bei Hu Jiao Han Shu De Zheng Shang Fang . Wo Men Qing Xiang Yu Cong Shang Dao Xia De Yue Du Fang Shi ,Jiu Xiang Kan Bao Zhi Yi Yang . Ji Yu Zhe Ge Yuan Yin ,Rang Ni De Cheng Shi Ma Ke Yi Yi Zhao Zhe Zhong Fang Shi Yue Du .

Zao Gao De :

class PerformanceReview {
constructor(employee) {
this.employee = employee;
}

lookupPeers() {
return db.lookup(this.employee, 'peers');
}

lookupManager() {
return db.lookup(this.employee, 'manager');
}

getPeerReviews() {
const peers = this.lookupPeers();
// ...
}

perfReview() {
this.getPeerReviews();
this.getManagerReview();
this.getSelfReview();
}

getManagerReview() {
const manager = this.lookupManager();
}

getSelfReview() {
// ...
}
}

const review = new PerformanceReview(employee);
review.perfReview();

Shi Dang De :

class PerformanceReview {
constructor(employee) {
this.employee = employee;
}

perfReview() {
this.getPeerReviews();
this.getManagerReview();
this.getSelfReview();
}

getPeerReviews() {
const peers = this.lookupPeers();
// ...
}

lookupPeers() {
return db.lookup(this.employee, 'peers');
}

getManagerReview() {
const manager = this.lookupManager();
}

lookupManager() {
return db.lookup(this.employee, 'manager');
}

getSelfReview() {
// ...
}
}

const review = new PerformanceReview(employee);
review.perfReview();

Hui Dao Mu Lu

Zhu Jie (Comments)

Zhi Dui Shang Ye Luo Ji Fu Za De Bu Fen Zhuan Xie Zhu Jie

Zhu Jie Shi Dai Biao De Bian Jie ,Er Bu Shi Yao Qiu . Duo Shu Qing Kuang Xia ,Hao De Cheng Shi Ma Ben Shen Jiu Shi Wen Jian .

Zao Gao De :

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;
}
}

Shi Dang De :

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;
}
}

Hui Dao Mu Lu

Bu Yao Zai Cheng Shi Ma Zhong Bao Liu Bei Zhu Jie Diao De Cheng Shi Ma

You Liao Ban Ben Kong Zhi ,Jiu De Cheng Shi Ma Liu Zai Li Shi Ji Lu Zhong Jiu Hao .

Zao Gao De :

doStuff();
// doOtherStuff();
// doSomeMoreStuff();
// doSoMuchStuff();

Shi Dang De :

doStuff();

Hui Dao Mu Lu

Bu Yao Liu You Ri Zhi Shi De Zhu Jie

Ji Zhu ,Shi Yong Ban Ben Kong Zhi !Bu Xu Yao Wu Yong De , Zhu Jie Diao De Cheng Shi Ma ,You Qi Shi Ri Zhi Shi De Zhu Jie . Shi Yong git log Lai Bao Cun Li Shi Ji Lu .

Zao Gao De :

/**
* 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;
}

Shi Dang De :

function combine(a, b) {
return a + b;
}

Yi Zhe Fu Zhu

Zai Zhu Jie Zhong Xie Li Shi Ji Lu Bing Mei You Zai Ban Ben Kong Zhi Zhong Lai De You Xiao ,Ling Wai Bu Chong You Guan Li Shi Ji Lu Ru He Zhuan Xie De Gui Fan (Ru He Zhuan Xie Git Commit Message).

Hui Dao Mu Lu

Bi Mian Wei Zhi Biao Shi

Ta Men Zhi Hui Zeng Jia Gan Rao . Rang Han Shu Yu Bian Shu De Ming Cheng Yan Zhu He Shi De Suo Pai Yu Ge Shi Hua ,Wei Ni De Cheng Shi Ma Dai Lai Liang Hao De Shi Jue Jie Gou .

Zao Gao De :

////////////////////////////////////////////////////////////////////////////////
// Scope Model Instantiation
////////////////////////////////////////////////////////////////////////////////
$scope.model = {
menu: 'foo',
nav: 'bar'
};

////////////////////////////////////////////////////////////////////////////////
// Action setup
////////////////////////////////////////////////////////////////////////////////
const actions = function() {
// ...
};

Shi Dang De :

$scope.model = {
menu: 'foo',
nav: 'bar'
};

const actions = function() {
// ...
};

Hui Dao Mu Lu

Fan Yi (Translation)

Yi Xia Wei Suo You De Fan Yi Ban Ben .

Hui Dao Mu Lu

About

Clean Code concepts adapted for JavaScript (Wu Xia De Cheng Shi Ma JavaScript)

Topics

Resources

Readme

License

MIT license

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%