javascript - 如何让我的脚本相互交互？

Question

当我的网页加载后，它会运行此脚本:

$(function() {
  return $.ajax({
    type: "get",
    dataType: "json",
    url: "/get_script",
    success: function(data, status, xhr) {
      return $("#myScript").html(data.myScript);
    }
  });
});

该脚本从我的服务器获取另一个脚本(data.myScript 对象)。添加到我的网页的新脚本如下所示:

<script>
  initScript = function() {
    return window.random_string = Math.random().toString(36).substring(7);
  };

  $(window).bind("popstate", 'hashchange', function() {
    return initScript();
  });

  window.random_string = null;
  initScript();
</script>

如果新脚本需要使变量可用于网页上的其他脚本，我会将它们放入 window.my_variable 变量中，但我希望能够调用例如MyScript.random_string。

我还希望能够从其他脚本触发 initScript 函数。就像例如MyScript.initScript()

如何实现这一目标？

Answer 1

首先我建议使用$.getScript加载你的 JS 代码，假设你不能将它直接嵌入 <script>标签。

要解决您的实际问题，您只需按照您需要的方式构建它即可。只需创建一个像 var MyScript = {}; 这样的对象然后将所有函数和变量作为属性放置在该对象中，如下所示:

$.getScript('/get_script', function() {
  // put logic to run after the script has loaded here...
  // note that you don't need your .html(data.myScript) any more
  
  MyScript.initScript();
  console.log(MyScript.random_string);
});

// in your external script:
var MyScript = {
  initScript = function() {
    this.random_string = Math.random().toString(36).substring(7);
  },
  random_string: null;
}