在编写前端网页时，我们通常会把一些 JavaScript 代码放在 HTML 文件的 <script> 标签内部。但是如果想要让代码更加模块化、可重用、易于维护，我们可以将 JavaScript 代码单独放在外部 JS 文件中，并在 HTML 文件中通过 <script> 标签引入。
本文将介绍如何在外部 JS 文件中编写动作（Action），并提供详细的示例代码以及学习和指导意义。
动作概述
在前端开发中，动作通常指当用户执行某个操作时，网页会做出相应的反应。例如，当用户点击一个按钮时，网页会显示一个弹窗；当用户提交表单时，网页会发送请求并刷新页面等等。
在外部 JS 文件中，我们通常使用函数来定义动作。这些函数可以被多个页面共用，从而实现代码的重用性和维护性。
下面是一个简单的示例，当用户点击按钮时，在控制台输出一条信息：
function handleClick() {
console.log('点击了按钮');
}
// 在 HTML 中通过 onclick 属性调用该函数
<button onclick="handleClick()">点击我</button>在这个示例中，我们定义了一个名为 handleClick 的函数，该函数会在用户点击按钮时被调用。在 HTML 文件中，我们通过 onclick 属性将该函数与按钮绑定。当用户点击按钮时，就会触发 handleClick 函数，控制台会输出一条信息。
这种方式虽然简单易行，但是不够灵活和可维护。如果我们需要在多个页面中使用该动作，就需要在每个页面中都定义一个相同的函数，这样就会导致代码冗余和难以维护。因此，我们可以将该函数单独放在外部 JS 文件中，供多个页面共用。
在外部 JS 文件中定义动作
在外部 JS 文件中，我们可以通过两种方式来定义动作：函数表达式和函数声明。
函数表达式
函数表达式是一种常见的 JavaScript 函数定义方式，它可以被看作是一个匿名的函数，赋值给一个变量：
var handleClick = function() {
console.log('点击了按钮');
};在这个示例中，我们定义了一个名为 handleClick 的函数表达式，该函数也会在用户点击按钮时被调用。当我们需要在 HTML 中引用该函数时，可以通过变量名 handleClick 来调用。
函数声明
函数声明是另一种常见的 JavaScript 函数定义方式，它使用 function 关键字：
function handleClick() {
console.log('点击了按钮');
}在这个示例中，我们定义了一个名为 handleClick 的函数声明，也会在用户点击按钮时被调用。与函数表达式不同的是，函数声明会在代码解析阶段被预处理（Hoisting），因此可以在函数声明之前调用。
无论我们使用哪种方式来定义动作，在 HTML 文件中引用该函数时，需要在 <script> 标签内部声明外部 JS 文件的路径：
<script src="path/to/external.js"></script>
然后，在需要使用该函数的元素上设置相应的事件属性。例如，当用户点击按钮时，调用 handleClick 函数：
<button onclick="handleClick()">点击我</button>
总结
本文介绍了如何在外部 JS 文件中定义动作，并提供了详细的示例代码以及学习和指导意义。通过将 JavaScript 代码单独放在外部文件中，我们可以实现代码的重用性和维护性，使代码更加模块化、可
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24758