在页面中使用JavaScript的三种方式

前端

JavaScript

作者

yangjh

发布日期

November 14, 2021

就像在 HTML 中使用 CSS 一样，必须通过适当的方法将 JavaScript 和 HTML 结合起来使用，JavaScript 只有被嵌入到 HTML 中时才能对网页产生作用。和使用 CSS 的方式类似，在 HTML 中使用 JavaScript 的方式有三种，即嵌入式、行内式和链接式。

嵌入式

所谓嵌入式使用 JavaScript 的方法就是利用 script 元素将脚本嵌入到网页中。Script 元素是 HTML 语言为了引入脚本程序而定义的一个标记，插入脚本的具体方法是：把脚本用 script 元素标记后，放在 HTML 文件中的 head 部分或者 body 部分。虽然 script 脚本既可以放在 head 部分和 body 部分，但比较好的做法是将所有包含预定义函数的脚本放在 head 部分，因为 HTML 的内容在浏览器中处理时是从上到下解释的，放在 head 中的脚本比放在 body 中的脚本先处理。这样，浏览器在处理 body 中的元素内容时需要用到的 JavaScript 功能已经预先装载，减少出错的可能。同样的道理，如果 JavaScript 脚本需要等到页面完全装载完毕才要使用，则将其放置在 body 部分末尾。

使用 script 元素标记标本的语法如下：

<script >
    脚本内容
</script>

script元素的 type 和 language 特性（attribute）不是必需的。

下面的 HTML 代码创建了一行文本，当用户单击文本时，文字会改变为其它内容。

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8" />
    <title>嵌入式 JavaScript 案例</title>
    <script>
    function hello() {
        document.getElementById("demo").innerHTML = "你好，JavaScript 世界！";
    }
    </script>
</head>

<body>
    <p id="demo" onclick="hello()">单击这段文字！</p>
</body>

</html>

在上述代码中，onclick="hello()"表示当鼠标单击时执行 hello() 函数功能，而hello() 函数就是用 script 元素标记的嵌入式脚本。

行内式

所谓行内式脚本应用就是将脚本内容写在 HTML 元素的标记中，在这些标记中，将事件和相应内容写在一起。

如上例的 HTML 代码，如果用行内式的写法可以修改如下，而执行结果是完全相同的：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8" />
    <title>行内式 JavaScript 案例</title>
</head>

<body>
    <p id="demo" onclick="javascript:alert('Hello!');">单击这段文字！</p>
</body>

</html>

从上述代码可以看到，行内式的写法似乎更加简洁，但是，在实际工作中，我们要尽量避免这种写法，因为行内式嵌入的脚本可读性很差，不容易维护，不符合 Web 标准中将内容、表现、行为三者相分离的原则。而且，但从效率的角度来讲，如果某个功能要反复使用，则行内式的写法将会过于繁琐，反倒是其它写法更加简洁。故而，行内式使用脚本的方式仅限于较为简单的情况。

链接式

所谓链接式就是将 JavaScript 脚本文件单独写在后缀名为. js 的文件中，然后在需要使用此脚本的网页中加入脚本文件的路径名称即可。这种方式使用的脚本可以链接到多个网页甚至多个网站中，提高了代码的重用性，也方便维护，同时也能降低网站主机访问次数，提高网站性能。

使用独立文件的好处是浏览器会下载它，然后将它保存到浏览器的缓存中。之后，其他页面想要相同的脚本就会从缓存中获取，而不是下载它。所以文件实际上只会下载一次。这可以节省流量，并使得页面（加载）更快。

要引用外部 js 文件，需要在合适的地方，一般为 HTML 文件的 head 部分，使用 script 元素来指定外部脚本存放的路径和名称。

还是以上述中的 HTML 为例，如果改写成链接式引用，则需要将脚本存放成单独的文件，HTML 文档代码如下：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8" />
    <title>链接式 JavaScript 案例</title>
    <script src="js/hello.js"></script>
</head>

<body>
    <p>链接式 JavaScript 案例</p>
</body>

</html>

如果设置了 src 特性，script 标签内容将会被忽略。一个单独的 <script> 标签不能同时有 src 特性和内部包裹的代码。

其中使用 src 属性引用的 hello.js 文件存放在 HTML 文件的同一级目录中，外部 hello.js 文件内容如下：

alert('Hi');

延迟脚本 defer

在 script 元素的起始标签中，使用defer属性（取值为布尔值），可以是脚本在执行时不会影响页面的构造，也就是说，脚本会被延迟到整个页面都解析完毕后再运行。

<script  defer src="xxx.js"></script>

如果您的脚本不会改变文档的内容，可将 defer 属性加入到 <script> 标签中，以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经显示给用户为止。

异步脚本 async

和defer属性类型，使用async属性，可以使浏览器再加载 html 文档的同时，也加载外部 js 文件。但与defer不同的是，async加载完毕后，就会得到执行。

<script  async src="xxx.js"></script>

Script 标签的位置

传统的做法是，放在head元素中，这种做法的目的是将所有的外部引用文件都放在一个相同的位置，当外部js文件加大的时候，或者网络速度较慢的时候，页面会出现空白。

因此，可以把script引用放在body元素的最后，加快浏览器对内容的显示，用户体验会更好。

参考文献

https://html.spec.whatwg.org/multipage/scripting.html#attr-script-defer 在这个文档中，非常详细地介绍了使用不同方式引入外部js文件时，读取和执行策略之间的差异。

回到顶部