如何访问通过$.getScript加载的脚本中的函数、变量与命名空间？

我来帮你理清这两个问题，顺便解决你遇到的报错：

先说说你遇到的报错原因 #

你碰到的ReferenceError: plugin is not defined是因为**$.getScript是异步操作**——当你写$.getScript('plugin.js').then(plugin())的时候，你直接执行了plugin()函数，但这时候plugin.js还没加载完成，浏览器根本不知道plugin这个函数存在，自然会报错。要注意：then()里需要传的是函数引用，而不是立即执行的函数调用哦。

疑问一：如何访问$.getScript加载的脚本中的函数或变量 #

核心原则就是等脚本加载完成后再去访问，具体有两种常用方式：

方式1：利用Promise的.then()回调 #

把你要执行的操作放在.then()的回调函数里，确保脚本加载完成后再执行：

// 正确写法：then里传入一个函数，脚本加载完成后才会执行内部代码
$.getScript('plugin.js').then(() => {
  // 这里可以安全调用plugin函数了
  const pluginResult = plugin();
  console.log(pluginResult); // 会输出"plugin"
});

方式2：使用jQuery的成功回调参数 #

$.getScript本身支持第二个参数作为加载成功后的回调函数，写法更简洁：

$.getScript('plugin.js', function() {
  // 脚本加载完成，直接调用函数
  plugin();
});

之所以这样可行，是因为$.getScript加载并执行完脚本后，才会触发回调——此时plugin.js里的全局函数已经被注册到window对象上了，自然能正常访问。

疑问二：能否在$.getScript运行脚本后访问其命名空间 #

当然可以！而且用命名空间来组织代码，还能避免污染全局作用域，比直接暴露全局函数更规范。

举个实际例子，修改你的plugin.js使用命名空间：

// plugin.js 用自定义命名空间封装代码
window.MyPlugin = {
  plugin: function() {
    console.log("plugin.js");
    return "plugin";
  },
  helperFunc: function() {
    return "这是命名空间里的辅助函数";
  }
};

然后在脚本加载完成后，直接访问这个命名空间即可：

$.getScript('plugin.js').then(() => {
  const mainResult = MyPlugin.plugin();
  console.log(mainResult); // 输出"plugin"
  console.log(MyPlugin.helperFunc()); // 输出"这是命名空间里的辅助函数"
});

额外小提醒 #

你代码里连续调用了两次$.getScript('plugin.js')，这会导致脚本被重复加载，虽然一般不会出问题，但会浪费资源，建议只调用一次，在同一个回调里处理所有后续操作。

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