Javascript高级程序语言阅读——在 HTML 中使用 JavaScript

2.1 script元素

向 HTML 页面中插入 JavaScript 的主要方法，就是使用script元素。这个元素由 Netscape 创造并在 Netscape Navigator 2 中首先实现。后来，这个元素被加入到正式的 HTML 规范中。HTML 4.01 为script定义了下列 6 个属性。

async：可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或
等待加载其他脚本。只对外部脚本文件有效。

charset：可选。表示通过 src 属性指定的代码的字符集。由于大多数浏览器会忽略它的值，
因此这个属性很少有人用。

defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有
效。IE7 及更早版本对嵌入脚本也支持这个属性。

language：已废弃。原来用于表示编写代码使用的脚本语言（如 JavaScript、JavaScript1.2
或 VBScript）。大多数浏览器会忽略这个属性，因此也没有必要再用了。

src：可选。表示包含要执行代码的外部文件。

type：可选。可以看成是 language 的替代属性；表示编写代码使用的脚本语言的内容类型（也称为 MIME 类型）。虽然 text/javascript 和 text/ecmascript 都已经不被推荐使用，但人们一直以来使用的都还是 text/javascript。实际上，服务器在传送 JavaScript 文件时使用的MIME 类型通常是 application/x–javascript，但在 type 中设置这个值却可能导致脚本被忽略。另外，在非IE浏览器中还可以使用以下值：application/javascript和application/ecmascript。考虑到约定俗成和最大限度的浏览器兼容性，目前 type 属性的值依旧还是text/javascript。不过，这个属性并不是必需的，如果没有指定这个属性，则其默认值仍为text/javascript。

使用script元素的方式有两种：直接在页面中嵌入 JavaScript 代码和包含外部 JavaScript文件

在使用script元素嵌入 JavaScript 代码时，只须为script指定 type 属性。然后，像下面这样把 JavaScript 代码直接放在元素内部即可

<script type="text/javascript"> 
  function sayHi(){ 
  alert("Hi!"); 
  } 
</script>

如果要通过script元素来包含外部 JavaScript 文件，那么 src 属性就是必需的。这个属性的值是一个指向外部 JavaScript 文件的链接，例如：

<script type="text/javascript" src="example.js" />

2.1.1 标签的位置

按照传统的做法，所有script元素都应该放在页面的head元素中，例如：

<!DOCTYPE html> 
<html> 
  <head> 
  <title>Example HTML Page</title> 
  <script type="text/javascript" src="example1.js"></script> 
  <script type="text/javascript" src="example2.js"></script> 
  </head> 
  <body> 
  <!-- 这里放内容 --> 
  </body> 
</html>

这种做法的目的就是把所有外部文件（包括 CSS 文件和 JavaScript 文件）的引用都放在相同的地方。可是，在文档的元素中包含所有 JavaScript 文件，意味着必须等到全部JavaScript 代码都被下载、解析和执行完成以后，才能开始呈现页面的内容（浏览器在遇到body标签时才开始呈现内容）。对于那些需要很多 JavaScript 代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题，现代 Web 应用程序一般都把全部 JavaScript 引用放在body元素中页面内容的后面如下例：

<!DOCTYPE html> 
<html> 
  <head> 
  <title>Example HTML Page</title> 
  </head> 
  <body> 
  <!-- 这里放内容 --> 
  <script type="text/javascript" src="example1.js"></script> 
  <script type="text/javascript" src="example2.js"></script> 
  </body> 
</html>

2.1.2 延迟脚本

简单了解一下就可以了。

<script type="text/javascript" defer="defer" src="example1.js"></script>

2.1.3 异步脚本

<script type="text/javascript" async src="example1.js"></script>

2.1.4 在XHTML中的用法
2.1.5 不推荐使用的语法

2.2 嵌入代码与外部文件
在 HTML 中嵌入 JavaScript 代码虽然没有问题，但一般认为最好的做法还是尽可能使用外部文件来包含 JavaScript 代码。不过，并不存在必须使用外部文件的硬性规定，但支持使用外部文件的人多会强调如下优点。

可维护性：遍及不同 HTML 页面的 JavaScript 会造成维护问题。但把所有 JavaScript 文件都放在一个文件夹中，维护起来就轻松多了。而且开发人员因此也能够在不触及 HTML 标记的情况下，集中精力编辑 JavaScript 代码。

可缓存性：浏览器能够根据具体的设置缓存链接的所有外部 JavaScript 文件。也就是说，如果有两个页面都使用同一个文件，那么这个文件只需下载一次。因此，最终结果就是能够加快页面加载的速度。

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

2.3 文档模式
2.4 noscript元素

2.5 小结

Javascript高级程序语言阅读——在 HTML 中使用 JavaScript

猜你喜欢