Как избежать столкновений имен в виджетах JavaScript

Question

У меня есть виджет JavaScript (кусок встроенного JS и HTML-кода), встроенный в другие сайты. Что делать, чтобы убедиться, что имена переменных не конфликтуют с переменными страницы хостинга?

Я хотел бы этот виджет будет «встраиваются» означает на той же странице, на странице хостинга, не в IFRAME, что лучший способ избежать конфликтов имен с страницы хостинга или столкновений с другими виджетами?

Имя столкновения может произойти несколькими способами:

• JavaScript имена переменных
• JavaScript имена функций
• идентификаторы DOM элементы
имена классов
• CSS
• поболе ...

Я могу придумать несколько способов oid, но мне было интересно, есть ли передовая практика или другие общие рекомендации. Итак, вот мои 2c:

1. Просто используйте длинные имена и попробуйте уникальные имена. Это уродливое и не полное доказательство, но простое в концепции.
2. Используйте iframe. Но, как уже упоминалось, я не хочу использовать iframe по нескольким причинам. Я хочу, чтобы виджет наследовал атрибуты стиля со страницы (например, шрифт по умолчанию и цвет фона), а самое главное, я не знаю, насколько велика будет виджет. Это зависит от данных в реальном времени и может иметь любой размер.
3. Используйте анонимные функции для лучшего обзора, например. (function() {мой код здесь})(). Это решение, хотя и элегантно, по-прежнему не работает для меня b/c, оно разрешает только имя JS, но не DOM ID или имена классов CSS, а во-вторых, я также использую jsonp, для которого мне нужно предоставить функцию обратного вызова имя, которое в конечном итоге должно быть в глобальной области, поэтому оно не может быть вложено в область анонимных функций.
4. Создайте механизм пространства имен в JavaScript, который обеспечит уникальность переменных и функции JS. Что-то в окне стиля ['my_app'] [имя_переменной_имя] или окно ['my_app'] имя_функции. Это тоже немного уродливо, но, по крайней мере, я контролирую пространство имен и могу обеспечить гарантированное уникальное пространство имен.

Answer 1

Javascript Пространство имена:

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

Он активно используется в несколько яваскрипте рамочных/библиотеки, такие как YUI: http://developer.yahoo.com/yui/yahoo/

Answer 2

В моем предыдущем проекте я был виджет, который был внедренным на других сайтах и ​​для предотвращения конфликтов имен я префикс всех имен, которые будут использоваться на сайтах внедрения с двухбуквенным префиксом (я получил идею от Objective C, где все классы начинаются с префикса, такого как NS ...).

Конечно, я также использовал пространства имен (например, var Foo = {bar: function() {...}}) и "classes" (используя реализацию класса Джона Ресига), потому что я использую их независимо от того, есть ли у меня виджет или нет, но имена пространств имен, классов и глобальных переменных или функций были префиксом - например HMWidget, HMClass, hmDoSomething() и т. Д.

Что касается идентификаторов DOM и классов CSS - во-первых, мне пришлось избавиться от большинства идентификаторов из-за возможности иметь несколько виджетов из моей службы на одном сайте. Таким образом, единственные идентификаторы, которые были оставлены, были чем-то вроде «widget_12345», чтобы рассказать обо всем виджетам. Остальные элементы были идентифицированы классами CSS, и все объявления CSS были сделаны в отношении основного контейнера виджетов (например, «.my_widget .left_column» вместо «.left_column»).