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

高質(zhì)量Javascript

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

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

減少全局對(duì)象，傳參訪問全局對(duì)象

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

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

switch 模式

每個(gè) case 和 switch 對(duì)齊(這里不考慮花括號(hào)相關(guān)的縮進(jìn)規(guī)則)

每個(gè) case 中的代碼整齊縮進(jìn)

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

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

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

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

以確保即便是在找不到匹配項(xiàng)時(shí)也會(huì)有正常的結(jié)果

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

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

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

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

編碼風(fēng)格（縮進(jìn)，花括號(hào)，左花括號(hào)位置，空格）

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

注釋jsdoc生成文檔，eslint檢查，相互評(píng)審

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

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

函數(shù)

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

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

IIFE,Memoization

柯里化

對(duì)象創(chuàng)建模式

命名空間方式

優(yōu)點(diǎn):

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

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

缺點(diǎn)

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

該全局實(shí)例可以被隨時(shí)修改

命名的深度嵌套會(huì)減慢屬性值的查詢

模塊模式（命名空間模式+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)點(diǎn)：節(jié)省代碼量，易讀性

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

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

代碼復(fù)用模式

類式繼承1：默認(rèn)模式
缺點(diǎn)：既繼承了(父對(duì)象)“自己的屬性”,也繼承了原型中的屬性。大部分情況下你可能并不需要“自己的屬性”,因?yàn)樗鼈兏赡苁菫閷?shí)例對(duì)象添加的,并不用于復(fù)用。

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

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

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

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

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

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

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

類式繼承5:臨時(shí)構(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è)計(jì)模式 單例

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)可能的時(shí)候使用 selectors API

遍歷 HTML collections 時(shí)緩存 length

事件處理:隔離應(yīng)用邏輯,不要分發(fā)event對(duì)象

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 分塊

動(dòng)態(tài)