在前端开发中，我们常常需要使用 JavaScript 来实现各种功能，而 JavaScript 代码通常存储在 ".js" 文件中。为了提高代码的可维护性和复用性，我们可以将一些公共的 JavaScript 代码封装到外部的 ".js" 文件中，然后在 HTML 页面中引入这些文件。本文将详细介绍如何使用外部的 ".js" 文件。
创建 ".js" 文件
首先，我们需要创建一个 ".js" 文件，并将需要复用的 JavaScript 代码写在这个文件中。例如，我们创建一个名为 "common.js" 的文件，其中包含以下代码：
function add(a, b) {
return a + b;
}
function subtract(a, b) {
return a - b;
}这里定义了两个函数，分别用于计算加法和减法。接下来，我们需要将这个文件保存到项目的某个目录中，例如 "js" 目录。
在 HTML 页面中引入外部 ".js" 文件
HTML 页面中使用 <script> 标签来引入外部的 ".js" 文件。以下是一个简单的示例：
-- -------------------- ---- -------
--------- -----
------
------
-----------------------
-------
------
-------------------
------- ----------------------------
--------
-- -- --------- ------
--- --- - ------ ---
--- ---------- - ----------- ---
----------------- -- ----- -
------------------------ -- ----- -
---------
-------
-------在上面的示例中，我们通过 <script> 标签引入了 "common.js" 文件，并在页面中调用了其中定义的函数。注意，引入外部 ".js" 文件时需要指定文件的路径。
延迟加载外部 ".js" 文件
默认情况下，浏览器会在解析 HTML 页面时立即下载和执行所有的 JavaScript 代码。这可能会导致页面加载速度变慢，因为 JavaScript 代码通常比较大。为了优化页面加载速度，我们可以将 JavaScript 代码延迟加载。
延迟加载可以通过将 <script> 标签放在页面底部来实现，或者使用 defer 或 async 属性。以下是一个示例：
-- -------------------- ---- -------
--------- -----
------
------
-----------------------
-------
------
-------------------
------- ----- ----------------------------
--------
-- ------- --------- --------
--------------------- -
--- --- - ------ ---
--- ---------- - ----------- ---
----------------- -- ----- -
------------------------ -- ----- -
-- ---
---------
-------
-------在上面的示例中，我们添加了 defer 属性来告诉浏览器要延迟加载 "common.js" 文件。由于 JavaScript 代码是异步加载的，因此我们需要在代码中添加一个延迟执行的函数。
结论
使用外部的 ".js" 文件可以提高代码的可维护性和复用性，并且可以优化页面加载速度。本文介绍了如何创建、引入和延迟加载外部的 ".js" 文件。希望对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29949