Javascript 避免视图中元素名称冲突的最佳实践-样板文件

假设应用程序中有几个组件，每个组件都有自己的视图

虽然组件是独立的，但它们的视图可能会对DOM元素使用相同的标识符，例如，有可能2个或更多组件的视图具有类似的输入控制，如：

<label for="Bid">Bid</label>
<input type="text" id="Bid" name="Bid" value="0"/>

投标

组件激活后，它们的视图通过

Boiler.ViewTemplate

附加到DOM，现在

Bid

元素存在名称冲突，导致副作用，例如单击

标签

仅在一个视图中工作，在其他视图中禁用

---

避免此类碰撞的最佳做法是什么？我是否应该为视图中的所有元素使用“唯一”后缀/前缀，如

id=“ComponentName\u Bid”

？还是有更优雅的解决方案？

这确实是一个很好的问题。我也为此挣扎了很多次。不久前，我实现了为每个ViewTemplate实例提供自动生成的唯一id

• 通过从ViewTemplate实例传递UID，可以从JS逻辑（viewmodel.JS等）使用此UID
• 这可以被view.html以及组件特定的.css文件用作标记{comp.uid}，该标记将被特殊的ViewTemplate逻辑替换，就像用于“nls”替换一样（参见view template.js中的第105行）

这当然是可行的，但其复杂性让开发人员难以理解。因此，在稍后版本的BoilerplateJS中，我删除了这个功能，并让开发人员按照上面的建议手动管理ElementID

---

我仍然不知道最好的方法是什么。。但目前我认为手动管理它会产生更干净的代码。

另一种选择是简单地将

输入

放入

标签中，如下所示：

<label>
   Last Name
   <input type="text" name="lastname" />
</label>


姓