Come evitare conflitti di nome nei widget JavaScript

Question

Ho un widget JavaScript (un pezzo di codice JS e HTML incorporato) incorporato in altri siti. Cosa devo fare per assicurarmi che i nomi delle variabili non entrino in conflitto con le variabili della pagina di hosting?

Vorrei questo widget per essere "inline", cioè sulla stessa pagina come pagina di hosting, non in un iframe, qual è il modo migliore per evitare di nomi scontri con la pagina di hosting o di scontri con altri widget?

Nome scontri possono avvenire in diversi modi:

• JavaScript nomi delle variabili
• JavaScript nomi delle funzioni
• elementi DOM identificatori
nomi delle classi CSS
• forse di più ...

Posso pensare a diversi modi per oid scontri sul nome, ma mi chiedevo se ci fosse una best practice o altre raccomandazioni generali. Quindi ecco il mio 2c:

1. Basta usare nomi lunghi e cercare di essere univoci. È brutto e non a prova di tutto, ma è semplice nel concetto.
2. Utilizzare un iframe. Ma come detto, non voglio usare un iframe per diversi motivi. Voglio che il widget erediti gli attributi di stile dalla pagina (come il carattere predefinito e il colore di sfondo) e, soprattutto, non so quanto sarà grande il widget. Dipende dai dati in tempo reale e può essere di qualsiasi dimensione.
3. Utilizzare funzioni anonime per una migliore visibilità, ad es. (function() {my code here})(). Questa soluzione, sebbene elegante, non funziona ancora per me b/c, risolve solo il nome JS in conflitto ma non quelli DOM o nomi di classi CSS e in secondo luogo, utilizzo anche jsonp per il quale devo fornire una funzione di callback nome, che alla fine deve essere incluso nell'ambito globale, quindi non può essere nidificato nell'ambito della funzione anonima.
4. Creare un meccanismo di spazio dei nomi in JavaScript che fornirà univocità delle variabili e della funzione JS. Qualcosa della finestra di stile ['my_app'] [nome_variabile] o finestra ['mia_app'] nome_funzione. Anche questo è un po 'brutto, ma almeno ho il controllo sullo spazio dei nomi e posso generare spazi di nomi univoci.

Answer 1

Javascript spazi dei nomi:

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

E 'molto utilizzato in diversi javascript framework/librerie, come YUI: http://developer.yahoo.com/yui/yahoo/

Answer 2

nel mio progetto precedente ho avuto un widget che è stato incorporato su altri siti, e per prevenire conflitti tra nomi ho prefisso tutti i nomi che sarebbero stati usati nei siti di incorporamento con un prefisso a due lettere (ho avuto l'idea dall'Obiettivo C, dove tutte le classi iniziano con un prefisso come NS ...).

Naturalmente ho utilizzato anche spazi dei nomi (ad es. Var Foo = {bar: function() {...}}) e "classes" (utilizzando l'implementazione di classe di John Resig), perché li uso indipendentemente dal fatto che disponga di un widget oppure no, ma i nomi degli spazi dei nomi, delle classi e delle variabili o funzioni globali erano prefissati, ad es HMWidget, HMClass, hmDoSomething(), ecc.

Per quanto riguarda gli ID DOM e le classi CSS, in primo luogo, ho dovuto sbarazzarmi della maggior parte degli ID a causa della possibilità di avere più widget dal mio servizio sullo stesso sito. Quindi gli unici ID rimasti erano qualcosa come "widget_12345" per distinguere i widget. Il resto degli elementi è stato identificato dalle classi CSS e tutte le dichiarazioni CSS sono state eseguite in relazione al contenitore del widget principale (ad esempio ".my_widget .left_column" anziché solo ".left_column").