1.看第一个例子:
var width = (value - 0.5) * 16;
看这句代码你一定不知道这是什么意思,必须注解才能看懂。我们换种方式看看:
var width = emToPixels(value);
function emToPixels(ems) {
return (ems - 0.5) * 16;
}
我们把要计算的语句放入了函数当中,看见函数名我们就知道这段代码是计算宽度的像素,而且这个函数能够复用,在其他地方使用就不需要重新复制黏贴代码。
2.看第二个例子
if(!el.offsetWidth || !el.offsetHeight) {
}
如果没有注解的话,真心不知道这个几个意思,改进代码:
function isVisible(el) {
return el.offsetWidth && el.offsetHeight;
}
if(!isVisible(el)) {
}
把表达式语句放入了函数当中,看函数名就不目了然了。当然还有一个方法,不需要新建个函数:
var isVisible = el.offsetWidth && el.offsetHeight;
if(!isVisible) {
}
3.第三个例子
return a * b + (c / d);
改进的代码:
var multiplier = a * b;
var divisor = c / d;
return multiplier + divisor;
4.第四个例子类和接口
class Box {
setState(state) {
this.state = state;
}
getState() {
return this.state;
}
}
虽然类中的函数有名字,但是函数名如果不经过注解进行解释的话,很难理解这个是要干嘛的。改进办法:
class Box {
open() {
this.state = 'open';
}
close() {
this.state = 'closed';
}
isOpen() {
return this.state === 'open';
}
}
改进后的类,一看就知道要干什么,而且this.state也不变。
5.第五个例子
var foo = 1;
blah()
xyz();
bar(foo);
baz(1337);
quux(foo);
你能看出foo使用了多少次吗?改进:
var foo = 1;
bar(foo);
quux(foo);
blah()
xyz();
baz(1337);
6第六个例子
把相同类型的文件放在同一个目录中,如果有个ui相关代码,应该把他放在src/ui/中,这样不混乱,容易查找
7.如果你有一个特定类型的对象,调用它的同名:
var element = getElement();
var node = getElement(); //不要突然把它叫做一个节点,这个方式不好
8.有意义的错误信息
它能描述问题是什么;如果可能,它能包含引起错误的任何变量值或者其他的数据;最关键的是:错误能够帮助我们找出什么地方出现了错误。
9.不要使用语法技巧
imTricky && doMagic();
这段代码虽然简洁,但是谁能够看明白它是什么意思?还是老老实实的这样写把:
if(imTricky) {
doMagic();
}
10.如果在你的代码中有个特殊的值,例如数值或者字符串,使用常量定义。即使它现在能够让人看明白,但是过了一两个月再回过头看的话,没有人知道这个变量放在这里是干什么的。:
const MEANING_OF_LIFE = 42;
11.避免使用布尔标志
myThing.setData({ x: 1 }, true);
你能看出true放在这里是什么意思吗?除非你再进入setData里面去看。
相反,添加另一个函数或者重命名函数:
myThing.mergeData({ x: 1 });
马上明白它要做什么。
12
var ids = [];
for(var i = 0; i < things.length; i++) {
ids.push(things[i].id);
}
为了能看懂这个循环代码,我们需要读整个循环,使用map:
var ids = things.map(function(thing) {
return thing.id;
});
我们能够明白要生成一个新的数组,因为map就是这么用的