• 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. 绘制路径

    image

    3. 绘制文本

    image

    4. 变换

    image

    5. 使用图片

    image

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

  • 相关阅读:
    RM报表 实际打印的判断
    ehlib 如何用代码,选中checkbox呢?
    [CF632A]Grandma Laura and Apples
    [洛谷P3693]琪露诺的冰雪小屋
    [CF1065A]Vasya and Chocolate
    [UOJ #52]【UR #4】元旦激光炮
    [UOJ #48]【UR #3】核聚变反应强度
    [UOJ #51]【UR #4】元旦三侠的游戏
    [洛谷P1401]城市
    [洛谷P4722]【模板】最大流 加强版 / 预流推进
  • 原文地址:https://www.cnblogs.com/javawer/p/3674008.html
Copyright © 2020-2023  润新知