在同一页上放置2份javascript副本_Javascript_Namespaces_Code Duplication

在同一页上放置2份javascript副本

javascript

在同一页上放置2份javascript副本,javascript,namespaces,code-duplication,Javascript,Namespaces,Code Duplication,我已经用大约500行Javascript和一些html和css实现了一些功能。我想在同一页上放置两个实例。这会导致名称空间冲突我可以想出一种避免这种情况的乏味方法： *由于Javascript中的ID通过编程方式访问html元素，因此我需要为它们提供不同的ID。我需要两个版本的javascript函数来引用这些ID。 *我需要单独版本的javascript状态变量有没有一种更简单的方法不需要太多代码重复，但名称不同？从这个意义上讲，有没有办法使每个副本都像一个单独的文档一样，即在单独的名称空

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

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

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

谢谢

是：让代码最外层的函数接受它所操作的

id

（或其他选择器），然后调用它两次

例如：

叫它：

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

在

doSomethingNifty

中定义的任何函数都会关闭

id

参数，因此它们可以访问与其相关的

doSomethingNifty

调用相关的

id

下面是一个完整但非常简单的示例。最棒的是，它很容易扩展。模式不会改变，只需在

doSomethingNifty

中添加更多内容即可


简单闭包示例
我是福，点击我
我是酒吧，点击我
函数doSomethingNifty（id）{
document.getElementById（id）.onclick=showMyInfo；
函数showMyInfo（）{
警报（“id=“+id+”，text=“+this.innerHTML”）；
}
}
doSomethingNifty（“foo”）；
doSomethingNifty（“bar”）；

在不详细说明您要做什么的情况下，重构它可能会有所帮助

例如，与其拥有一段锁定的不可移植的代码，不如先编写HTML，然后以完成所需工作的方式编写JS

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

谢谢，这非常有帮助。我有一个后续问题：

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

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