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

Question

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

Мне бы хотелось, чтобы этот виджет был "встроенным", означая на той же странице, что и страница хостинга, , а не в iframe, каков наилучший способ избежать конфликтов имен со страницей хостинга или столкновений с другие виджеты?

Конфликты имен могут происходить несколькими способами:

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

Я могу придумать несколько способов избежать столкновений имен, но мне было интересно, есть ли лучшие практики или другие общие рекомендации. Так вот мой 2с:

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

Он интенсивно используется в нескольких средах / библиотеках javascript, таких как 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»).