如何写出漂亮的 JavaScript 代码
如何提高代码的可读性、复用性、扩展性。我们将从以下四个方面讨论:
- 变量函数类异步
一、变量
对同一类型的变量使用相同的命名保持统一:
// Bad:
getUserInfo();
getClientData();
getCustomerRecord();
// Good:
getUser()
每个常量(全大写)都该命名
可以用 ESLint 检测代码中未命名的常量。
// Bad:
// 其他人知道 86400000 的意思吗?
setTimeout( blastOff, 86400000 );
// Good:
const MILLISECOND_IN_A_DAY = 86400000;
setTimeout( blastOff, MILLISECOND_IN_A_DAY );
避免无意义的命名
既然创建了一个 car 对象,就没有必要把它的颜色命名为 carColor。
// Bad:
const car = {
carMake: 'Honda',
carModel: 'Accord',
carColor: 'Blue'
};
function paintCar( car ) {
car.carColor = 'Red';
}
// Good:
const car = {
make: 'Honda',
model: 'Accord',
color: 'Blue'
};
function paintCar( car ) {
car.color = 'Red';
}
传参使用默认值
// Bad:
function createMicrobrewery( name ) {
const breweryName = name || 'Hipster Brew Co.';
// ...
}
// Good:
function createMicrobrewery( name = 'Hipster Brew Co.' ) {
// ...
}
二、函数
函数参数( 最好 2 个或更少 )
如果参数超过两个,建议使用 ES6 的解构语法,不用考虑参数的顺序。
// Bad:
function createMenu( title, body, buttonText, cancellable ) {
// ...
}
// Good:
function createMenu( { title, body, buttonText, cancellable } ) {
// ...
}
createMenu({
title: 'Foo',
body: 'Bar',
buttonText: 'Baz',
cancellable: true
});
一个方法只做一件事情
这是一条在软件工程领域流传久远的规则。严格遵守这条规则会让你的代码可读性更好,也更容易重构。如果违反这个规则,那么代码会很难被测试或者重用。
// Bad:
function emailClients( clients ) {
clients.forEach( client => {
const clientRecord = database.lookup( client );
if ( clientRecord.isActive() ) {
email( client );
}
});
}
// Good:
function emailActiveClients( clients ) {
clients
.filter( isActiveClient )
.forEach( email );
}
function isActiveClient( client ) {
const clientRecord = database.lookup( client );
return clientRecord.isActive();
}
函数名上体现它的作用
// Bad:
function addToDate( date, month ) {
// ...
}
const date = new Date();
// 很难知道是把什么加到日期中
addToDate( date, 1 );
// Good:
function addMonthToDate( month, date ) {
// ...
}
const date = new Date();
addMonthToDate( 1, date );
删除重复代码,合并相似函数
很多时候虽然是同一个功能,但由于一两个不同点,让你不得不写两个几乎相同的函数。
// Bad:
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);
});
}
// Good:
function showEmployeeList(employees) {
employees.forEach(employee => {
const expectedSalary = employee.calculateExpectedSalary();
const experience = employee.getExperience();
const data = {
expectedSalary,
experience,
};
switch(employee.type) {
case 'develop':
data.githubLink = employee.getGithubLink();
break
case 'manager':
data.portfolio = employee.getMBAProjects();
break
}
render(data);
})
}
使用 Object.assign 设置默认属性
// Bad:
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);
// Good:
const menuConfig = {
title: 'Order',
// 不包含 body
buttonText: 'Send',
cancellable: true
};
function createMenu(config) {
config = Object.assign({
title: 'Foo',
body: 'Bar',
buttonText: 'Baz',
cancellable: true
}, config);
// config : {title: "Order", body: "Bar", buttonText: "Send", cancellable: true}
// ...
}
createMenu(menuConfig);
尽量不要写全局方法
在 JavaScript 中,永远不要污染全局,会在生产环境中产生难以预料的 bug。举个例子,比如你在 Array.prototype 上新增一个 diff 方法来判断两个数组的不同。而你同事也打算做类似的事情,不过他的 diff 方法是用来判断两个数组首位元素的不同。很明显你们方法会产生冲突,遇到这类问题我们可以用 ES2015/ES6 的语法来对 Array 进行扩展。
// Bad:
Array.prototype.diff = function diff(comparisonArray) {
const hash = new Set(comparisonArray);
return this.filter(elem => !hash.has(elem));
};
// Good:
class SuperArray extends Array {
diff(comparisonArray) {
const hash = new Set(comparisonArray);
return this.filter(elem => !hash.has(elem));
}
}
尽量别用“非”条件句
// Bad:
function isDOMNodeNotPresent(node) {
// ...
}
if (!isDOMNodeNotPresent(node)) {
// ...
}
// Good:
function isDOMNodePresent(node) {
// ...
}
if (isDOMNodePresent(node)) {
// ...
}
不要过度优化
现代浏览器已经在底层做了很多优化,过去的很多优化方案都是无效的,会浪费你的时间。
// Bad:
// 现代浏览器已对此( 缓存 list.length )做了优化。
for (let i = 0, len = list.length; i < len; i++) {
// ...
}
// Good:
for (let i = 0; i < list.length; i++) {
// ...
}
删除弃用代码
这里没有实例代码,删除就对了
三、类
使用 ES6 的 class
在 ES6 之前,没有类的语法,只能用构造函数的方式模拟类,可读性非常差。
// 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 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);
}
}
// Bad:
const car = new Car('Ford','F-150','red');
car.setColor('pink');
car.save();
// Good:
class Car {
constructor(make, model, color) {
this.make = make;
this.model = model;
this.color = color;
}
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("Ford", "F-150", "red").setColor("pink").save();
四、异步
使用 promise 或者 Async/Await 代替回调
// Bad:
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');
}
});
}
});
// Good:
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);
});
// perfect:
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);
}
}
本文来自:掘金
原文链接:https://juejin.im/post/5d0e11196fb9a07eee5ed6d2,译自:github.com/ryanmcdermo…
说明:本文翻译自 github 上的一个项目,非全文搬运,只取部分精华。
汇智动力IT学院,做一个勤劳的IT技术干货搬运工,只为成就你的IT梦!
上一篇:广东交通职业技术学院普高招生 | 欢迎报读信息技术类专业
下一篇:中共长治市委党校振兴分校在太行乡村振兴人才学院揭牌成立
最近更新行业动态
- 全国211大学排名榜单公布,划分2个行政级别!
- 小学语文阅读专项十五——说明文阅读的简单方法
- 线上学校为“数字化教师”赋能
- 广钢3所“大公办”幼儿园集中开园
- 安徽师范大学附属巢湖实验中学今秋正式招新生
- 反驳俞敏洪,中小学教师绝对有资格,也绝对能胜任教学岗位
- 高考275人上清华北大,衡水中学却被质疑,看到这张图大家沉默了
- 大学生入党和不入党有什么差别?看完这篇文章你就知道了
- 三年级数学期末考试,学生考了60分,全班第3名,妈妈听后却哭了
- “鬼才”历史老师:重大“标志性”事件绘成表,初中3年不再愁
- 如果学霸当中小学老师,会不会提升档次?网友:学霸不适合当老师
- 中学校服收2300元:家委会别没“存在感”
- 三年级语文修改病句练习题汇总,很全面(可打印),期中考试要考
- 江苏最憋屈的大学,曾是全国重点大学,如今却连211都没混上!
- 高中数学:函数和导数题型你会做吗?
- 2020部编版三年级语文下册,第二单元测试卷,附答案
- 幼儿园开学时间终于敲定了,家长态度不一,对此,你怎么看待?
- 重要提醒:国务院将体育纳入高中学业水平测试是否影响你?
- 重磅!四川公办民办高中取消自主招生考试,录取以中考成绩为依据!
- 西湖大学28位创始捐赠人中9位河南老乡 施一公:我很感谢他们
- 初中数学教学的几点思考
- 揭秘全美顶尖公立高中新泽西High Tech High
- 幼儿园小女生每天闯关1小时,妈妈解脱了,她却驶上“快车道”!
- 初中生“早恋”时,多半会偷偷做“3件事”,尤其第1件太真实!
- 网传贵阳一幼儿园20名幼儿食物中毒 教育部门辟谣