如何"；“模块化”；jQuery应用程序？

我想构建一个jQuery应用程序，在一个页面上可以有多个实例

但是，我遇到了一个问题，即一个实例从其他实例接收事件。例如，如果我有以下事件：

$（“#开始”。单击（…）

如果单击页面上的任何#start_btn，则所有实例都将启动

那么，如何设计代码，使每个实例只与自己的HTML代码中的元素交互

更新-如果您在这里有相同类型的问题；我发现这是错误的方法。jQuery插件设计是最好的方法

---

每个文档的ID必须是唯一的。不要使用它们。相反，使用通用类属性来标识单个应用程序，这些实例中的类（同样）也指向应用程序的特定部分

HTML示例：

<div class="app">
  <a class="start-button" href="#">button1</a>
</div>
<div class="app">
  <a class="start-button" href="#">button2</a>
</div>

现在，如果你想在特定的应用程序中做一些事情，你可以只使用

应用程序

或其他一些顶级参考来保持该应用程序中的更改

例如，单击时隐藏按钮：

$(app, '.start-button').hide();

有关完整的运行示例，请参见此小提琴：

---

这里介绍的是一个JavaScript应用框架的简单基础。如果这是您编写应用程序的样式，您可能需要考虑一些现成的框架，如AngularJS（），它已经为您提供了一个非常好的框架来处理这种可嵌入的JavaScript应用程序。

您不应该在同一页上有两个具有相同ID的控件。如果你想要完全分开的页面，你可能想把每个应用程序放在自己的IFRAME中，有自己的完整上下文，然后它们会完全分开

---

我想这完全取决于这些东西做什么，以及每件事情有多大和复杂。

您可以为控件命名名称空间

如果你为你的页面发布代码，我可以更新这个答案，但这可能是它的样子

<div id="page1">
  <button class=".startBtn">
</div>
<div id="page2">
  <button class=".startBtn">
</div>

或者，如果他们不是直接的父子关系

$(".startBtn", "#page1").click()
$(".startBtn", "#page2").click()

以下是一些文档：

---

注意：我将startBtn改为一个类而不是一个ID，因为我们通常希望避免DOM中有重复的ID。

“如果单击了页面上的任何#start_btn”->ID应该是唯一的……我理解ID的含义。我总是遵循这一方针。然而，我也见过其他jQuery应用程序是这样工作的：你有一段HTML，它们的id和类都是相同的，但是jQuery代码可以将它们作为独立的应用程序区分开来。我明白你的意思，但是其他人的坏习惯并不是做同样事情的好理由……当然。我一直沿着那条路走。但我需要制作此应用程序，以便在同一页面上有多个实例。这是我见过的唯一的练习。也许有更好的方法来解决这个问题？我不确定本地化是否是正确的术语。也许你的意思是“模块化”？这是一个有趣的想法。现在，如果有人单击appId 1的按钮，需要执行某些操作，例如显示特定的DIV，我如何在appId1而不是appId2中访问该DIV的副本？此解决方案可行，但对于您希望解决的问题来说，它显然是过度设计的。我尽可能避免使用数据属性，因为它们只会给HTML/JS交互增加另一层复杂性。这也使得重复使用模板化的HTML变得更加困难，比如这里的“开始”按钮。编辑以删除ID和数据属性，因为它们实际上不是必需的。我将旧版本存档在这里，以防有人想查找：我接受了这个答案，因为对于我给出的场景，它似乎是最合适的。然而，在我的搜索中，我发现我采取了错误的方法。我阅读了jQuery插件设计，并意识到这是正确的方法。

$("#page1 > .startBtn").click()
$("#page2 > .startBtn").click()

$(".startBtn", "#page1").click()
$(".startBtn", "#page2").click()