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

2022-01-18 00:00:00 widget javascript html

我有一个嵌入在其他网站上的 JavaScript 小部件(一段嵌入的 JS 和 HTML 代码).我应该怎么做才能确保它的变量名不会与托管页面变量发生冲突?

I have a JavaScript widget (a piece of embedded JS and HTML code) that's embedded on other sites. What should I do to make sure it's variable names don't clash with the hosting page variables?

我希望这个小部件内联"，意思是与托管页面在同一页面上，不是在 iframe 中，避免与托管页面发生名称冲突或冲突的最佳方法是什么与其他小部件?

I'd like this widget to be "inlined" meaning on the same page as the hosting page, not in an iframe, what's the best way to avoid name clashes with the hosting page or clashes with other widgets?

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

Name clashes can happen in several ways:

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

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

I can think of several ways to avoid name clashes, but I was wondering if there's a best-practice or other general recommendations. So here's my 2c:

  1. 只需使用长且尽量独特的名称即可.这很丑陋且不能完全证明，但概念很简单.
  2. 使用 iframe.但如前所述，我不想使用 iframe 有几个原因.我希望小部件从页面继承样式属性(例如默认字体和背景颜色)，最重要的是，我不知道小部件会有多大.它取决于实时数据，可以是任意大小.
  3. 使用匿名函数来更好地确定范围，例如(函数(){我的代码在这里})().这个解决方案虽然很优雅，但首先对我 b/c 仍然不起作用，它只解决了 JS 名称冲突而不是 DOM ID 或 CSS 类名称，其次，我还使用了 jsonp，我需要为其提供回调函数name，最终需要在全局范围内，所以不能嵌套在匿名函数范围内.
  4. 在 JavaScript 中创建一个命名空间机制，以提供 JS 变量和函数的唯一性.样式 window['my_app'][variable_name] 或 window['my_app']function_name 的东西.这也有点难看，但至少我可以控制命名空间，并且可以生成保证是唯一的命名空间.

推荐答案

Javascript 命名空间:

Javascript namespaces:

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

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

It is heavily used in several javascript frameworks/libraries, such as YUI: http://developer.yahoo.com/yui/yahoo/

相关文章