快捷導(dǎo)航

JavaScript中公共的js文件寫法并在html的網(wǎng)頁(yè)中調(diào)用

更新時(shí)間：2025年09月15日 09:33:13 作者：Tzq@2018

這篇文章主要為大家詳細(xì)介紹了JavaScript中公共的js文件寫法并在html的網(wǎng)頁(yè)中調(diào)用的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),希望對(duì)大家有所幫助

步驟 1：創(chuàng)建公共JS文件

在項(xiàng)目中創(chuàng)建一個(gè)JS文件（如 utils.js），內(nèi)容如下：

// utils.js - 公共函數(shù)庫(kù)
function showMessage(message) {
  alert("公共函數(shù)被調(diào)用：" + message);
}

// 可選：添加到全局對(duì)象(如window)來(lái)確保所有地方可訪問(wèn)
window.utils = {
  showMessage: showMessage,
  anotherFunction: function() {
    console.log("另一個(gè)函數(shù)");
  }
};

步驟 2：在HTML中引入JS文件

在 <head> 或 <body> 中添加（推薦在 <head> 或 </body> 前引入）：

<!-- 方式1：直接引入 -->
<script src="utils.js"></script>
<!-- 方式2：添加 defer/async 屬性控制加載時(shí)機(jī) -->
<script src="utils.js" defer></script>

步驟 3：調(diào)用公共函數(shù)

在頁(yè)面任意位置的其他 <script> 標(biāo)簽中直接調(diào)用：

  // 方法1：直接調(diào)用全局函數(shù)
  showMessage("你好，世界！");
  
  // 方法2：通過(guò)全局命名空間調(diào)用
  utils.anotherFunction();

完整HTML示例

<!DOCTYPE html>
<html>
<head>
  <title>JS函數(shù)調(diào)用示例</title>
  <!-- 引入公共JS文件 -->
  <script src="utils.js" defer></script>
</head>
<body>
  <button onclick="showMessage('按鈕點(diǎn)擊')">調(diào)用函數(shù)</button>
  
  <script>
    // 頁(yè)面加載完成后調(diào)用
    document.addEventListener('DOMContentLoaded', () => {
      showMessage('頁(yè)面已加載');
      utils.anotherFunction();
    });
  </script>
</body>
</html>

關(guān)鍵注意事項(xiàng)

1.加載順序：

確保JS文件在調(diào)用之前加載（使用 defer 可保證按順序執(zhí)行）
避免在JS文件加載前調(diào)用函數(shù)

2.作用域控制：

// 推薦：添加到全局對(duì)象避免污染全局命名空間
window.MyUtils = {
  function1: () => {...},
  function2: () => {...}
};

3.模塊化方案（現(xiàn)代瀏覽器）：

// utils.js
export const showMessage = (msg) => alert(msg);

// HTML中
<script type="module">
  import { showMessage } from './utils.js';
  showMessage('ES6模塊調(diào)用');
</script>

4.調(diào)試建議：

在瀏覽器開發(fā)者工具中檢查 Network 標(biāo)簽確認(rèn)JS文件加載成功
在 Console 輸入函數(shù)名檢查是否可用

兼容所有瀏覽器的備選方案

<!-- 函數(shù)未定義時(shí)優(yōu)雅降級(jí) -->
<script>
  window.MyFunctions = window.MyFunctions || {};
  window.MyFunctions.showMessage = function(msg) {
    console.warn("公共函數(shù)未正確加載！");
  };
</script>

遵循這些步驟，你的公共JS函數(shù)就能在所有HTML頁(yè)面中使用了?，F(xiàn)代項(xiàng)目建議采用ES6模塊化方式組織代碼，但傳統(tǒng)方式對(duì)舊瀏覽器兼容性更好。

到此這篇關(guān)于JavaScript中公共的js文件寫法并在html的網(wǎng)頁(yè)中調(diào)用的文章就介紹到這了,更多相關(guān)JavaScript公共js文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: