Introduction détaillée aux connaissances de base de noConflict() et explication détaillée de son utilisation dans le développement réel-js tutoriel-php.cn

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

巴扎黑

Libérer： 2017-06-20 15:45:15

original

1684 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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;;

Copier après la connexion

Méthode d'utilisation 2 :

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

Copier après la connexion

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!