conflit javascript

Question

pourquoi certains javascripts entrent-ils en conflit avec d'autres? Je veux dire que j'avais utilisé le code javascript pour la galerie d'images, puis j'ai essayé d'obtenir le filigrane de texte dans jquery. Pourquoi est-ce qu'après avoir utilisé la jquery, la galerie a totalement disparu? il n'y avait pas d'identifiants communs que j'ai utilisés dans les deux scripts. Une raison pour cela?

Answer 1

Comme Mathias a bien souligné, le problème le plus probable est que votre autre bibliothèque utilise également le symbole $ - lorsque vous avez ajouté jQuery à la page, il écrasait l'ancienne variable $ avec son propre $ ... et votre première bibliothèque javascript a cessé de fonctionner. La solution consiste à appeler jQuery.noConflict() pour restaurer la variable dans la première bibliothèque. Vous serez toujours en mesure d'utiliser les plugins jQuery - vous aurez juste besoin de mettre à jour des exemples de scripts qui utilisent $ pour utiliser jQuery à la place. Ainsi $("#my_content").css({color: "red"}); deviendrait jQuery("#my_content").css({color: "red"});

Alternativement, vous pouvez affecter l'objet jQuery à un autre objet variable de cette manière:

$jq=jQuery.noConflict(); //From now on jQuery can be called with the $jq function 

ou vous pouvez l'utiliser dans une fermeture:

(function($) { 
    // $ in here will map to jQuery 
    //outside of this code $ will map to your other library's $ 
})(jQuery.noConflict()); 

Answer 2

Essayez celui-ci: http://api.jquery.com/jQuery.noConflict/

Answer 3

Parfois, les gens peuvent utiliser des variables globales dans leur javascript emballé. Si vous avez deux paquets qui utilisent la même variable globale, il va évidemment y avoir des problèmes. Pour le résoudre, vous pouvez essayer de créer une fermeture autour du code de chaque paquet différent. Sans voir le code, je ne suis pas 100% que cela fonctionnerait, mais voici un exemple:

// gallery.js 
var textTitle = "Image gallery"; 

function getGalleryTitle() { return textTitle; } 


////////////// 
// watermark.js 

var textTitle = "Watermark"; 


alert(getGalleryTitle()); // "Watermark" :(

Maintenant, avec les fermetures, créé en utilisant des fonctions anonymes:

(function() { 
    var textTitle = "Image gallery"; 
    function getGalleryTitle() { 
     return textTitle; // this will always be "Image gallery" 
    } 
})(); 

(function() { 
    var textTitle = "Watermark"; // won't conflict with any other code. 
})(); 

L'inconvénient est que vous ne pouvez plus accéder globalement à ces variables et fonctions (par exemple, via des gestionnaires d'événements inline).