如何避免JavaScript小部件中的名称冲突

我有一个JavaScript小部件（一段嵌入的JS和HTML代码），它嵌入在其他网站上。我应该怎么做才能确保它的变量名不会与宿主页面变量冲突

我希望这个小部件是“内联”的，意思是在与宿主页面相同的页面上，而不是在iframe中，避免名称与宿主页面冲突或与其他小部件冲突的最佳方法是什么

名称冲突可能以多种方式发生：

• JavaScript变量名
• JavaScript函数名
• DOM元素标识符
• CSS类名
• 也许更多

我可以想出几种避免名字冲突的方法，但我想知道是否有最佳实践或其他一般性建议。 这是我的2c：

只需使用long并尝试成为唯一的名称。这很难看，也没有充分的证据，但在概念上很简单

使用iframe。但正如前面提到的，出于几个原因，我不想使用iframe。我希望小部件从页面继承样式属性（例如默认字体和背景色），最重要的是，我不知道小部件将有多大。它取决于实时数据，可以是任何大小

使用匿名函数进行更好的范围界定，例如（function（）{my code here}）（）。这个解决方案虽然优雅，但仍然不适用于我b/c首先，它只解决JS名称冲突，而不解决DOM ID名称或CSS类名；其次，我还使用jsonp，我需要为其提供回调函数名，它最终需要在全局范围内，因此它不能嵌套在匿名函数范围内

在JavaScript中创建一个名称空间机制，该机制将提供JS变量和函数的唯一性。窗口['my_app'][变量名称]或窗口['my_app']函数名称的样式。这也有点难看，但至少我可以控制名称空间，并且可以生成保证唯一的名称空间

Javascript名称空间：

它在几个javascript框架/库中大量使用，例如YUI：

---

在我以前的项目中，我有一个嵌入在其他站点上的小部件，为了防止名称冲突，我在嵌入站点中使用的所有名称前面加了一个两个字母的前缀（我是从Objective C得到这个想法的，在Objective C中，所有类都以前缀开头，如NS…）

当然，我也使用了名称空间（例如var Foo={bar:function（）{…}}）和“classes”（使用John Resig的类实现），因为无论我是否有小部件，我都使用它们，但是名称空间、类和全局变量或函数的名称都有前缀-例如HMWidget、HMClass、hmDoSomething（）等等

关于DOM ID和CSS类——首先，我必须去掉大多数ID，因为在同一个站点上可能有来自我的服务的多个小部件。所以剩下的唯一ID是类似“widget_12345”的东西，用来区分这些小部件。其余元素由CSS类标识，所有CSS声明都是针对主小部件容器（例如“.my_widget.left_column”而不是“.left_column”）进行的