在同一页面上放置 2 个 javascript 副本答案

【问题标题】：Placing 2 copies of javascript on same page在同一页面上放置 2 个 javascript 副本
【发布时间】：2014-01-11 17:56:16
【问题描述】：

我已经使用大约 50000 行 Javascript 和一些 html 和 css 实现了一些功能。我想在同一页面上放置 2 个实例。这会导致命名空间冲突。

我可以想出一种乏味的方法来避免这种情况： * 由于 html 元素是通过 Javascript 中的 ID 以编程方式访问的，因此我需要为它们提供不同的 ID。我需要引用这些 id 的 2 个版本的 javascript 函数。 * 我需要不同版本的 javascript 状态变量。

有没有一种更简单的方法，不需要太多代码重复，但名称不同？有没有办法让每个副本在这个意义上表现得像一个单独的文档，即在单独的命名空间中？

谢谢

【问题讨论】：

标签： javascript namespaces code-duplication

【解决方案1】：

是的：让代码的最外层函数接受它所操作的id（或其他选择器），然后调用它两次。

例如，

function doSomethingNifty(id) {
    // Your code doing nifty things with `id`
}

叫它：

doSomethingNifty("foo");
doSomethingNifty("bar");

您在doSomethingNifty 中定义的任何函数关闭id 参数，因此它们可以访问与调用doSomethingNifty 相关的id。

这是一个完整但非常简单的示例。很棒的是，这很容易扩大规模。模式没有改变，您只需在 doSomethingNifty 中添加更多内容。

Live Copy | Live Source

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Simple Closure Example</title>
</head>
<body>
  <div id="foo">I'm foo, click me</div>
  <div id="bar">I'm bar, click me</div>
  <script>
    function doSomethingNifty(id) {
      document.getElementById(id).onclick = showMyInfo;

      function showMyInfo() {
        alert("id = " + id + ", text = " + this.innerHTML);
      }
    }

    doSomethingNifty("foo");
    doSomethingNifty("bar");
  </script>
</body>
</html>

【讨论】：

谢谢，这很有帮助。我有一个问题：

【解决方案2】：

无需过多详细说明您正在尝试做什么，重构它可能会有所帮助。

例如，与其锁定不可移植的代码，不如简单地先编写 HTML，然后以完成所需工作的方式编写 JS。

有些事情不能很好地扩展（例如，如果您希望在同一页面上有 4 个实例会发生什么？

【讨论】：