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文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript中的console.profile()函数详细介绍
这篇文章主要介绍了JavaScript中的console.profile()函数详细介绍,本文讲解了console.profile()函数的浏览器支持情况、console.profile()的使用、Firebug中Profile按钮的使用等内容,需要的朋友可以参考下
2014-12-12
webpack4 optimization使用总结
这篇文章主要介绍了webpack4 optimization使用总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
js 动态生成json对象、时时更新json对象的方法
下面小编就为大家带来一篇js 动态生成json对象、时时更新json对象的方法。小编觉的挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-12-12
一款js和css代码压缩工具[附JAVA环境配置方法]
压缩css和js是我们工作中经常要处理的一件事,这里介绍的是一款基于YUICompressor,淘宝封装的css和js压缩工具TBCompressor.
2010-04-04
微信小程序商城项目之商品属性分类(4)
这篇文章主要为大家详细介绍了微信小程序商城项目之商品属性值联动选择,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04
Nuxt3 布局layouts和NuxtLayout的使用详解
layouts是Nuxt3提供的一种方便开发者快速实现自定义布局的约定，是基于Vue3的一个开发框架，基于服务器端渲染SSR，可以更加方便的用于Vue的SEO优化，这篇文章主要介绍了Nuxt3 布局layouts和NuxtLayout的使用,需要的朋友可以参考下
2023-04-04
js实现动态改变字体大小代码
本文为大家介绍下使用js如何实现动态改变字体大小，感兴趣的额朋友不要错过
2014-01-01
JS+Canvas实现满屏爱心和文字动画的制作
Canvas 适合绘制大数据量图形元素的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也适合实现某些视觉特效。本文就来利用Canvas实现满屏爱心和文字动画的制作，感兴趣的可以了解一下
2022-11-11
layui table checked获取选中数据方式
这篇文章主要介绍了layui table checked获取选中数据方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
本文主要对JavaScript的几种Math函数,random(),ceil(),round(),floor()的作用进行简要解析，具有很好的参考价值，需要的朋友一起来看下吧
2016-12-12