问单页面应用程序中的不同JavaScript库(SPA)

EN

如果我理解正确，并且您担心(本质上也是)与CSS冲突，那么在库样式表之后包含您自己的自定义样式表是最好的起点；正如@rthor所指出的那样。

然而，这可能不能解决所有问题，纯粹因为它还取决于CSS选择器的特异性。这里有一篇很好的关于CSS specificity的文章--它也可以让你有效地解决任何出现的CSS冲突。

现在是作用域？这是一个不同的主题，也是一个更令人困惑的主题-纯粹是因为(令人惊讶的)浏览器实现的不同。您可以只为较老的浏览器使用polyfill，但这并不是很好。It's purely a HTML5 feature it seems Unless you're talking about the :scope psuedo-selector.. which is working draft for

我相信一些前端的wiz将能够给你更低的关于范围的细节，因为我希望我的解决方案有点不尽如人意。您可以随时使用容器元素(gap..我知道，这并不理想。)并确保所有样式都专门针对容器元素的子元素。

从本质上讲..

<div id="widgetA" class="scope"> <!-- So this is our 'scope' -->
  <div id="bla bla">.....</div>
</div>

通过确保所有CSS选择器都以容器元素开头：

div#widgetA{ /* We essentially get a scoped namespace */ }

然而，这也带来了一些糟糕的问题，比如非语义标记和过于特定的选择器，这些都不利于性能。然而，它有遗留的支持，而且很快很容易..尽管这有点小麻烦。如果您使用类似Sass/的规则，您甚至可以快速地将整个库CSS文件包装在一个CSS规则中并对其进行编译；给出了作用域(尽管使用了上面的

或者，从javascript视图-如果你的目标是特定的元素(并且只针对那些元素)，我看不到太多的问题来自于库应用它们自己的样式-因为库不应该真的篡改其他元素。

祝好运

只需确保在库样式之后添加您自己的样式，那么您应该是非常安全的。如果您遇到一些奇怪的bug，只需删除这些特定的CSS规则，并将它们应用于不同的类。

我相信大多数bug都与box-sizing、定位、margin/padding和大小有直接关系。

干杯!

我最近不得不在一个页面上使用两个不同框架的小部件(ExtJS和jxlib，一个基于mootools的遗留小部件库。

我有两个问题：

第一个是与盒子大小相关的

1. 。ExtJs使用box-sizing: border-box和jxLib box-sizing: content-box。将此代码添加到css中就是我需要的全部内容：

.jxDialog *{ box-sizing:内容-box！重要；-moz-box-sizing:内容-box！重要；-ms-box-sizing:内容-box！重要；-webkit-box-sizing:内容-box！重要；}

• 在Javascript端我只有一个问题和got the solution in this question。使用jQuery，我不知道您是否会遇到问题。