1.竖立类

JavaScript中并没有真正的类，但JavaScript中有组织函数和new运算符。组织函数用来给实例对象初始化属性和值。任何JavaScript函数都能够用作组织函数，组织函数必需运用new运算符作为前缀来竖立新的实例。

new运算符转变了函数的实行上下文，同时转变了return语句的行动。实际上，运用new和组织函数很类似于传统的完成了类的言语：

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

//实例化一个Person
var alice = new Person("alice");

//搜检这个实例
assert(alice instanceof Person);

假如不运用new运算符而是：Person('bob';)这个函数只会返回undefined，而且实行上下文是window(全局)对象，无意间竖立了一个全局变量name。挪用组织函数时不要丢掉new关键字。

2.给类增加函数

在JavaScript中，在组织函数中给类增加函数和给对象增加属性是一样的：

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

要想给组织函数增加实例函数，则须要用到组织函数的prototype：

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

3.作废事宜

当事宜冒泡时，能够经由过程stopPropagation()函数来停止冒泡，这个函数是event对象中的要领。比方这段代码，任何父节点事宜回调都不会触发：

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

4.事宜对象

和上面提到的函数stopPropagation()和preventDefault()一样，event对象还包含许多有用的属性。

5.托付事宜

从事宜冒泡最先就发作了事宜托付，我们能够直接给父元素绑定事宜监听，用来检测在其子元素内发作的事宜。

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

6.原型继续

这里运用Object.create()来组织我们的ORM。这里运用基于原型的继续，而没有用到组织函数和new关键字。

Object.create()只要一个参数即原型对象，它返回一个新对象，这个新对象的原型就是传入的参数。换句话说，传入一个对象，返回一个继续了这个对象的新对象。

有些浏览器没有Object.create()要领，比方IE，能够模拟出该函数：

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

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

7.JSONP

JSONP(JSON with padding)，这是另一种从长途效劳器抓取数据的体式格局。道理是经由过程竖立一个script标签，所辖的外部文件包含一段JSON数据，数据是由效劳器所返回的，作为参数包装在一个函数挪用中。script标签猎取剧本文件并不受跨域限定，一切浏览器都支撑这类手艺。

8.localstorage用法

//设置一个值
localStorage["someData"] = "wem";
//存储数据的个数
var itemsStored = localStorage.length;
//设置一个项(是一种hash写法)
localStorage.setItem("someData", "wem");
//获得一个已存储的值，假如不存在就返回Null
localStorage.getItem("someData");//"wem";
//删除一个项，假如不存在就返回null
localStorage.removeItem("someData");
//清空当地存储
localStorage.clear();

数据均存储为字符串，所以假如你想保留的数据是对象或数字，则必需本身做范例转换，假如运用JSON的话，则须要将对象先做序列化处置惩罚再保留它们，从当地存储中读取JSON时也须要将它转换为对象：

var object = {some: "boject"};
//序列化并保留一个对象
localStorage.setItem("seriData", JSON.stringify(object));
//读取并将JSON转换为对象
var result = JSON.parse(localStorage.getItem("seriData"));

9.动态衬着视图

var views = document.getElementById("views");
views.innerHTML = "";//将元素内容清空
var container = document.createElement("div");
container.id = "user";
var name = document.createElement("span");
name.innerHTML = data.name;
container.appendChild(name);
views.appendChild(container);

10.无交互行动内容的闪灼(FUBC)

有时候用户能够会看到页面闪了一下，涌现一部分没有交互行动的内容疾速闪过(FUBC)，比方在JavaScript实行之前会有一部分无款式的页面原始内容闪灼一下。假如你不依靠JavaScript来修正初始页面的款式，题目实在并不严峻。然则假如依靠JavaScript来操纵款式，则须要将款式提取出来放入初始化CSS当中，比方隐蔽一些元素或展现一个加载指导器，指导页面正在加载中。

11.猎取文件信息

HTML5的文件操纵有肯定的平安限定，主要的限定是只要被用户选中的文件才被接见。将文件拖曳至浏览器中、选摘要输入的文件或将文件粘贴至Web运用中，这些操纵固然能够满足这一平安限定。只管已有人完成了“基于JavaScript的文件体系”，但这里的接见都是基于沙箱的。明显，许可JavaScript无限定的操纵文件会带来很严峻的平安风险。

