Como evitar conflitos de nome em Widgets JavaScript

Question

Eu tenho um JavaScript widget (um pedaço de incorporado código JS e HTML) que está incorporado em outros sites. O que devo fazer para ter certeza que é nomes de variáveis ??não se chocam com as variáveis ??de página de hospedagem?

Eu gostaria esta ferramenta ao ser "inline", ou seja, na mesma página como a página de hospedagem, não em um iframe, qual é a melhor maneira de conflitos de nome evitar com a página ou confrontos hospedagem com outros widgets?

confrontos Nome pode acontecer de várias maneiras:

• nomes de variáveis ??JavaScript
• nomes de função JavaScript
• DOM elementos identificadores
• nomes de classe CSS
• talvez mais ...

Não consigo pensar em várias maneiras de evitar conflitos de nome, mas eu queria saber se há uma melhor prática ou outras recomendações gerais. Então aqui está o meu 2c:

1. Basta usar longa e tente-a-ser-exclusivo nomes. Isso é feio e não cheio-prova, mas é simples no conceito.
2. Use um iframe. Mas, como referi, eu não quero usar um iframe por várias razões. Eu quero o widget para atributos de estilo herdar da página (como fonte padrão e cor de fundo) e, mais importante, eu não sei o quão grande o widget vai ser. Depende de dados em tempo real e podem ser de qualquer tamanho.
3. Usar funções anônimas para uma melhor definição do âmbito, por exemplo, (Function () {meu código aqui}) (). Esta solução, enquanto elegante, ainda não funciona para me b / c em primeiro lugar, que só resolve o nome JS entraram em confronto, mas não os DOM de identificação ou nomes de classe CSS e segundo, eu também uso jsonp para que eu preciso para fornecer uma função de retorno nome, que eventualmente tem de ser no âmbito global, por isso não pode ser aninhado no âmbito função anônima.
4. Criar um mecanismo de namespace em JavaScript que vai fornecer singularidade de variáveis ??e função JS. Algo da janela do estilo [ 'my_app'] [variable_name] ou janela [ 'my_app'] function_name. Isso é um pouco feio também, mas pelo menos eu tenho controle sobre o namespace e pode gerar a garantia de ser namespaces exclusivos.

Answer 1

namespaces javascript:

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

É muito utilizada em diversos frameworks JavaScript / bibliotecas, como YUI: http://developer.yahoo.com/yui/yahoo/

Answer 2

No meu projeto anterior que eu tinha um widget que foi incorporado em outros sites, e para evitar conflitos de nomes I prefixo de todos os nomes que seriam usados ??nos sites de incorporação com duas letras de prefixo (eu tive a idéia de Objective C, onde todas as aulas começam com um prefixo como NS ...).

É claro que eu também usou namespaces (por exemplo var Foo = {bar: function () {...}}) e "classes" (usando implementação de classe de John Resig), porque eu usá-los independentemente se eu tiver um widget ou não, mas os nomes dos namespaces, classes e variáveis ??ou funções globais foram prefixados - por exemplo, HMWidget, HMClass, hmDoSomething (), etc.

Em relação DOM IDs e classes CSS - primeiro, eu tinha de se livrar da maioria das identificações por causa da possibilidade de ter vários widgets do meu serviço no mesmo site. Assim, as únicas identificações que foram deixados eram algo como "widget_12345" para contar os widgets separados. O resto dos elementos foram identificados por classes CSS, e todas as declarações CSS foram feitas em relação ao recipiente widget principal (por exemplo, ".my_widget .left_column" em vez de apenas ".left_column").