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

Question

我有一个嵌入在其他网站上的JavaScript小部件（嵌入式JS和HTML代码）。我该怎么做以确保它的变量名称不会与托管页面变量发生冲突？

我希望这个小部件“内联”意味着与托管页面在同一页面上，不是在iframe中，避免与托管页面冲突或冲突的最佳方法是什么与其他小部件？

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

• JavaScript变量名称
• JavaScript函数名称
• DOM元素标识符
• CSS班级名称
• 也许更多......

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

1. 只需使用长而且尝试独特的名称。这是丑陋而不是完全证明，但概念很简单。
2. 使用iframe。但如上所述，出于几个原因，我不想使用iframe。我希望窗口小部件从页面继承样式属性（例如默认字体和背景颜色），最重要的是，我不知道窗口小部件的大小。它取决于实时数据，可以是任何大小。
3. 使用匿名函数来更好地确定范围，例如（function（）{my code here}）（）。这个解决方案，虽然优雅，但仍然不适合我b / c首先，它只解决JS名称冲突但不解决DOM ID或CSS类名称，其次，我还使用jsonp我需要提供一个回调函数name，最终需要在全局范围内，因此不能嵌套在匿名函数范围内。
4. 在JavaScript中创建一个命名空间机制，它将提供JS变量和函数的唯一性。样式窗口['my_app'] [variable_name]或window ['my_app'] function_name的某些内容。这也有点难看，但至少我可以控制命名空间，并且可以保证是唯一的命名空间。

Answer 1

Javascript名称空间：

http://www.codeproject.com/KB/scripting/jsnamespaces.aspx

它在很多javascript框架/库中大量使用，比如YUI： http://developer.yahoo.com/yui/yahoo/

Answer 2

在我之前的项目中，我有一个嵌入在其他网站上的小部件，为了防止名称冲突，我在嵌入网站中使用了两个字母前缀的所有名称前缀（我从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”）。