JavaScript中公共的js文件写法并在html的网页中调用

更新时间：2025年09月15日 09:33:13 作者：Tzq@2018

这篇文章主要为大家详细介绍了JavaScript中公共的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文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

微信小程序点餐系统开发常见问题汇总
这篇文章主要介绍了微信小程序点餐系统开发常见问题汇总,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-08-08
JavaScript 对象、函数和继承
JavaScript可以说是一个基于对象的编程语言，为什么说是基于对象而不是面向对象，因为JavaScript自身只实现了封装，而没有实现继承和多态。
2009-07-07
关于TypeScript声明合并
这篇文章主要介绍了关于TypeScript声明合并，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
layui加载数据显示loading加载完成loading消失的实例代码
今天小编就为大家分享一篇layui加载数据显示loading加载完成loading消失的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
原生js实现表格翻页和跳转
这篇文章主要为大家详细介绍了原生js实现表格翻页和跳转，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
Bootstrap table学习笔记（2）前后端分页模糊查询
这篇文章主要为大家分享了Bootstrap table学习笔记，前后端分页模糊查询，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
原生js canvas实现简单贪吃蛇
这篇文章主要为大家详细介绍了原生js canvas实现简单贪吃蛇，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-03-03
解决layui弹出层layer的area过大被遮挡的问题
今天小编就为大家分享一篇解决layui弹出层layer的area过大被遮挡的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
JavaScript高级之闭包详解
这篇文章主要为大家介绍了JavaScript闭包，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-12-12
20170918 前端开发周报之JS前端开发必看
本文给大家分享了最新版js 前端开发周报，内容非常不错，具有参考借鉴价值，需要的朋友参考下吧
2017-09-09