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

高質(zhì)量Javascript

Javascript特性：面向?qū)ο?，無類，原型

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

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

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

(不)擴充內(nèi)置原型

switch 模式

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

每個 case 中的代碼整齊縮進

每個 case 都以 break 作為結(jié)束

避免連續(xù)執(zhí)行多個 case 語句塊(當(dāng)省略 break 時會發(fā)生),如果你堅持認為連續(xù)

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

以 default 結(jié)束整個 switch,

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

避免隱式類型轉(zhuǎn)換（推薦使用===和!===）

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

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

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

編碼風(fēng)格（縮進，花括號，左花括號位置，空格）

命名規(guī)范（構(gòu)造函數(shù)大駝峰 函數(shù)和方法小駝峰 變量名小寫下劃線分隔 常量全大寫）

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

直接量和構(gòu)造函數(shù)

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

函數(shù)

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

回調(diào)模式：作用域，監(jiān)聽（addEventListener），超時(setTimeout)

IIFE,Memoization

柯里化

對象創(chuàng)建模式

命名空間方式

優(yōu)點:

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

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

缺點

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

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

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

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

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) {
    });
});

鏈?zhǔn)秸{(diào)用模式

優(yōu)點：節(jié)省代碼量，易讀性

缺點：調(diào)用這樣寫的代碼會更困難

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

代碼復(fù)用模式

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

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

類式繼承2:借用構(gòu)造函數(shù)
缺點：無法繼承原型

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

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

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

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

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

類式繼承5:臨時構(gòu)造函數(shù)

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

原型繼承(現(xiàn)代繼承模式)

var child = Object.create(parent);

借用方法

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

設(shè)計模式 單例

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訪問操作次數(shù)

避免在環(huán)境中訪問 DOM

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

當(dāng)可能的時候使用 selectors API

遍歷 HTML collections 時緩存 length

事件處理:隔離應(yīng)用邏輯,不要分發(fā)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 分塊

動態(tài)