在同一頁面上放置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