Question

问题陈述： 我需要找到一个解决方案，其中JavaScript和CSS不会与HTML页面上运行的其他脚本（小部件）发生冲突。

建议的解决方案 有谁知道限制JavaScript范围的方法？我知道有两种方式

使用IFrame加载小部件
使用Frameset加载小部件

使用这两个选项，它会永久删除任何形式的JavaScript或CSS冲突。有没有人知道其他任何方式？

Answer 1

在同一页面上包含多个小部件/插件/库时，它们之间总是存在冲突的可能性。显然，对此唯一的万无一失的解决方案是使用iframe，但是由于seo的目的，这通常是不理想的，或者小部件需要做的不仅仅是在iframe中完成。

没有办法保证一个小部件不会与另一个小部件发生冲突，除非您自己编写小部件并考虑到这种可能性（当然除了使用iframe之外）。

命名空间是一种避免css和js之间冲突的常用技术。从css的角度来看，它只是意味着在窗口小部件的容器元素上使用id或类，并在插件使用的每种样式中使用该类（请注意，由于css的性质，这并不是绝对的保证某些东西不会发生冲突。）在js中，它意味着将所有方法和变量存储在私有范围内，只能从window上的单个唯一属性访问，类似于jquery定义window.jQuery的方式。< / p>

.myWidget .header {...}
.myWidget .footer {...}
.myWidget .header a {...}

和

(function(window){
    function doSomething() {...}
    function doSomethingElse() {...}
    window.myWidget = {
        fn1: doSomething,
        fn2: doSomethingElse
    };
}(window);
myWidget.fn1();

Answer 2

现在你可以开始使用一些非常酷的东西。对于当前和上一代网络浏览器，@ KevinB的答案是正确的（+ 1＆＃39; ed），但我建议你开始研究 {{3这将隔离你的小部件＆＃34;正如你所希望的那样。

好消息是，您今天可以使用 Web Components 库/ polyfill使用网络组件开始。

一种限制JavaScript / CSS范围的方法？

2 个答案: