如何避免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/