在HTML5中运用File对象来示意文件，它有三个属性：

• name：文件名，这是一个只读字符串；
• size：文件大小，这是一个只读的整数；
• type：文件的MIME范例，是一个只读字符串，假如范例没有指定就是空字符串；
• 出于平安的缘由，文件的途径是没法获得的。

12.拖曳

拖曳的完成异常简朴。能够将元素的draggable属性设置为true来启用元素的拖曳。
<div id="dragme" draggable="true">Drag me!</div>

13.WebSocket

WebSocket是HTML5范例的一部分，供应了基于TCP的双向的、全双工的socket衔接。这意味着效劳器能够直接将数据推送给客户端，而不须要开发者求助于长轮询或插件来完成。和之前的效劳器推的手艺比拟，WebSocket有着庞大的上风，由于WebSocket是全双工的，而不是基于HTTP的，一旦竖立链接就不会断掉。

14.机能

• 进步机能：削减HTTP要求的数目。每个HTTP要求除了有TCP开支之外，还包含了大批的头信息。坚持最小的自力衔接数能够保证用户的页面家在速率更快。
• 将多个剧本文件兼并成为一个剧本文件，或将多个CSS兼并成为一个款式表，能削减页面衬着所需的HTTP衔接的数目。能够在布置或运行时如许做。
• 运用CSS Sprites手艺兼并多张小图成为一张大图，然后运用CSS的background-image和background-position属性在页面中显现对应的图片。只须要设定图片要显现的尺寸和背景位置的偏移坐标。
• 防止重定向也是削减HTTP要求的数目的要领。
• 明白浏览器怎样下载资本也很主要。为了加速页面衬着，当代浏览器并行下载所需的资本。然则，在一切的款式表和剧本下载完成之前，页面是不会最先衬着的。
• script标签的defer属性：设置defer的剧本将和其他资本一同并行下载，它们是不会壅塞页面的衬着。HTML5还引入了一个新的剧本下载和实行的形式，称作async。经由过程设置async属性，剧本将在完成下载后守候适宜的机遇实行代码。这意味着有能够异步不会根据它们在页面中涌现的递次实行代码，这又能够致使剧本实行若有依靠递次时失足。假如剧本没有依靠关联，async则是很有用的。

15.缓存

• 缓存就是将近来要求的资本存储到当地，以便接下来的要求能从磁盘中运用这些资本，而不必再次去下载。
• 针对静态资本，能够经由过程增加一个示意“在很远的未来才逾期”的Expires头，让缓存“永不”失效。这将保证浏览器只会下载一次该资本。一切的静态资本文件都应该如许设置，包含剧本、款式表和图片。Expires: Thu, 20 March 2015 00:00:00 GMT提议相对于当前日期设置一个示意“很远的未来”的失效日期。
• 然则假如想在谁人时候之前让资本逾期怎么办？在援用资本文件的URL查询参数中增加文件的修正时候。如许一来，任何时候文件被修正，资本文件的URL都邑转变，也即清除了缓存。<link rel="stylesheet" href="master.css?1231311516" type="text/css">
• HTTP1.1引入了一类新的头，Cache-Control。它带给开发者更高等的缓存，同时还弥补了Expires的不足。Cache-Control的掌握头信息有许多选项，可用逗号离隔：Cache-Control:max-age=3600, must-revalidate

Cache-Control参数：

16.源码紧缩

JavaScript源码紧缩是从剧本文件中删除不必要的字符，它不转变功用。款式表和HTML文件也能够被紧缩。

17.Gzip紧缩

在Web上Gzip是最盛行而且支撑最普遍的紧缩体式格局。

18.运用CDN

内容分发收集(或叫CDN)为你的站点供应静态资本内容效劳，以削减它们的加载时候。用户和Web效劳器之间的间隔对加载时候有直接的影响。CDN将你的内容布置在逾越多个地理位置的效劳器上，故当用户提议一个要求时，可从就近的效劳器获得相应资本。