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就是這麼用的