如何将jQuery文档就绪函数内的JS变量传递至另一JS文件

嘿，我懂你现在的困扰——在Socket这种异步场景下，普通的全局变量方案不太灵光，那咱们来试试几个适配这个场景的解决办法：

方案1：用专属命名空间存储数据（推荐，避免全局污染） #

与其直接用全局变量，不如创建一个全局的命名空间对象，把需要传递的变量放在里面。这种方式既不会污染全局作用域，还能清晰管理跨文件的共享数据。

修改chat.js：

// 在全局作用域创建专属命名空间，放在ready函数外面
window.ChatSharedData = {};

$(document).ready(function () { 
  // 把变量赋值到命名空间中
  window.ChatSharedData.a = "something";
  
  // 哪怕是Socket异步回调里更新数据也没问题
  Socket.on('receive-message', function(data) {
    window.ChatSharedData.a = data.content;
  });
});

修改scripts.js：

$(document).ready(function () { 
  // 直接访问命名空间里的变量
  console.log(window.ChatSharedData.a);
  
  // 如果需要监听Socket数据更新，也可以在这里加Socket监听，或者用下面的事件方案
});

方案2：用自定义事件传递异步数据（适配Socket场景） #

如果你的变量是通过Socket异步获取的（比如等待服务器返回数据后才赋值），直接访问变量可能会因为时机问题拿到undefined。这时候用自定义事件就能完美解决——等数据真正准备好时，再通知其他脚本接收。

修改chat.js：

$(document).ready(function () { 
  // 假设这是Socket接收数据的回调
  Socket.on('data-ready', function(response) {
    const a = response.data;
    // 触发自定义事件，把数据作为参数传递出去
    $(document).trigger('chat-variable-ready', [a]);
  });
});

修改scripts.js：

$(document).ready(function () { 
  // 监听自定义事件，接收传递过来的数据
  $(document).on('chat-variable-ready', function(event, a) {
    console.log(a); // 这里能精准拿到Socket返回的最新值
  });
});

方案3：ES模块方式（现代项目推荐） #

如果你的项目支持ES模块（通过type="module"引入脚本），可以用模块化的方式导出/导入变量，这是前端工程化的标准做法，能彻底避免全局作用域的问题。

首先修改index.html的脚本引入：

<script type="module" src="/js/chat.js"></script>
<script type="module" src="/js/scripts.js"></script>

修改chat.js：

// 导出一个Promise来封装异步数据（适配Socket场景）
export const getChatVariable = new Promise((resolve) => {
  $(document).ready(function () { 
    Socket.on('data-ready', function(response) {
      resolve(response.data); // 数据就绪后resolve
    });
  });
});

修改scripts.js：

import { getChatVariable } from './chat.js';

$(document).ready(function () { 
  // 通过Promise获取异步数据
  getChatVariable.then(a => {
    console.log(a); // 拿到Socket返回的数据
  });
});

补充说明：为什么之前的全局变量方案失效？ #

大概率是你把全局变量的声明写在了$(document).ready函数内部（比如var a = "something"），这时候a只是ready函数的局部变量，并没有真正挂载到全局作用域。就算你改成window.a = "something"，如果是Socket异步场景，scripts.js的ready函数执行时，Socket可能还没返回数据，所以依然会拿到undefined——这也是为什么事件或Promise方案更适配你的场景。

内容的提问来源于stack exchange，提问作者daatyson