摘要：創(chuàng)建類(lèi)中并沒(méi)有真正的類(lèi)，但中有構(gòu)造函數(shù)和運(yùn)算符。任何函數(shù)都可以用作構(gòu)造函數(shù)，構(gòu)造函數(shù)必須使用運(yùn)算符作為前綴來(lái)創(chuàng)建新的實(shí)例。調(diào)用構(gòu)造函數(shù)時(shí)不要丟掉關(guān)鍵字。這里使用基于原型的繼承，而沒(méi)有用到構(gòu)造函數(shù)和關(guān)鍵字。

JavaScript中并沒(méi)有真正的類(lèi)，但JavaScript中有構(gòu)造函數(shù)和new運(yùn)算符。構(gòu)造函數(shù)用來(lái)給實(shí)例對(duì)象初始化屬性和值。任何JavaScript函數(shù)都可以用作構(gòu)造函數(shù)，構(gòu)造函數(shù)必須使用new運(yùn)算符作為前綴來(lái)創(chuàng)建新的實(shí)例。

new運(yùn)算符改變了函數(shù)的執(zhí)行上下文，同時(shí)改變了return語(yǔ)句的行為。實(shí)際上，使用new和構(gòu)造函數(shù)很類(lèi)似于傳統(tǒng)的實(shí)現(xiàn)了類(lèi)的語(yǔ)言：

var Person = function (name) {
    this.name = name;
};

//實(shí)例化一個(gè)Person
var alice = new Person("alice");

//檢查這個(gè)實(shí)例
assert(alice instanceof Person);

如果不使用new運(yùn)算符而是：Person("bob";)這個(gè)函數(shù)只會(huì)返回undefined，并且執(zhí)行上下文是window(全局)對(duì)象，無(wú)意間創(chuàng)建了一個(gè)全局變量name。調(diào)用構(gòu)造函數(shù)時(shí)不要丟掉new關(guān)鍵字。

在JavaScript中，在構(gòu)造函數(shù)中給類(lèi)添加函數(shù)和給對(duì)象添加屬性是一樣的：

Person.find - function (id) {};
var person = Person.find(1);

要想給構(gòu)造函數(shù)添加實(shí)例函數(shù)，則需要用到構(gòu)造函數(shù)的prototype：

Person.prototype.breath = function(){};
var person = new Person;
person.breath();

當(dāng)事件冒泡時(shí)，可以通過(guò)stopPropagation()函數(shù)來(lái)終止冒泡，這個(gè)函數(shù)是event對(duì)象中的方法。比如這段代碼，任何父節(jié)點(diǎn)事件回調(diào)都不會(huì)觸發(fā)：

button.addEventListener("click", function (e) {
    e.stopPropagation();
}, false);

和上面提到的函數(shù)stopPropagation()和preventDefault()一樣，event對(duì)象還包含很多有用的屬性。

從事件冒泡開(kāi)始就發(fā)生了事件委托，我們可以直接給父元素綁定事件監(jiān)聽(tīng)，用來(lái)檢測(cè)在其子元素內(nèi)發(fā)生的事件。

//在ul列表上做了事件委托
list.addEventListener("click", function (e) {
    if (e.currentTarget.tagName == "li") {
        return false;
    }
}, false);

這里使用Object.create()來(lái)構(gòu)造我們的ORM。這里使用基于原型的繼承，而沒(méi)有用到構(gòu)造函數(shù)和new關(guān)鍵字。

Object.create()只有一個(gè)參數(shù)即原型對(duì)象，它返回一個(gè)新對(duì)象，這個(gè)新對(duì)象的原型就是傳入的參數(shù)。換句話說(shuō)，傳入一個(gè)對(duì)象，返回一個(gè)繼承了這個(gè)對(duì)象的新對(duì)象。

有些瀏覽器沒(méi)有Object.create()方法，比如IE，可以模擬出該函數(shù)：

if (typeof Object.create !== "function") {
    Object.create = function (o) {
        function F() {
        }

        F.prototype = o;
        return new F();
    }
}

JSONP(JSON with padding)，這是另一種從遠(yuǎn)程服務(wù)器抓取數(shù)據(jù)的方式。原理是通過(guò)創(chuàng)建一個(gè)script標(biāo)簽，所轄的外部文件包含一段JSON數(shù)據(jù)，數(shù)據(jù)是由服務(wù)器所返回的，作為參數(shù)包裝在一個(gè)函數(shù)調(diào)用中。script標(biāo)簽獲取腳本文件并不受跨域限制，所有瀏覽器都支持這種技術(shù)。

