Javascript 在水疗中心创建干净id空间的常见解决方案是什么？

情况：几个开发人员远程处理SPA的不同部分/模块。 因此，它们可能会意外地引入具有相同

id

的HTML元素。在最终组装之前，避免这种情况（如果可能，不拒绝使用id）的常见方法是什么

我的浅薄猜测：

• 为所有名称预先安排

  id

  （有点可笑，但…）

• 具有架构的结构名称，例如，对于

  应用程序/集合/模型

  指定一个名称，如

  应用程序集合模型

• 一般拒绝使用

  id

  s，还是仅用于大型模块

---

除非绝对必要，否则尽量避免使用ID。从CSS或JS引用HTML片段时，请坚持使用类而不是ID。您的CSS和JS不应该真正关心DOM的确切结构或页面上有多少“foo”元素。。。他们只想对任何“foo”元素进行风格化或操作，这些元素是完全适合类的

但是你不能完全避免身份证。。。例如，标记HTML以支持可访问性需要使用ID。。。但是，这些ID和对它们的引用将被限制在同一个HTML文件（或SPA模板）中，因此，如果您觉得可能与它们中的任何一个发生冲突，请继续将它们设置为详细/冗长，以避免冲突

---

当然，这并不能完全解决你的问题。通过关注类，您可以避免生成无效的HTML和所有内容爆炸的可能性，但您仍然存在协作问题，即确保人们不会因为使用相同的类名而意外地破坏彼此的工作。在许多情况下，您实际上希望跨页面使用相同的类。但是，如果您希望确保没有冲突（例如，在整个站点上使用通用按钮或排版样式），您可以将每个HTML模板包装成

…

之类的格式，然后再包装到CSS/JS选择器中，将选择器的作用域设置为仅在该模板内匹配：

。此模板的名称。a-class-used-in-the-template

我更希望看到仅用于指定模块、小部件、主要部分等的id。这通常会减少id，并且大多数命名都是由业务逻辑创建的。你也会用一种本地化的层次结构来构造你的类和标记，比如：

\specialWidget h3{}\specialWidget p{}

，你只需要选择你的处理程序，比如-

$（“#specialWidget.some btn”）。点击（）

，永远不要点击

$（'\someBtn'）。点击（）

，因为它太乱太具体了

---

在这之后，测试和持续集成是抓住类似问题的最佳选择

当一个项目由多个团队并行开发时，成功的关键因素是团队之间的沟通

各团队应在规定的时间间隔聚在一起讨论交叉关注点（例如ID的命名策略）。例如，如果使用Scrum敏捷开发方法，团队将定期召开“Scrum of Scrum”会议来讨论此类问题

---

通过对话，团队将能够就最适合当时开发的组件的命名约定达成一致（并记录约定约定以备将来参考）（当我当时说“最佳”时，我指的是最简单、最易于阅读，同时避免任何命名冲突）。因此，您建议在并行工作时“预先安排”id并不像您想象的那么荒谬

如果您使用不同的ID一次又一次地编写相同的HTML代码，那么您就做错了

现在，有很多方法可以创建不需要ID的可重用HTML组件

我认为不对：

对于大型项目（涉及多个团队或大量视图），我认为反复编写原始HTML不是一个好主意

这种方法意味着：代码的重复和未来重构的痛苦（想想在2年内重新设计应用程序的样式）。这就是为什么有这么多UI框架可以帮助创建可重用组件，其中HTML只编写一次，在任何地方都可以使用。最后，您的应用程序将需要几个组件：表格、弹出窗口、表单、子菜单、选项卡

目标是用开发人员可以用来创建视图的组件创建一个框架，而无需实际编写任何HTML代码

我的观点是：HTML代码应该编写一次，而且在大型项目中只能编写一次。显然，它只写一次并不意味着它只能在一个地方呈现，它可以在应用程序中的任何地方呈现

我的建议是：

数据绑定到救援

---

如果不可能做出大的改变，那么传统就是最好的选择。你提出的方案可能有道理，但要小心，每次你改变结构时，你所有的ID都会出错

在我的一个项目中，我们遇到了这个问题。我们的快速解决方案和下一个代码维护/重构周期的一部分是使用可识别的html元素通过模板继承JavaScript容器的属性

让我说得更详细些

• 我们使用

  主干。木偶
  和
  把手
  模板。对于每个模板，我们都有一个与每个模板相关联的自定义视图类（我们扩展了Backbone.marionete，其中包含更多功能）。此视图类具有ID和UI元素。UI元素是在模板中编译的，因此我们永远不必更改HTML，除非我们在视图类本身中更改UI元素名称。因此，我们可以随意更改UI元素的Id，而不会影响任何事情（几乎）
  

• 因为我们为每个wid使用视图