Comment éviter les conflits de noms dans les widgets JavaScript

Question

J'ai un widget JavaScript (un morceau de code JS et HTML intégré) qui est intégré sur d'autres sites. Que dois-je faire pour m'assurer que les noms de variables ne sont pas en conflit avec les variables de la page d'hébergement?

Je voudrais ce widget à « inline » qui signifie sur la même page que la page d'accueil, pas dans un iframe, quelle est la meilleure façon d'éviter les conflits de noms avec la page d'accueil ou des affrontements avec d'autres widgets?

affrontements Nom peuvent se produire de plusieurs façons:

• JavaScript noms de variables
• JavaScript noms de fonction
• éléments DOM identificateurs
• noms de classes CSS
• peut-être plus ...

Je peux penser à plusieurs façons d'av Il y a eu des conflits de noms, mais je me demandais s'il y avait une meilleure pratique ou d'autres recommandations générales. Alors voici mon 2c:

1. Utilisez simplement des noms longs et essayez-d'-être-unique. C'est moche et pas complètement à l'épreuve, mais c'est simple dans le concept.
2. Utilisez une iframe. Mais comme mentionné, je ne veux pas utiliser un iframe pour plusieurs raisons. Je souhaite que le widget hérite des attributs de style de la page (tels que la police par défaut et la couleur d'arrière-plan) et surtout, je ne sais pas quelle sera la taille du widget. Cela dépend des données en temps réel et peut être de n'importe quelle taille.
3. Utilisez des fonctions anonymes pour une meilleure visibilité, par ex. (function() {mon code ici})(). Cette solution, bien qu'élégante, ne fonctionne toujours pas b/c d'abord, elle ne résout que le nom JS mais pas les noms DOM ou les noms de classes CSS et ensuite j'utilise jsonp pour lequel je dois fournir une fonction de callback name, qui doit éventuellement être dans la portée globale, de sorte qu'il ne peut pas être imbriqué dans la portée de la fonction anonyme.
4. Créez un mécanisme d'espace de noms en JavaScript qui fournira l'unicité des variables et des fonctions JS. Quelque chose de la fenêtre de style ['my_app'] [nom_variable] ou de la fenêtre ['my_app'] nom_fonction. C'est un peu moche aussi, mais au moins j'ai le contrôle sur l'espace de noms et peux générer des espaces de noms uniques garantis.

Answer 1

Javascript namespaces:

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

Il est largement utilisé dans plusieurs cadres javascript/bibliothèques, tels que YUI: http://developer.yahoo.com/yui/yahoo/

Answer 2

Dans mon précédent projet j'ai eu un widget qui a été intégré sur d'autres sites, et pour éviter les conflits de noms, j'ai préfixé tous les noms qui seraient utilisés dans les sites d'intégration avec un préfixe à deux lettres (j'ai eu l'idée d'Objective C, où toutes les classes commencent par un préfixe NS ...). Bien sûr, j'ai aussi utilisé des espaces de noms (par exemple var Foo = {bar: function() {...}}) et "classes" (en utilisant l'implémentation de classe de John Resig), parce que je les utilise ou pas, mais les noms des espaces de noms, des classes et des variables globales ou des fonctions ont été préfixés - par exemple HMWidget, HMClass, hmDoSomething(), etc.En ce qui concerne les DOM IDs et les classes CSS - d'abord, j'ai dû me débarrasser de la plupart des IDs en raison de la possibilité d'avoir plusieurs widgets de mon service sur le même site. Ainsi, les seuls ID restants étaient quelque chose comme "widget_12345" pour distinguer les widgets. Le reste des éléments a été identifié par des classes CSS et toutes les déclarations CSS ont été effectuées par rapport au conteneur de widget principal (par exemple ".my_widget .left_column" au lieu de simplement ".left_column").