如何避免JavaScript小部件中的名称冲突 [英] How to avoid name clashes in JavaScript widgets
问题描述
我有一个嵌入其他网站的JavaScript小部件（嵌入式JS和HTML代码）。我应该怎么做，以确保它的变量名称不会与托管页面变量冲突？
我想要这个小部件内联意思是相同的页面作为托管页面，不是在iframe中，避免与托管页面发生名称冲突或与其他小部件发生冲突的最佳方法是什么？ $ b
名称冲突可能以多种方式发生：
- JavaScript变量名称
- JavaScript函数名称 li>
- DOM元素标识符
- CSS类名称
- 也许更多...
我可以想出几种方法来避免名称冲突，但我想知道是否有最佳做法或其他一般性建议。
因此，这里是我的2c：
- 只需使用长且可以尝试的唯一名称。这是丑陋的，并不是全面的，但在概念上很简单。
- 使用iframe。但如前所述，我不想使用iframe有几个原因。我希望小部件从页面继承样式属性（例如默认字体和背景颜色），最重要的是，我不知道小部件将会有多大。它取决于实时数据，并且可以是任何大小。
- 使用匿名函数可以更好地确定范围，例如（function（）{my code here}）（）。这个解决方案虽然很优雅，但仍然不适用于我的B / C，它只解决JS名称冲突，但不解决DOM ID或CSS类名称，其次，我也使用jsonp，我需要提供一个回调函数名称，它最终需要位于全局范围内，因此它不能嵌套在匿名函数作用域中。
- 在JavaScript中创建名称空间机制，以提供JS变量和函数的唯一性。样式窗口['my_app'] [variable_name]或窗口['my_app']函数名称。这有点难看，但至少我可以控制名称空间，并且可以保证生成唯一的名称空间。
Javascript命名空间：
http://www.codeproject.com/KB/scripting/jsnamespaces.aspx
它在很多javascript框架/库，如YUI：
http://developer.yahoo.com/yui/雅虎/
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?
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 variable names
- JavaScript function names
- DOM elements identifiers
- CSS class names
- maybe more...
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:
- Just use long and try-to-be-unique names. That's ugly and not full-proof, but is simple in concept.
- Use an iframe. But as mentioned, I don't want to use an iframe for several reasons. I want the widget to inherit style attributes from the page (such as default font and background color) and most importantly, I don't know how large the widget is going to be. It depends on real-time data and may be of any size.
- Use anonymous functions for better scoping, e.g. (function(){my code here})(). This solution, while elegant, still does not work for me b/c first, it only solves the JS name clashed but not the DOM ID ones or CSS class names and second, I also use jsonp for which I need to provide a callback function name, which eventually needs to be in the global scope, so it cannot be nested in the anonymous function scope.
- Create a namespace mechanism in JavaScript that'll provide uniqueness of JS variables and function. Something of the style window['my_app'][variable_name] or window['my_app']function_name. That's a bit ugly as well, but at least I have control over the namespace and can generate guaranteed to be unique namespaces.
Javascript namespaces:
http://www.codeproject.com/KB/scripting/jsnamespaces.aspx
It is heavily used in several javascript frameworks/libraries, such as YUI: http://developer.yahoo.com/yui/yahoo/
这篇关于如何避免JavaScript小部件中的名称冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
