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

本文详解如何将 javascript 文件中生成的变量（如日期）安全注入 html 页面，重点解决因模块化、执行时序及环境差异导致的常见错误。

在浏览器环境中直接使用 node.js 风格的 require()（如 var moment = require(“moment”)）是不可行的——因为 require 是 Node.js 运行时的模块系统，原生浏览器不支持。你提到使用 Browserify 进行打包，这是正确的方向，但当前代码存在三个关键问题：

1. 执行时机错位：
2. 作用域隔离：Browserify 打包后的代码默认运行在模块作用域中，var structuredDate 不会自动挂载到全局 window 对象，因此内联脚本无法直接访问；
3. 客户端无 require：未经打包的 .js 文件若直接通过

✅ 正确做法分两种场景：

✅ 场景一：纯前端（推荐初学者/轻量项目）

直接引入 cdn 版本的 Moment.js，并在全局作用域定义变量：

     Welcome to my website
 Today is: 
   

对应 bscript.js 可简化为（非必需，仅作逻辑复用）：

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

// bscript.js —— 仅封装逻辑，不依赖 require window.getFormattedDate = function() {   return moment().format("LLLL"); };

然后在内联脚本中调用：

document.getElementById("date").textContent = window.getFormattedDate();

✅ 场景二：使用 Browserify（适合已有 npm 依赖的项目）

需确保：

• Browserify 已正确打包 moment 并暴露变量到全局；
• 脚本加载顺序严格：先加载 bundle.js，再操作 dom。

bscript.js（源码）：

var moment = require('moment'); // 显式挂载到全局，供 HTML 内联脚本访问 window.structuredDate = moment().format("LLLL");

构建命令：

browserify bscript.js -o bundle.js

HTML 中：

  Welcome to my website
 Today is: 
 

⚠️ 重要提醒：

• 避免在 async/defer 脚本后立即操作 DOM，除非监听 DOMContentLoaded 或使用 window.onload；
• textContent 比 innerHTML 更安全（防止 xss），除非你明确需要渲染 HTML；
• moment(Date()) 可简写为 moment()；Date() 返回字符串，而 moment() 接收 Date.now() 或 new Date() 更规范。

总结：浏览器端变量共享的核心原则是——显式挂载到 window，控制执行顺序，避开服务端语法。优先选择 CDN 方案快速验证，再逐步迁移到模块化构建流程。