J'ai un widget JavaScript (un morceau de code JS et HTML intégré) intégré dans d'autres sites. Que dois-je faire pour m'assurer que les noms de variables ne se heurtent pas aux variables de la page d'hébergement?
J'aimerais que ce widget soit «inline» sur la même page que la page d'hébergement, pas dans un iframe, quelle est la meilleure façon d'éviter les conflits de noms avec la page d'hébergement ou d'affronter d'autres widgets?
Les affrontements de noms peuvent survenir de plusieurs façons:
Je peux penser à plusieurs façons d'éviter les 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:
Namespaces Javascript:
http://www.codeproject.com/KB/scripting/jsnamespaces.aspx
Il est fortement utilisé dans plusieurs frameworks / bibliothèques javascript, tels que YUI: http://developer.yahoo.com/yui/yahoo/
Dans mon projet précédent, j'avais un widget intégré sur d'autres sites et pour empêcher 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 de Objective C, où toutes les classes commencent Avec un préfixe comme NS …).
Bien sûr, j'ai également utilisé des espaces de noms (p. Ex., Var Foo = {bar: function () {…}}) et "classes" (en utilisant l'implémentation de classe de John Resig), car je les utilise indépendamment de moi si j'ai un widget ou pas, mais Les noms des espaces de noms, des classes et des variables ou fonctions globales ont été préfixés – par ex. HMWidget, HMClass, hmDoSomething (), etc.
En ce qui concerne les ID de DOM et les classes CSS – d'abord, j'ai dû me débarrasser de la plupart des ID en raison de la possibilité d'avoir plusieurs widgets de mon service sur le même site. Donc, les seuls identifiants laissés étaient quelque chose comme "widget_12345" pour distinguer les widgets. Le reste des éléments ont été identifiés 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").