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

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

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

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

//實例化一個Person
var alice = new Person("alice");

//檢查這個實例
assert(alice instanceof Person);

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

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

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

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

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

當事件冒泡時，可以通過stopPropagation()函數(shù)來終止冒泡，這個函數(shù)是event對象中的方法。比如這段代碼，任何父節(jié)點事件回調(diào)都不會觸發(fā)：

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

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

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

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

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

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

有些瀏覽器沒有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)，這是另一種從遠程服務器抓取數(shù)據(jù)的方式。原理是通過創(chuàng)建一個script標簽，所轄的外部文件包含一段JSON數(shù)據(jù)，數(shù)據(jù)是由服務器所返回的，作為參數(shù)包裝在一個函數(shù)調(diào)用中。script標簽獲取腳本文件并不受跨域限制，所有瀏覽器都支持這種技術(shù)。

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

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

var object = {some: "boject"};
//序列化并保存一個對象
localStorage.setItem("seriData", JSON.stringify(object));
//讀取并將JSON轉(zhuǎn)換為對象
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);

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

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

在HTML5中使用File對象來表示文件，它有三個屬性：

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

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

type：文件的MIME類型，是一個只讀字符串，如果類型沒有指定就是空字符串；

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

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

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

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

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

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

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

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

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

緩存就是將最近請求的資源存儲到本地，以便接下來的請求能從磁盤中使用這些資源，而不用再次去下載。

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

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

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

Cache-Control參數(shù)：

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

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

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