5

我有一个嵌入在其他网站上的 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 变量和函数的唯一性。样式 window['my_app'][variable_name] 或 window['my_app']function_name 的东西。这也有点难看，但至少我可以控制命名空间并且可以生成保证是唯一的命名空间。
4

2 回答 2

4

Javascript 命名空间：

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

它在几个 javascript 框架/库中大量使用，例如 YUI：http: //developer.yahoo.com/yui/yahoo/

于 2009-03-09T22:43:45.753 回答
3

在我之前的项目中，我有一个嵌入在其他站点上的小部件，为了防止名称冲突，我在嵌入站点中使用的所有名称都加上了两个字母前缀（我从 Objective C 中得到了这个想法，所有类都从这里开始带有像 NS...这样的前缀）。

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

关于 DOM ID 和 CSS 类 - 首先，我必须摆脱大多数 ID，因为在同一个站点上可能有来自我的服务的多个小部件。所以剩下的唯一 ID 就是“widget_12345”之类的东西，用来区分小部件。其余元素由 CSS 类标识，所有 CSS 声明都与主窗口小部件容器相关（例如，“.my_widget .left_column”，而不仅仅是“.left_column”）。

于 2009-03-23T12:46:45.740 回答