//設(shè)置一個(gè)值
localStorage["someData"] = "wem";
//存儲(chǔ)數(shù)據(jù)的個(gè)數(shù)
var itemsStored = localStorage.length;
//設(shè)置一個(gè)項(xiàng)(是一種hash寫(xiě)法)
localStorage.setItem("someData", "wem");
//得到一個(gè)已經(jīng)存儲(chǔ)的值，如果不存在就返回Null
localStorage.getItem("someData");//"wem";
//刪除一個(gè)項(xiàng)，如果不存在就返回null
localStorage.removeItem("someData");
//清空本地存儲(chǔ)
localStorage.clear();

數(shù)據(jù)均存儲(chǔ)為字符串，所以如果你想保存的數(shù)據(jù)是對(duì)象或數(shù)字，則必須自己做類(lèi)型轉(zhuǎn)換，如果使用JSON的話，則需要將對(duì)象先做序列化處理再保存它們，從本地存儲(chǔ)中讀取JSON時(shí)也需要將它轉(zhuǎn)換為對(duì)象：

var object = {some: "boject"};
//序列化并保存一個(gè)對(duì)象
localStorage.setItem("seriData", JSON.stringify(object));
//讀取并將JSON轉(zhuǎn)換為對(duì)象
var result = JSON.parse(localStorage.getItem("seriData"));

var views = document.getElementById("views");
views.innerHTML = "";//將元素內(nèi)容清空
var container = document.createElement("div");
container.id = "user";
var name = document.createElement("span");
name.innerHTML = data.name;
container.appendChild(name);
views.appendChild(container);

有時(shí)候用戶(hù)可能會(huì)看到頁(yè)面閃了一下，出現(xiàn)一部分沒(méi)有交互行為的內(nèi)容快速閃過(guò)(FUBC)，比如在JavaScript執(zhí)行之前會(huì)有一部分無(wú)樣式的頁(yè)面原始內(nèi)容閃爍一下。如果你不依賴(lài)JavaScript來(lái)修改初始頁(yè)面的樣式，問(wèn)題其實(shí)并不嚴(yán)重。但是如果依賴(lài)JavaScript來(lái)操作樣式，則需要將樣式提取出來(lái)放入初始化CSS之中，比如隱藏一些元素或展示一個(gè)加載指示器，指示頁(yè)面正在加載中。

HTML5的文件操作有一定的安全限制，主要的限制是只有被用戶(hù)選中的文件才能被訪問(wèn)。將文件拖曳至瀏覽器中、選擇要輸入的文件或?qū)⑽募迟N至Web應(yīng)用中，這些操作當(dāng)然可以滿足這一安全限制。盡管已經(jīng)有人實(shí)現(xiàn)了“基于JavaScript的文件系統(tǒng)”，但這里的訪問(wèn)都是基于沙箱的。顯然，允許JavaScript無(wú)限制的操作文件會(huì)帶來(lái)很?chē)?yán)重的安全風(fēng)險(xiǎn)。

在HTML5中使用File對(duì)象來(lái)表示文件，它有三個(gè)屬性：

name：文件名，這是一個(gè)只讀字符串；

size：文件大小，這是一個(gè)只讀的整數(shù)；

type：文件的MIME類(lèi)型，是一個(gè)只讀字符串，如果類(lèi)型沒(méi)有指定就是空字符串；

出于安全的原因，文件的路徑是無(wú)法得到的。

拖曳的實(shí)現(xiàn)非常簡(jiǎn)單?？梢詫⒃氐膁raggable屬性設(shè)置為true來(lái)啟用元素的拖曳。

WebSocket是HTML5規(guī)范的一部分，提供了基于TCP的雙向的、全雙工的socket連接。這意味著服務(wù)器可以直接將數(shù)據(jù)推送給客戶(hù)端，而不需要開(kāi)發(fā)者求助于長(zhǎng)輪詢(xún)或插件來(lái)實(shí)現(xiàn)。和之前的服務(wù)器推的技術(shù)相比，WebSocket有著巨大的優(yōu)勢(shì)，因?yàn)閃ebSocket是全雙工的，而不是基于HTTP的，一旦建立鏈接就不會(huì)斷掉。

