📌  相关文章
📜  点击外部 javascript (1)

📅  最后修改于: 2023-12-03 15:40:48.376000             🧑  作者: Mango

点击外部 JavaScript

在 Web 开发中，我们通常需要将 JavaScript 代码嵌入到 HTML 文件中，通过内部脚本或内联事件绑定实现交互效果。但是，有时候我们也需要在 HTML 文件之外的 JavaScript 文件中编写逻辑，比如为不同页面公用的工具库、统一的数据请求封装等等。这时候，我们就需要在 HTML 文件中链接外部 JavaScript 文件，并在需要触发事件时调用其中的函数。

引入外部 JavaScript 文件

引入外部 JavaScript 文件有两种方式：

1. 使用 script 标签

我们可以使用 script 标签来引入外部 JavaScript 文件，将其放置在 HTML 文件的 head 或 body 标签内即可。

<html>
  <head>
    <script src="path/to/file.js"></script>
  </head>
  <body>
    ...
  </body>
</html>

其中 src 属性指定了要引入的 JavaScript 文件的路径。

2. 使用 defer 和 async 属性

defer 和 async 属性可以让我们更灵活地控制外部 JavaScript 文件的加载。它们的区别在于：

  • defer 属性表示该文件需要在 HTML 文件的解析完成之后再加载和执行，但是在 DOMContentLoaded 事件之前执行。如果有多个带有 defer 属性的 JavaScript 文件，它们的加载顺序是按照它们在 HTML 文件中出现的顺序执行的。
  • async 属性表示该文件在加载完成之后立即开始执行。如果有多个带有 async 属性的 JavaScript 文件，它们的加载和执行顺序是不能保证的。
<html>
  <head>
    <script defer src="path/to/file.js"></script>
  </head>
  <body>
    ...
    <script async src="path/to/another-file.js"></script>
  </body>
</html>
在 HTML 中调用外部 JavaScript 函数

当外部 JavaScript 文件被成功加载后，我们可以在 HTML 中调用其中的函数。

<html>
  <head>
    <script src="path/to/file.js"></script>
  </head>
  <body>
    <button onclick="sayHello()">Click me</button>
  </body>
</html>

在上面的例子中，我们在 HTML 中添加了一个按钮，并通过 onclick 属性将 sayHello() 函数与它绑定起来。sayHello() 函数需要在外部 JavaScript 文件中定义。

function sayHello() {
  alert('Hello!');
}
总结

通过引入外部 JavaScript 文件，我们可以将重复的代码进行封装和复用，使 Web 开发更加高效和便捷。同时，也需要注意控制好代码的加载时机和执行顺序，以保证页面的正确性和性能。