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

Question

I have implemented some functionality using about 500 hundred lines of Javascript and some html and css. 我已经使用约500百万行Javascript和一些html和css实现了某些功能。 I would like to place 2 instances of this on the same page. 我想在同一页面上放置2个实例。 This leads to a namespace conflict. 这导致名称空间冲突。

I can think of a tedious way of avoiding this: * As html elements are programatically accessed by IDs in Javascript, I would need to give them different ids. 我可以想到一种避免这种情况的乏味方法：*由于html元素是通过Java编程语言中的ID进行编程访问的，因此，我需要给它们提供不同的ID。 I'd need 2 versions of javascript functions that reference these ids. 我需要2个版本的javascript函数来引用这些ID。 * I'd need separate versions of javascript state variables. *我需要单独版本的javascript状态变量。

Is there a simpler way of doing this that doesn't require so much code duplication, but with different names? 是否有一种更简单的方法，不需要太多的代码重复，但是具有不同的名称？ Is there any way to make each copy behave like a separate document in this sense ie in separate namespaces? 在这种意义上，即在单独的命名空间中，是否有任何方法可以使每个副本的行为像一个单独的文档？

Thanks 谢谢

Answer 1

Yes: Have the outermost function of your code accept the id (or other selector) that it operates on, then just call it twice. 是的：让代码的最外层功能接受对其进行操作的id （或其他选择器），然后将其调用两次。

Eg, 例如，

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

Call it: 称它为：

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

Any functions you define within doSomethingNifty close over the id argument, and so they have access to the id related to the call to doSomethingNifty that they relate to. 您在 doSomethingNifty定义的任何函数都靠近id参数，因此它们可以访问与它们相关的对doSomethingNifty的调用相关的id 。

Here's a complete, but very simple, example. 这是一个完整但非常简单的示例。 The great thing is that this scales up easily. 很棒的是，这很容易扩展。 The pattern doesn't change, you just put more inside doSomethingNifty . 模式不会改变，您只需要在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>

Answer 2

Without going into too much detail about what you're trying to do, Refactoring it might help. 无需过多介绍您要做什么，可以对其进行重构。

For example, Instead of having a locked down un-portable piece of code, Why not simply write the HTML first and then write the JS in a way that does the work needed. 例如，为什么不简单地先编写HTML，然后再以完成所需工作的方式编写JS，而不要锁定不可移植的代码。

Some things just don't scale well(for example, what happens if you wanted 4 instances on the same page? 有些事情无法很好地扩展（例如，如果在同一页面上需要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