4

当使用 Javascript/jQuery 向网页添加额外的 HTML 元素并添加额外的外部 CSS 声明以配合它们时，您需要防止这些元素的 ID 和 CSS 类名与页面上已有的冲突。例如，您可能已经在页面某处拥有像“outerWrapper”或“nav”这样的 ID，并且新内容也可能具有相同名称的 ID。

在创建要添加到您自己的网页的代码时，这相对容易。

但是如果你想提供可以在任何 3rd 方网站上使用的代码，你就无法控制页面上已经使用了哪些 ID 和类名，更不用说将来可能对页面进行哪些更改.

那么在处理供第三方使用的代码时，避免这些冲突的最佳做法是什么？

到目前为止，我们一直在简单地使用 iframe，但这并不理想。

CSS 子选择器可以防止我们添加的 CSS 影响现有元素/类，但它们不会阻止我们的新元素被页面上已有的 CSS 设置样式。

为我们添加的内容的所有 ID 加上前缀，比如公司、产品名称或容器名称，是唯一的出路吗？例如，视频播放器 JWPlayer 将容器名称作为其 HTML5 播放器的所有元素 ID 的前缀。

我会很感激任何想法。

4

2 回答 2

2

这对我来说也是一个挑战，特别是因为我正在开发的应用程序包含许多 jquery 弹出窗口/对话框，其中包含输入 ID 与页面父部分上的表单字段相同的表单字段。

我发现以令人满意的方式解决这个问题的事情：

  1. 依靠服务器端生成的 HTML 输入（我为此创建了自己的类）。这将使您可以轻松地为您的 HTML 输入 ID 添加“前缀”。
  2. 在您所做的一切中只使用 camelCase。当您处于需要前缀以避免命名冲突的情况下，您可以使用下划线来区分名称的哪些部分是前缀，哪些部分不是。下划线现在将在您的应用程序中具有直接用途，以便您可以轻松编写功能以在需要时去除前缀。
  3. 使用一致的命名约定创建前缀。我个人获取输入来自的后端服务类的类名（不要与#1 中提到的用于生成它们的类混淆）并将其用作前缀。例如，blogUsers_firstNameandblogUsers_lastName和blogUsers_email都是来自服务器端类的 HTML 文本输入，名为class blogUsers { }.
  4. 当您执行诸如进行 ajax 调用之类的操作时去掉前缀，这样您就可以在没有前缀的情况下接收服务器端控制器类的输入（因为您现在是服务器端并且没有名称冲突）。这使服务器端的生活变得更加轻松和清晰。
  5. 对于更多公共前端网站情况，您更有可能将输入包含在<form>标签中，并且可能会实现渐进增强/优雅降级（即带有 event.preventDefault 的提交按钮上的 jquery 单击绑定），然后不要担心...只需确保您的服务器端生成仅将前缀添加到 ID 而不是输入的名称。发送数据时使用常规的旧表单提交name，因此不要使用前缀，对于那些关闭 javascript 的想象中的偏执狂来说，你会没事的。
于 2014-03-20T14:34:12.380 回答
1

一种选择可能是在动态创建 DOM 对象时使用 GUID 生成 ID。缺点是 ID 不会使用用户友好（因为它只是随机生成的字符列表）。查看此线程：在 JavaScript 中创建 GUID / UUID？

另一种选择是创建自己的命名约定，类似于 ASP.Net 所做的。控件可以有一个静态名称（如“myControl”），但会获得一个预先挂在它上面的所有父对象的列表。用户有责任确保他们遵循良好的 HTML 实践并为其元素提供 id。因此，如果您生成的控件嵌套在一个表格中，在一个 div 中，您的新 ID 可能类似于：myTable_myDiv_myControl。

于 2013-02-28T13:30:54.203 回答