JavaScript 高级程序设计第二版

20.4 部署

20.4.1 构建

构建过程始于在源控制中定义用于存储文件的逻辑结构。最好避免使用一个文件存放所有的JavaScript，遵循以下面向对象语言中的典型模式：将每个对象或自定义了类别分别放入其单独的文件中。

记住将代码分离成为多个文件只是为了提高可维护性，并非为了部署。要进行部署的时候，需要将这些源代码合并为一个或几个归并文件。推荐Web应用中尽可能使用最少的JavaScript文件，是因为HTTP请求时Web中的主要性能瓶颈之一。记住通过<script>标记引用JavaScript文件时一个阻塞操作，当代码下载并运行的时候会停止其他所有的下载。因此，尽量从逻辑上将JavaScript代码分组成部署文件。

20.4.2 验证

查找JavaScript代码中的语法错误以及常见的编码错误。推荐使用JSLint。

20.4.3 压缩

JavaScript文件压缩，涉及：代码长度和配重（Wire weight）。代码长度是指浏览器所需街I型的字节数，配重是指实际从服务器传送到浏览器的字节数。

1. 文件压缩

· 删除额外的空白（包括换行）；

· 删除所有注释；

· 缩短变量名。

2. HTTP压缩

 

21.2 HTML5

21.2.1 字符集

HTML5描述HTMLDocument类型的一些新属性和新方法。这些属性石用于处理的字符集的。charset属性表示文档实际使用的字符集，也可以用于指定一个新的字符集。默认情况下，该值为“UTF-16”。

document.charset="UTF-8";

defaultCharset属性表示根据默认的浏览器和系统设置，文档所对应的默认字符集。如果文档不使用默认的字符集，charset和defaultCharset的值可能不相同。

21.2.2 类相关的增加

1. getElementByClassName()方法

通过类名查找元素。入参是一个或者多类的字符串。

21.2.4 跨文档消息传递

web开发中一个具有挑战性的领域，是如何让来自不同域名的文档进行通讯。浏览器创建的跨域安全策略是为了防止恶意网站与其他内容交互。

HTML跨文档消息传递系统就是专门设计来支持一种安全的通讯方式。不允许对另外一个文档的DOM和相关信息的直接访问，但允许文档发送和接受包含数据的消息。

跨文档消息传递的执行时使用任意window对象的postMessage()方法。这个方法接受2个参数：发送的数据，数据的目标域名。第二个参数是一个安全性功能，确保数据只发送给合适域名的文档。第二个参数为星号，表示发送给任何域名。

当调用了某个window对象的postMassage()时，且目标域名和该window的域名一致，那么document的message事件则会被触发。该事件的event包含以下属性：

· data——postMessage的第一个参数。

· origin——发送该消息的窗口的协议、域名和端口；

· source——发送该消息的窗口对象。

21.2.5 媒体元素

HTML5引入了<audio>和<video>元素。

21.2.6 <canvas>元素

它为在页面上绘制图案提供了一个画布。绘图画布开始总是空的，唯一设置其显示的方法是通过JavaScript。

<canvas id="drawing" width="200" height="2000"> A Drawing of something.</canvas>

var drawing = document.getElementById('drawing');

//确保完全支持<canvas>
if (drawing.getContext)  {
    var context = drawing.getContext('2d');
}

2D绘图环境的原点(0,0)在元素的左上角，坐标值都是相对该点计算的。默认情况下，width和height即宽和高，表示了在各个方向上各有多少个像素。

1. 绘制长方形

三个方法：fillRect()、strokeRect()和clearRect()。接受参数：x,y,width,height。单位都是像素。

填充颜色是使用fillStyle属性指定的。默认是黑色#000000.可以使用CSS的rgb()或者rgba()格式。

2. 绘制路径

3. 绘制文本

4. 变换

5. 使用图片

21.2.7 离线支持

能够在没有连接到互联网的时候还能运行。在这方面，HTML5引入了3样东西：

· navigator.online属性：浏览器是否处于联机状态。

· 当浏览器从联机转换到脱机状态时，会在文档主体出发offline事件，并冒泡到window。

· 当浏览器从脱机转换到联机状态时，会在文档主体触发online事件，并冒泡到window。

21.2.8 Ajax应用的提升

在Ajax应用中，浏览器的后腿功能不会重新载入或者跳转到别的页面，也就是说只有应用的状态在改变而不是位置。

HTML5给history添加了pushState()方法，运行给历史栈添加状态信息。它接受3个参数：包含状态信息的对象、状态的标题和一个可选的URL（表示浏览器的URL应该如何改变来反映这个状态）。

当调用了pushState()给历史栈添加了状态信息，后退功能就像访问了一个新的页面。

21.2.9 数据库存储

HTML5引入了用JavaScript从浏览器访问数据库系统的方式。Safari3.1实现了该功能。

window对的openDatabase()方法，它接受四个参数：数据库名称、数据库版本、显示名称以及数据库大概要多少字节的容量。

21.2.10 拖放操作

HTML5引入了draggable属性，表示是否可以拖动。图像和链接默认为true，其他为false。

当拖动时，会触发以下事件：dragstart、drag、dragend。

21.2.11 WebSocket类型

浏览器与服务器之间进行双向通讯的机制。

WebSocket的入参是一个URL。URL必须指定为ws或者wss协议以及一个绝对URL。例如

var socket = new WebSocket(“ws://www.yourdomain.com/connect/");

WebSocket对象的状态readyState属性，有几种值：0表示正在连接，1表示连接已打开，2表示连接已关闭。通过监听open和close事件来判断状态更加简单。

socket.onopen = function(event) {};

socket.onclose = function(event) {};

socket.onmessage = function(event) {  //接收数据

       var data = event.data;

};

socket.send(“fa=1”);    //发送数据