第三方小部件JavaScript

Question

我打算制作一个可以复制粘贴并在任何网站中使用的JavaScript小部件。在开始之前我想了解一些事情。

1. 如何确保我的小部件的CSS不受页面中已经使用的CSS的影响？

2. 如何确保我的JS没有冲突？

非常感谢任何帮助。

谢谢。

Answer 1

您始终可以使用父类来定义窗口小部件使用的样式。这样你就可以很好地控制你的css，也不会与页面上的其他css冲突。

E.g。

.myWidgetName .container{
   /* define your styles here */
}
.myWidgetName .header{
   /* define your styles here */
}

使用命名空间可以避免JS冲突。尽可能使用匿名函数。它们没有名称，也不会被创建为全局变量。匿名函数既可以立即执行，也可以引用以供以后使用。您通常可以将整个脚本包装在匿名函数中，但只要您不创建任何其他全局变量，就没有必要这样做。

(function () {
  //code to execute

})();

Answer 2

内联样式（style="color:red"）始终具有最高优先级。所以通过使用它们，它们不能被其他css声明覆盖。 关于你的javascript，你应该使用一个闭包。将您的代码放入匿名函数并立即调用它。

(function MyFunction() { 

    var myVar = 123;

})();

不要使用任何全局变量。匿名函数中的变量和函数将无法从外部访问。