《JavaScript Web富应用开发》读书笔记

摘要：创建类中并没有真正的类，但中有构造函数和运算符。任何函数都可以用作构造函数，构造函数必须使用运算符作为前缀来创建新的实例。调用构造函数时不要丢掉关键字。这里使用基于原型的继承，而没有用到构造函数和关键字。

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关键字。

在JavaScript中，在构造函数中给类添加函数和给对象添加属性是一样的：

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

要想给构造函数添加实例函数，则需要用到构造函数的prototype：

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

当事件冒泡时，可以通过stopPropagation()函数来终止冒泡，这个函数是event对象中的方法。比如这段代码，任何父节点事件回调都不会触发：

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

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

从事件冒泡开始就发生了事件委托，我们可以直接给父元素绑定事件监听，用来检测在其子元素内发生的事件。

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

这里使用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();
    }
}

JSONP(JSON with padding)，这是另一种从远程服务器抓取数据的方式。原理是通过创建一个script标签，所辖的外部文件包含一段JSON数据，数据是由服务器所返回的，作为参数包装在一个函数调用中。script标签获取脚本文件并不受跨域限制，所有浏览器都支持这种技术。

//设置一个值
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"));

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

有时候用户可能会看到页面闪了一下，出现一部分没有交互行为的内容快速闪过(FUBC)，比如在JavaScript执行之前会有一部分无样式的页面原始内容闪烁一下。如果你不依赖JavaScript来修改初始页面的样式，问题其实并不严重。但是如果依赖JavaScript来操作样式，则需要将样式提取出来放入初始化CSS之中，比如隐藏一些元素或展示一个加载指示器，指示页面正在加载中。

HTML5的文件操作有一定的安全限制，主要的限制是只有被用户选中的文件才能被访问。将文件拖曳至浏览器中、选择要输入的文件或将文件粘贴至Web应用中，这些操作当然可以满足这一安全限制。尽管已经有人实现了“基于JavaScript的文件系统”，但这里的访问都是基于沙箱的。显然，允许JavaScript无限制的操作文件会带来很严重的安全风险。

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

name：文件名，这是一个只读字符串；

size：文件大小，这是一个只读的整数；

type：文件的MIME类型，是一个只读字符串，如果类型没有指定就是空字符串；

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

拖曳的实现非常简单。可以将元素的draggable属性设置为true来启用元素的拖曳。

WebSocket是HTML5规范的一部分，提供了基于TCP的双向的、全双工的socket连接。这意味着服务器可以直接将数据推送给客户端，而不需要开发者求助于长轮询或插件来实现。和之前的服务器推的技术相比，WebSocket有着巨大的优势，因为WebSocket是全双工的，而不是基于HTTP的，一旦建立链接就不会断掉。

提高性能：减少HTTP请求的数量。每一个HTTP请求除了有TCP开销以外，还包含了大量的头信息。保持最小的独立连接数可以保证用户的页面家在速度更快。

将多个脚本文件合并成为一个脚本文件，或将多个CSS合并成为一个样式表，能减少页面渲染所需的HTTP连接的数量。可以在部署或运行时这样做。

使用CSS Sprites技术合并多张小图成为一张大图，然后使用CSS的background-image和background-position属性在页面中显示对应的图片。只需要设定图片要显示的尺寸和背景位置的偏移坐标。

避免重定向也是减少HTTP请求的数量的方法。

理解浏览器如何下载资源也很重要。为了加快页面渲染，现代浏览器并行下载所需的资源。但是，在所有的样式表和脚本下载完成之前，页面是不会开始渲染的。

script标签的defer属性：设置defer的脚本将和其他资源一起并行下载，它们是不会阻塞页面的渲染。HTML5还引入了一个新的脚本下载和执行的模式，称作async。通过设置async属性，脚本将在完成下载后等待合适的时机执行代码。这意味着有可能异步不会按照它们在页面中出现的顺序执行代码，这又可能导致脚本执行如有依赖顺序时出错。如果脚本没有依赖关系，async则是很有用的。

缓存就是将最近请求的资源存储到本地，以便接下来的请求能从磁盘中使用这些资源，而不用再次去下载。

针对静态资源，可以通过添加一个表示“在很远的将来才过期”的Expires头，让缓存“永不”失效。这将保证浏览器只会下载一次该资源。所有的静态资源文件都应该这样设置，包括脚本、样式表和图片。Expires: Thu, 20 March 2015 00:00:00 GMT建议相对于当前日期设置一个表示“很远的将来”的失效日期。

但是如果想在那个时间之前让资源过期怎么办？在引用资源文件的URL查询参数中添加文件的修改时间。这样一来，任何时候文件被修改，资源文件的URL都会改变，也即清除了缓存。

HTTP1.1引入了一类新的头，Cache-Control。它带给开发者更高级的缓存，同时还弥补了Expires的不足。Cache-Control的控制头信息有很多选项，可用逗号隔开：Cache-Control:max-age=3600, must-revalidate

Cache-Control参数：

JavaScript源码压缩是从脚本文件中删除不必要的字符，它不改变功能。样式表和HTML文件也可以被压缩。

在Web上Gzip是最流行并且支持最广泛的压缩方式。

内容分发网络(或叫CDN)为你的站点提供静态资源内容服务，以减少它们的加载时间。用户和Web服务器之间的距离对加载时间有直接的影响。CDN将你的内容部署在跨越多个地理位置的服务器上，故当用户发起一个请求时，可从就近的服务器得到响应资源。