笔记 - JavaScript 高级程序设计【第 02 章：在 HTML 中使用 JavaScript】

第 02 章：在 HTML 中使用 JavaScript

2.1. <script> 元素

　　向 HTML 页面中插入 JavaScript 的主要方法（非唯一），就是使用 <script> 元素。它拥有6个属性：

　　　　● async：可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，也就是异步加载。只对外部脚本文件有效。

　　　　● charset：可选。表示通过 src 属性指定的代码的字符集。很少使用。

　　　　● defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行，即延迟执行。只对外部脚本有效。支持IE7及以下版本的嵌入脚本。

　　　　● language：已废弃。原用于表示编写代码使用的脚本语言。

　　　　● src：可选。表示包含要执行代码的外部文件。常用属性。

　　　　● type：可选。可以看做 language 属性的替代者；表示编写代码使用的脚本语言的内容类型（也被称为 MIME 类型，用来控制服务器和浏览器之间传输数据的类型），一般将该属性的值设置为 text/javascript。

　　包含在 <script> 元素内部的 JavaScript 代码将被从上至下依次解释（预处理 + 执行）。JavaScript 是一种阻断式的语言，在解释器对 <script> 元素内部的所有代码求值完毕之前，页面中的其余内容都不会被浏览器加载或显示。例如：

    var a;
    alert(a); //undefined；
    a = 123;

　　但是在 JavaScript 内部，会先将函数表达式进行预编译，这样便会发生，在未定义之前调用函数，函数也可以正常执行的情形，例如：

    fn();

    function fn() {
        alert(fn); //会将整个fn函数表达式内容弹出；
    }

　　使用 <script> 元素时注意要加对应的闭合标签 </script>，如果在代码中需要输出闭合标签，比如页面中需要动态生成脚本代码时，要在闭合标签前加上转义符“\”，避免使浏览器认为那是结束 <script> 元素的标志。例如：

    var str = '<\/script>';
    alert(str); //</script>；

　　要注意带有 src 属性的 <script> 元素不应该在它的标签之间再嵌入代码，它只会下载并执行外部脚本文件，而嵌入的代码会被忽略。

　　通过 src 属性可以跨域访问来自外部的 JavaScript 文件，类似 <img> 元素可以跨域加载图片。

　　如果不包含 defer 和 async 属性，浏览器会按照 <script> 元素在页面中出现的先后顺序依次解析。

　　2.1.1. 标签的位置

　　　　按照传统，所有 <script> 元素都应该放在页面的 <head> 元素中；但 JavaScript 的阻断性会使页面加载延迟，现在一般将全部 JavaScript 引用放在 <body> 元素内容的后面来避免这个问题，除非有特殊代码要先于页面加载。

　　2.1.2. 延迟脚本

　　　　由于不同浏览器之间的差异，使用多个延迟脚本可能会出现意料之外的状况，所以一个页面中最好只使用一个延迟脚本；实际开发中，延迟脚本几乎用不到，因为有很多延迟加载脚本的方式。

　　2.1.3. 异步脚本

　　　　异步脚本的情况与延迟脚本类似，也有不少问题，同样在实际开发中几乎不会使用。

　　2.1.4. 在 XHTML 中的用法

　　　　实际开发不常用，略。

　　2.1.5. 不推荐使用的语法

　　　　过时，略。

2.2. 嵌入代码与外部文件

　　相比嵌入的方式，外部文件的做法更好，主要有以下优点：

　　　　● 可维护性：在不触及 HTML 文件的情况下，只需集中精力编辑 JavaScript 代码。

　　　　● 可缓存：两个不同页面使用同一个外部文件时，只需下载一次，从而加快页面加载速度。实际开发中，缓存也会带来一些困扰，所以要避免缓存时，可通过开启“禁用缓存”模式，或使用在外部文件的文件名后加随机数等方法。

　　　　● 适应未来：不同的页面或项目，可以用同一套代码。

　　而嵌入代码也有它的优点，就是减少页面对服务器的请求，从而提高页面加载的性能，特别是在移动端，所以如果只是简单的代码，可以考虑使用嵌入代码的方式。

2.3. 文档模式

　　最初两种文档模式是：混杂模式和标准模式（与后来的准标准模式统称标准模式）；这两种模式主要影响 CSS 内容的呈现，极少情况下也会影响 JavaScript 的解释执行，特殊情况后面会有专门说明，实际开发中很少涉及。

2.4. <noscript> 元素