摘要：高質量特性面向對象，無類，原型可維護的代碼可讀一致可預測看起來像是同一個人寫的文檔減少全局對象，傳參訪問全局對象單模式，忘記時的副作用顯式聲明的全局變量無法用刪除不擴充內置原型模式每個和對齊這里不考慮花括號相關的縮進規則每個中的代碼整齊縮進

高質量Javascript

Javascript特性：面向對象，無類，原型

可維護的代碼(可讀;一致;可預測;看起來像是同一個人寫的;文檔)

減少全局對象，傳參訪問全局對象

單 var 模式，忘記 var 時的副作用(顯式聲明的全局變量無法用 delete 刪除)

(不)擴充內置原型

switch 模式

每個 case 和 switch 對齊(這里不考慮花括號相關的縮進規則)

每個 case 中的代碼整齊縮進

每個 case 都以 break 作為結束

避免連續執行多個 case 語句塊(當省略 break 時會發生),如果你堅持認為連續

執行多 case 語句塊是最好的方法,請務必補充文檔說明,對于其他人來說,這種情況看起來是錯誤的。

以 default 結束整個 switch,

以確保即便是在找不到匹配項時也會有正常的結果

避免隱式類型轉換（推薦使用===和!===）

typeof null==="object"；instanceof 檢測引用值

避免使用 eval()（用 new Function()來代替，它是局部函數作用域，var 定義的變量不會自動變成全局變量）

使用 parseInt()進行數字轉換，總是指定第二個參數(parseInt(year, 10))

編碼風格（縮進，花括號，左花括號位置，空格）

命名規范（構造函數大駝峰 函數和方法小駝峰 變量名小寫下劃線分隔 常量全大寫）

注釋jsdoc生成文檔，eslint檢查，相互評審

直接量和構造函數

1.對象直接量，JSON,正則表達式直接量
1.強制new,避免使用其他的內置構造函數:String()、Number()、Boolean()以及不同種類的
Error()構造器,that=this

函數

函數特性：是一等對象，可以有屬性和方法，聲明提前，提供局部變量作用域

回調模式：作用域，監聽（addEventListener），超時(setTimeout)

IIFE,Memoization

柯里化

對象創建模式

命名空間方式

優點:

避免了自身代碼的命名沖突,

避免了同一個頁面上自身代碼和第三方代碼的沖突

缺點

代碼量稍有增加;在每個函數和變量前加上這個命名空間對象的前綴,會增加代碼量,增大文件大小

該全局實例可以被隨時修改

命名的深度嵌套會減慢屬性值的查詢

模塊模式（命名空間模式+IIFE+私有和特權成員模式+依賴聲明模式）

MYAPP.utilities.module = (function (app, global) {
return (function(){})()
}(MYAPP, this))

沙箱模式

Sandbox.modules = {};
Sandbox.modules.dom = function (box) {};
Sandbox("dom", "event", function (box) {
    Sandbox("ajax", function(box) {
    });
});

鏈式調用模式

優點：節省代碼量，易讀性

缺點：調用這樣寫的代碼會更困難

myobj.method1("hello").method2().method3("world").method4();

代碼復用模式

類式繼承1：默認模式
缺點：既繼承了(父對象)“自己的屬性”,也繼承了原型中的屬性。大部分情況下你可能并不需要“自己的屬性”,因為它們更可能是為實例對象添加的,并不用于復用。

function inherit(C, P) {
    C.prototype = new P();
}

類式繼承2:借用構造函數
缺點：無法繼承原型

function Child(a, c, b, d) {
    Parent.apply(this, arguments);
}

類式繼承3:借用并設置原型(1,2的缺點修復，接近java)
缺點：父構造函數被調用了兩次,所以不是很高效

function Child(a, c, b, d) {
    Parent.apply(this, arguments);
}
Child.prototype = new Parent();

類式繼承4:共享原型
缺點：修改原型影響所有的繼承

function inherit(C, P) {
   C.prototype = P.prototype;
}

類式繼承5:臨時構造函數

  function inherit(C, P) {
      var F = function () {};
      F.prototype = P.prototype;
      C.prototype = new F();
  }

原型繼承(現代繼承模式)

var child = Object.create(parent);

借用方法

 //call() example
 notmyobj.doStuff.call(myobj, param1, p2, p3);
 // apply() example
 notmyobj.doStuff.apply(myobj, [param1, p2, p3]);

設計模式 單例

var obj = {
myprop: "my value"
};

工廠模式

var corolla = CarMaker.factory("Compact");
var solstice = CarMaker.factory("Convertible");
var cherokee = CarMaker.factory("SUV");
corolla.drive(); // "Vroom, I have 4 doors"
solstice.drive(); // "Vroom, I have 2 doors"
cherokee.drive(); // "Vroom, I have 17 doors"

迭代器

var element;
while (element = agg.next()) {
// do something with the element ...
console.log(element);
}

裝飾器

var sale = new Sale(100); // the price is 100 dollars
sale = sale.decorate("fedtax"); // add federal tax
sale = sale.decorate("cdn"); // format using CDN
sale.getPrice(); // "CDN$ 105.00"

策略模式

var data = {
    first_name: "Super",
    last_name: "Man",
    age: "unknown",
    username: "o_O"
};
validator.config = {
    first_name: "isNonEmpty",
    age: "isNumber",
    username: "isAlphaNum"
};
validator.validate(data);
if (validator.hasErrors()) {
    console.log(validator.messages.join("
"));
}

外觀模式

var myevent = {
// ...
stop: function (e) {
    // others
    if (typeof e.preventDefault === "function")
        e.preventDefault();
    if (typeof e.stopPropagation === "function")
        e.stopPropagation();
    // IE
    if (typeof e.returnValue === "boolean") 
        e.returnValue = false;
    if (typeof e.cancelBubble === "boolean") 
        e.cancelBubble = true;
}
// ...
};

代理模式

scroll_per_second=throttle(scroll,1000)

中介者

counter=function(){
    var i=0;
    return function(){
        return ++i;
    }
}
counter()

觀察者模式

paper.subscribe(joe.drinkCoffee);
paper.subscribe(joe.sundayPreNap, "monthly");
paper.daily();
paper.monthly();

DOM 和瀏覽器中的模式

減少DOM訪問操作次數

避免在環境中訪問 DOM

將 DOM 引用賦給本地變量,然后操作本地變量

當可能的時候使用 selectors API

遍歷 HTML collections 時緩存 length

事件處理:隔離應用邏輯,不要分發event對象

var MyApplication={
    handleClick(event){
        this.showPopup(event.clientX,event.clientY)
    },
    showPopup:function(x,y){
    }
}
b.addEventListener("click", function(event){
    MyApplication.handleClick(event)
}, false);

事件委托

Y.delegate("click", myHandler, "#click-wrap", "button");

加載策略

script 元素放到頁面的尾部

HTTP 分塊

動態