不需要注解就能看出代码含义的一些方法

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就是这么用的