JavaScript中公共的js文件写法并在html的网页中调用
作者：Tzq@2018
这篇文章主要为大家详细介绍了JavaScript中公共的js文件写法并在html的网页中调用的相关知识,文中的示例代码讲解详细,希望对大家有所帮助
要创建一个公共的JS文件并在HTML中调用其中的函数，可以按照以下步骤操作：
步骤 1：创建公共JS文件
在项目中创建一个JS文件（如 utils.js），内容如下：
// utils.js - 公共函数库
function showMessage(message) {
alert("公共函数被调用：" + message);
}
// 可选：添加到全局对象(如window)来确保所有地方可访问
window.utils = {
showMessage: showMessage,
anotherFunction: function() {
console.log("另一个函数");
}
};
步骤 2：在HTML中引入JS文件
在 <head> 或 <body> 中添加（推荐在 <head> 或 </body> 前引入）：
<!-- 方式1：直接引入 --> <script src="utils.js"></script> <!-- 方式2：添加 defer/async 属性控制加载时机 --> <script src="utils.js" defer></script>
步骤 3：调用公共函数
在页面任意位置的其他 <script> 标签中直接调用：
// 方法1：直接调用全局函数
showMessage("你好，世界！");
// 方法2：通过全局命名空间调用
utils.anotherFunction();完整HTML示例
<!DOCTYPE html>
<html>
<head>
<title>JS函数调用示例</title>
<!-- 引入公共JS文件 -->
<script src="utils.js" defer></script>
</head>
<body>
<button onclick="showMessage('按钮点击')">调用函数</button>
<script>
// 页面加载完成后调用
document.addEventListener('DOMContentLoaded', () => {
showMessage('页面已加载');
utils.anotherFunction();
});
</script>
</body>
</html>
关键注意事项
1.加载顺序：
- 确保JS文件在调用之前加载（使用
defer可保证按顺序执行） - 避免在JS文件加载前调用函数
2.作用域控制：
// 推荐：添加到全局对象避免污染全局命名空间
window.MyUtils = {
function1: () => {...},
function2: () => {...}
};
3.模块化方案（现代浏览器）：
// utils.js
export const showMessage = (msg) => alert(msg);
// HTML中
<script type="module">
import { showMessage } from './utils.js';
showMessage('ES6模块调用');
</script>
4.调试建议：
- 在浏览器开发者工具中检查 Network 标签确认JS文件加载成功
- 在 Console 输入函数名检查是否可用
兼容所有浏览器的备选方案
<!-- 函数未定义时优雅降级 -->
<script>
window.MyFunctions = window.MyFunctions || {};
window.MyFunctions.showMessage = function(msg) {
console.warn("公共函数未正确加载！");
};
</script>
遵循这些步骤，你的公共JS函数就能在所有HTML页面中使用了。现代项目建议采用ES6模块化方式组织代码，但传统方式对旧浏览器兼容性更好。
到此这篇关于JavaScript中公共的js文件写法并在html的网页中调用的文章就介绍到这了,更多相关JavaScript公共js文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！