JavaScript教程-外部 JavaScript 文件
我们可以创建外部 JavaScript 文件,并在多个 HTML 页面中引用它。
这样做可以提供代码的可重用性,因为单个 JavaScript 文件可以在多个 HTML 页面中使用。
外部 JavaScript 文件必须以 .js 扩展名保存。建议将所有 JavaScript 文件嵌入到单个文件中,这样可以提高网页的加载速度。
让我们创建一个外部 JavaScript 文件,在警示对话框中打印 "Hello Javatpoint"。
message.js
function msg(){
alert("Hello Javatpoint");
}
让我们将 JavaScript 文件包含到 HTML 页面中。这将在按钮点击时调用 JavaScript 函数。
index.html
<html>
<head>
<script type="text/javascript" src="message.js"></script>
</head>
<body>
<p>Welcome to JavaScript</p>
<form>
<input type="button" value="click" onclick="msg()"/>
</form>
</body>
</html>
外部 JavaScript 的优势
如果用户创建了外部 JavaScript 文件,将会获得以下优势:
- 它有助于在多个 HTML 文件中实现代码的重用性。
- 它使代码易于阅读。
- 它是高效的,因为网页浏览器会缓存外部 js 文件,从而减少页面加载时间。
- 它使网页设计师和编码人员可以并行且独立地处理 html 和 js 文件,即在不面临任何代码冲突的情况下进行工作。
- 代码长度减少,只需要指定 js 文件的位置。
外部 JavaScript 的缺点
外部文件也有以下缺点:
- 攻击者可能通过 js 文件的 URL 下载程序员的代码。
- 如果两个 js 文件相互依赖,则一个文件的失败可能会影响到其他依赖文件的执行。
- 网页浏览器需要进行额外的 HTTP 请求以获取 js 代码。
- js 代码中的微小或大幅更改可能会导致所有依赖文件产生意外的结果。
- 我们需要检查每个依赖于常见外部 JavaScript 文件的文件。
- 如果代码只有几行,最好实现为内部 JavaScript 代码。