Maison > Article > interface Web > Introduction détaillée aux connaissances de base de noConflict() et explication détaillée de son utilisation dans le développement réel

Introduction détaillée aux connaissances de base de noConflict() et explication détaillée de son utilisation dans le développement réel

巴扎黑original: 2017-06-20 15:45:151674parcourir

Comme vous le savez déjà, jQuery utilise le symbole $ comme raccourci pour jQuery.

Et si d'autres frameworks JavaScript utilisaient également le signe $ comme raccourci ?

Certains autres frameworks JavaScript incluent : MooTools, Backbone, Sammy, Cappuccino, Knockout, JavaScript MVC, Google Web Toolkit, Google Closure, Ember, Batman et Ext JS.

Certains de ces frameworks utilisent également le symbole $ comme raccourci (tout comme jQuery). Si vous utilisez deux frameworks différents qui utilisent le même symbole raccourci, cela peut entraîner l'arrêt du script.

L'équipe jQuery a pris en compte ce problème et a implémenté la méthode noConflict(). Méthode

jQuery noConflict() La méthode

noConflict() libère le contrôle de l'identifiant $ afin que d'autres scripts puissent l'utiliser.

Bien sûr, vous pouvez toujours utiliser jQuery en remplaçant l'abréviation par le nom complet :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍然在工作!");
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>点我</button>
</body>
</html>

Vous pouvez également créer votre propre abréviation. noConflict() renvoie une référence à jQuery que vous pouvez stocker dans une variable pour une utilisation ultérieure. Jetez un œil à cet exemple :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var jq=$.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍然在工作!");
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>点我</button>
</body>
</html>

Si votre bloc de code jQuery utilise l'abréviation $ et que vous ne souhaitez pas modifier ce raccourci, vous pouvez transmettre le symbole $ en tant que variable à la méthode ready. De cette façon, vous pouvez utiliser le symbole $ à l'intérieur de la fonction - mais en dehors de la fonction, vous devez toujours utiliser "jQuery" :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍然在工作!");
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>点我</button>
</body>
</html>

En développement réel :

Exécutez cette fonction pour changer la variable $ Control est transféré à la première bibliothèque pour l'implémenter.

Cela permet de garantir que jQuery n'entre pas en conflit avec les objets $ d'autres bibliothèques.

<script type="text/javascript" src="/javascripts/jquery.js"></script>
  　　<script type="text/javascript">
  　　　　 var j$ = $;
   　　　　jQuery.noConflict();
  　　</script>
<script type="text/javascript" src="/javascripts/prototype.js" ></script>

Après avoir exécuté cette fonction, vous ne pouvez accéder à l'objet jQuery qu'à l'aide de variables jQuery. Par exemple, lorsque $("div p") est utilisé, il doit être remplacé par j$("div p").

Remarque : Cette fonction doit être utilisée après avoir importé le fichier jQuery, et avant d'importer une autre bibliothèque qui provoque des conflits. Bien sûr, cela doit également être fait avant d'utiliser d'autres bibliothèques en conflit, à moins que jQuery ne soit importé en dernier.

Méthode d'utilisation 1 :

jQuery.noConflict();
// 使用 jQuery
j$("div p").hide(); 
// 使用其他库的 $() 
$("content").style.display = &#39;none&#39;;

Méthode d'utilisation 2 :

//我的一个站点 viqiwu.com
var viqiwu = jQuery.noConflict();
// 基于 jQuery 的代码
viqiwu("div p").hide(); 
// 基于其他库的 $() 代码 
$("content").style.display = &#39;none&#39;;

De cette façon, vous n'avez pas à vous soucier des conflits entre JQuery et d'autres frameworks JS, et je me sentais inquiet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Une brève analyse du mécanisme anti-conflit dans jQuery-noConflictArticle suivant：Une brève analyse du mécanisme anti-conflit dans jQuery-noConflict

Articles Liés

Voir plus