编写javascript库

Question

问题

我正在写一个javascript库。有些函数会在文档中附加很多元素。我选择不通过javascript单独设置这些样式，因为它耗费了大量的执行时间。相反，我将为所有附加元素提供一个或多个特定的类名或ID（在此上下文中区别无关紧要），然后在预生成的样式表中定义样式。

这种做法可能会导致类/ id命名冲突。想象一下，该库的用户已经在另一个样式表中定义了#foo，或者在另一个库的javascript中定义了.bar。

对此的解决方案是为类名添加前缀以最小化碰撞的可能性。虽然这并没有减少它发生在0的可能性。是否还有另一种通过javascript避免这种情况的方法？

Answer 1

一种方法是为元素使用更具体的选择器，而不是使用前缀重命名类名，而不是。这意味着一个库可以具有与另一个库相同的类名：

HTML

<div class="lib1 someClass"></div>
<div class="lib2 someClass"></div>

CSS

.lib1.someClass {color: green;}
.lib2.someClass {color: black; font-size: 14px;}

或使用父母：

HTML

<div class="lib1">
    <div class="someClass"></div>
</div>
<div class="lib2">
    <div class="someClass"></div>
</div>

CSS

.lib1 .someClass {color: green;}
.lib2 .someClass {color: black; font-size: 14px;}

等......如果您定义了.someClass并且它在库规则中有一些未定义（因此没有被覆盖）的规则，它可能会变得复杂，但是仍然可以通过使用重置来轻松修复它每个图书馆的表格。

我建议不要使用ID，因为您可能最终在一个页面上有重复的ID。

Answer 2

我不认为您可以100％确定您的ID和类被任何库用户代码引用。
因此，前缀是一种最小化机会的解决方案 您可以使前缀更像名称空间样式 另外一个可能对你的情况没有帮助的解决方案是将你生成的html包含在内部和iframe中 提示：阅读有关如何构建javascript / html小部件的内容可能会给你一些更多的想法。