《JavaScript高级程序设计》(第3版)学习笔记及心得。写于入门JS第9个月。

2.1 <script>元素

属性

  • async: 可选。是否立即下载脚本,仅对外部脚本文件有效。

  • charset: 可选。通过src属性指定代码的字符集。(很少用)

  • defer: 可选。是否延迟到DOM完全被解析和显示之后再执行。仅对外部脚本文件有效。

  • language: 已废弃。

  • src: 可选。包含要执行代码的外部文件。带有此属性的<script>元素,浏览器不会再解析其<script>之间的代码。可以是外部域的地址,但要小心使用。

  • type: 可选。编写代码使用的脚本语言的内容类型(MIME类型),默认text/javascript.

  • 很多地方将async描述为“是否异步执行”,但毕竟还得看defer,所以我感觉还是《高程》里的描述准确些。

截取runoob.com中关于async属性的解释(http://www.runoob.com/tags/att-script-async.html):

clipboard.png

使用<script>元素方式

  1. 直接在页面中嵌入JavaScript代码
    注意不要在代码中的任何位置出现</script>, 如果一定需要,可以用转义字符"\", 如"<\/script>".

  2. 包含外部JavaScript文件
    XHTML文档中可以省略关闭标签</script>, 但不符合HTML规范(得不到某些浏览器尤其是IE的正确解析).

2.1.1 标签的位置

传统的做法是把所有<script>元素放在<head>内,这样做意味着,必须等到全部JavaScript代码都被下载、解析和执行完成之后,才开始加载页面内容。所以对于JavaScript比较多的页面来说,会导致浏览器在呈现页面时出现明显延时。

所以现代Web应用程序一般把JavaScript全部放在<body>最后。或者通过defer设置何时加载。

2.1.2 延迟脚本

设置defer="defer"后,当前脚本会优先于DOMContentLoaded事件【详见第十三章】执行)。注意:在现实中,延时脚本并不一定会按照顺序执行,也不一定会在DOMContentLoaded事件出发前执行,因此最好只包含一个延迟脚本。

2.1.3 异步脚本

  1. async属性。是否立即下载文件。亦不保证按照指定他们的先后顺序执行。

  2. 指定async属性的目的一般是:不让页面等待两个脚本下载和执行,从而异步加载页面其他内容。为此,建议异步脚本不要在其加载期间修改DOM.

  3. 异步脚本一定会在页面的load事件前执行,但可能会在DOMContentLoaded事件触发之前或之后执行。

  4. 支持的浏览器: Firefox 3.6+, Safari 5+ 和 Chrome.

2.1.4 在XHTML中的用法

可扩展超文本标记语言(XHTML), 是将HTML作为XML的应用而重新定义的饿一个标准。编写XHTML要比HTML严格得多,而且直接影响能否在嵌入JavaScript代码是使用<script/>标签。

<script>
    function compare(a, b){
        if(a < b){ //此处在XHTML中,"<"会被解析为下一个标签的开始
            alert("A is less than B");
        }else if(a > b){ 
            alert("A is greater than B");
        }elss{
            alert("A is equal to B");
        }
    }
</script>

解决方案:

1.用相应的HTML实体(<)替换代码中所有小于号(<), 如:

if(a &lt; b){}

2.用一个CData片段来包含JavaScript代码。在XHTML(XML)中,CData片段是文档中的一个特殊区域,这个区域可以包含不需要解析的任意格式的文本内容。如:

<script type="text/javascript">
<![CDATA[
function compare(a, b){
    if(a < b){ //此处在XHTML中,"<"会被解析为下一个标签的开始
        alert("A is less than B");
    }else if(a > b){ 
        alert("A is greater than B");
    }elss{
        alert("A is equal to B");
    }
}
]]>
//若需要解决有些浏览器不兼容XHTML、不支持CData片段,可以使用注释将CData标记注释掉。
</script>

注:将页面的MIME类型指定为"application/xhtml+xml"的情况下会触发XHTML模式。并不是所有浏览器都支持以这种方式提供XHTML文档。

2.2 嵌入代码与外部文件

外部文件有以下优点:

  • 可维护性

  • 可缓存

  • 适应未来(通过外部文件来包含JavaScript无需使用前面提到XHTML或注释hack。HTML和XHTML包含外部文件的语法是相同的)


Zhang_zm
139 声望6 粉丝