提高性能：減少HTTP請(qǐng)求的數(shù)量。每一個(gè)HTTP請(qǐng)求除了有TCP開(kāi)銷(xiāo)以外，還包含了大量的頭信息。保持最小的獨(dú)立連接數(shù)可以保證用戶(hù)的頁(yè)面家在速度更快。

將多個(gè)腳本文件合并成為一個(gè)腳本文件，或?qū)⒍鄠€(gè)CSS合并成為一個(gè)樣式表，能減少頁(yè)面渲染所需的HTTP連接的數(shù)量?？梢栽诓渴鸹蜻\(yùn)行時(shí)這樣做。

使用CSS Sprites技術(shù)合并多張小圖成為一張大圖，然后使用CSS的background-image和background-position屬性在頁(yè)面中顯示對(duì)應(yīng)的圖片。只需要設(shè)定圖片要顯示的尺寸和背景位置的偏移坐標(biāo)。

避免重定向也是減少HTTP請(qǐng)求的數(shù)量的方法。

理解瀏覽器如何下載資源也很重要。為了加快頁(yè)面渲染，現(xiàn)代瀏覽器并行下載所需的資源。但是，在所有的樣式表和腳本下載完成之前，頁(yè)面是不會(huì)開(kāi)始渲染的。

script標(biāo)簽的defer屬性：設(shè)置defer的腳本將和其他資源一起并行下載，它們是不會(huì)阻塞頁(yè)面的渲染。HTML5還引入了一個(gè)新的腳本下載和執(zhí)行的模式，稱(chēng)作async。通過(guò)設(shè)置async屬性，腳本將在完成下載后等待合適的時(shí)機(jī)執(zhí)行代碼。這意味著有可能異步不會(huì)按照它們?cè)陧?yè)面中出現(xiàn)的順序執(zhí)行代碼，這又可能導(dǎo)致腳本執(zhí)行如有依賴(lài)順序時(shí)出錯(cuò)。如果腳本沒(méi)有依賴(lài)關(guān)系，async則是很有用的。

緩存就是將最近請(qǐng)求的資源存儲(chǔ)到本地，以便接下來(lái)的請(qǐng)求能從磁盤(pán)中使用這些資源，而不用再次去下載。

針對(duì)靜態(tài)資源，可以通過(guò)添加一個(gè)表示“在很遠(yuǎn)的將來(lái)才過(guò)期”的Expires頭，讓緩存“永不”失效。這將保證瀏覽器只會(huì)下載一次該資源。所有的靜態(tài)資源文件都應(yīng)該這樣設(shè)置，包括腳本、樣式表和圖片。Expires: Thu, 20 March 2015 00:00:00 GMT建議相對(duì)于當(dāng)前日期設(shè)置一個(gè)表示“很遠(yuǎn)的將來(lái)”的失效日期。

但是如果想在那個(gè)時(shí)間之前讓資源過(guò)期怎么辦？在引用資源文件的URL查詢(xún)參數(shù)中添加文件的修改時(shí)間。這樣一來(lái)，任何時(shí)候文件被修改，資源文件的URL都會(huì)改變，也即清除了緩存。

HTTP1.1引入了一類(lèi)新的頭，Cache-Control。它帶給開(kāi)發(fā)者更高級(jí)的緩存，同時(shí)還彌補(bǔ)了Expires的不足。Cache-Control的控制頭信息有很多選項(xiàng)，可用逗號(hào)隔開(kāi)：Cache-Control:max-age=3600, must-revalidate

Cache-Control參數(shù)：

JavaScript源碼壓縮是從腳本文件中刪除不必要的字符，它不改變功能。樣式表和HTML文件也可以被壓縮。

在Web上Gzip是最流行并且支持最廣泛的壓縮方式。

內(nèi)容分發(fā)網(wǎng)絡(luò)(或叫CDN)為你的站點(diǎn)提供靜態(tài)資源內(nèi)容服務(wù)，以減少它們的加載時(shí)間。用戶(hù)和Web服務(wù)器之間的距離對(duì)加載時(shí)間有直接的影響。CDN將你的內(nèi)容部署在跨越多個(gè)地理位置的服務(wù)器上，故當(dāng)用戶(hù)發(fā)起一個(gè)請(qǐng)求時(shí)，可從就近的服務(wù)器得到響應(yīng)資源。