1.3.2 JavaScript代码引入方式_JavaScript+jQuery交互式Web前端开发（第2版）-QQ阅读古言女生网

上QQ阅读APP看书，第一时间看更新

在网页中编写JavaScript代码时，有3种引入JavaScript代码的方式，分别是行内式、内部式和外部式，下面分别对这3种引入方式进行讲解。

1．行内式

行内式将JavaScript代码作为HTML标签的属性值使用。例如，在打开网页时自动弹出一个警告框，警告框中的提示内容为“通过行内式引入JavaScript代码”，示例代码如下。

<body onload=＂alert（＇通过行内式引入JavaScript代码＇）;＂>
</body>

在上述示例代码中，<body>标签的onload属性表示页面加载事件，用于在网页打开时自动执行JavaScript代码，该属性的值为行内式JavaScript代码。

需要说明的是，使用行内式不适合在HTML标签中书写大量的JavaScript代码，这是因为行内式代码与HTML标签混合在一起，不利于代码维护。

2．内部式

内部式将 JavaScript 代码写在<script>标签中。<script>标签可以写在<head>标签或<body>标签中。例如，在打开网页时自动弹出一个警告框，警告框中的提示内容为“通过内部式引入JavaScript代码”，示例代码如下。

<body>
  <script>
    alert（＇通过内部式引入JavaScript代码＇）;
  </script>
</body>

由于通过内部式可以将多行 JavaScript 代码写在<script>标签中，相比于行内式，使用内部式更方便阅读代码，所以内部式是引入JavaScript代码的常用方式之一。

另外，<script>标签有一个type属性，该属性表示脚本类型。由于在HTML5中type属性的默认值为text/javascript（表示JavaScript），所以在使用HTML5时可以省略type属性。

3．外部式

外部式将JavaScript代码单独写在一个文件中（一般使用“.js”作为该文件的扩展名），然后在HTML中通过<script>标签引入该文件。外部式适合在JavaScript代码量较多的情况下使用。例如，创建一个test.js文件，在该文件中编写如下代码。

alert（＇通过外部式引入JavaScript代码＇）;

在HTML文件中使用外部式引入JavaScript代码，示例代码如下。

<body>
    <script src=＂test.js＂></script>
</body>

上述代码表示引入当前目录下的test.js文件。需要注意的是，在使用外部式时，<script>标签内不可以编写JavaScript代码。

以上分别介绍了引入JavaScript代码的3种方式。在实际开发中，提倡结构、样式、行为的分离，即分离 HTML、CSS、JavaScript 这3部分代码，这样可以提高代码的可读性和可维护性。当需要编写大量的、逻辑复杂的、具有特定功能的JavaScript代码时，推荐使用外部式。

外部式相比内部式，具有以下3点优势。

① 使用外部式JavaScript代码存在于独立文件中，有利于修改和维护，而使用内部式会导致HTML代码与JavaScript代码混合在一起。

② 使用外部式可以通过浏览器缓存提高响应速度。例如，在多个页面中引入相同的JavaScript文件时，打开第1个页面后，浏览器会将JavaScript文件缓存下来，下次打开其他页面时就不用重新下载该文件。

③ 使用外部式有利于 HTML 页面代码结构化，可以把大量的 JavaScript 代码分离到HTML页面外，这样既美观，又方便文件级别的代码复用。

另外，浏览器运行 JavaScript 代码时，无论使用的是内部式还是外部式，页面的加载和渲染都会暂停，等待脚本执行完成后才会继续。为了尽可能减少对整个页面的影响，推荐将不需要提前运行的JavaScript代码所在的<script>标签放在HTML文档的底部。

多学一招：JavaScript异步加载

使用外部式时，为了减少JavaScript加载过程对页面造成的影响，可以使用HTML5为<script>标签新增的两个可选属性 async 和 defer，实现异步加载。实现异步加载后，即使JavaScript文件下载失败，也不会阻塞后面的JavaScript代码运行。

async 属性用于异步加载，即先下载文件，不阻塞其他代码运行，下载完成后再运行，示例代码如下。

<script src=＂file.js＂ async></script>

defer属性用于延后执行，即先下载文件，不阻塞其他代码运行，直到网页加载完成后再运行，示例代码如下。

<script src=＂file.js＂ defer></script>

本周热推：