如何在HTML中使用JavaScript文件中定义的变量

本文详解如何在浏览器环境中正确访问并使用外部javascript文件中定义的变量，重点解决作用域、执行时序及模块化打包带来的常见问题。

在前端开发中，将日期等动态内容注入html是基础但易出错的操作。你遇到的问题——structuredDate is not defined——本质源于三个关键原因：变量作用域隔离、脚本执行顺序不当，以及Browserify打包后未暴露全局变量。

首先，var structuredDate = … 在 bscript.js 中属于模块作用域（尤其经 Browserify 打包后），默认不会挂载到全局 window 对象上，因此 HTML 内联脚本无法直接访问。其次，async defer 会导致 bscript.js 异步加载，其执行时机不可控，很可能晚于后续内联脚本，造成 structuredDate 尚未定义就已被读取。

✅ 正确做法分两种场景：

场景一：不依赖 Browserify（推荐快速验证）

直接引入 CDN 版本的 Moment.js，并在 HTML 中统一生成和写入日期（无需额外 JS 文件）：

立即学习“Java免费学习笔记（深入）”；

 Welcome to my website
 Today is: 
 

场景二：必须使用 Browserify 打包（生产环境）

需显式将变量暴露为全局属性，修改 bscript.js：

// bscript.js var moment = require("moment"); // ✅ 显式挂载到 window 对象（仅限浏览器环境） window.structuredDate = moment().format("LLLL");

HTML 中移除 async defer（避免执行顺序不确定），并确保内联脚本在 bscript.js 之后执行：

 Welcome to my website
 Today is: 
 

⚠️ 注意事项：

• require() 和 CommonJS 模块语法仅在 node.js 或打包工具（如 Browserify）中有效，浏览器原生不支持；
• async/defer 会破坏依赖顺序，涉及跨脚本变量共享时应避免；
• 使用 textContent 替代 innerHTML 更安全（防止 xss），除非你明确需要渲染 HTML；
• 建议用现代方案替代：如 ES 模块（

总结：变量跨文件共享的核心是可控的作用域与确定的执行时序。优先考虑逻辑内聚（如将 dom 更新也写入 JS 文件），而非依赖全局变量；若必须跨脚本通信，请通过 window 显式暴露，并严格控制加载顺序。