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”); //发送数据