javascript - 避免 View 中元素名称冲突的最佳实践 - BoilerplateJS

Question

假设您的应用程序中有多个组件，每个组件都有自己的 View 。

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

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

组件激活后，它们的 View 通过 Boiler.ViewTemplate 附加到 DOM，现在 Bid 元素存在名称冲突，导致副作用，例如单击 label 仅在 1 个 View 中有效，在其他 View 中被禁用。

避免此类冲突的最佳做法是什么？我是否应该为 View 中的所有元素使用“唯一”后缀/前缀，例如 id="ComponentName_Bid"？或者有更优雅的解决方案？

Answer 1

这确实是一个很好的问题。我也曾多次为此苦苦挣扎。前段时间我做了一个实现，为每个 ViewTemplate 实例提供一个自动生成的唯一 ID。

• 此 UID 可以通过从 ViewTemplate 实例传递给 JS 逻辑(viewmodel.js 等)使用。
• 这可以被 view.html 以及组件特定的 .css 文件用作标记 {comp.uid} ，它将被特殊的 ViewTemplate 逻辑替换，就像用于 'nls' 替换一样(见行105 在 vi​​ew-template.js)。

这当然有效，但开发人员无法理解其复杂性。因此，在更高版本的 BoilerplateJS 中，我删除了此功能，并让开发人员按照您上面的建议手动管理 elementID。

我仍然不知道最好的方法是什么..但目前我相信手动管理它会产生更清晰的代码。