在同一页面上放置2个JavaScript副本

Question

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

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

是否有一种更简单的方法，不需要太多的代码重复，但是具有不同的名称？ 在这种意义上，即在单独的命名空间中，是否有任何方法可以使每个副本的行为像一个单独的文档？

谢谢

Answer 1

是的：让代码的最外层功能接受对其进行操作的id （或其他选择器），然后将其调用两次。

例如，

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

称它为：

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

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

这是一个完整但非常简单的示例。 很棒的是，这很容易扩展。 模式不会改变，您只需要在doSomethingNifty更多内容即可。

实时复制 | 现场直播

<!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>

Answer 2

无需过多介绍您要做什么，可以对其进行重构。

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

有些事情无法很好地扩展（例如，如果在同一页面上需要4个实例，会发生什么情况？

在同一页面上放置2个JavaScript副本

问题描述

2 个解决方案

解决方案1
0 2014-01-11 17:59:01

解决方案2
0 2014-01-11 18:00:36

在同一页面上放置2个JavaScript副本

问题描述

2 个解决方案

解决方案1 0 2014-01-11 17:59:01

解决方案2 0 2014-01-11 18:00:36

解决方案1
0 2014-01-11 17:59:01

解决方案2
0 2014-01-11 18:00:36