Maison >interface Web >js tutoriel >Explication détaillée de l'utilisation de la bibliothèque jQuery lors de l'impact

Explication détaillée de l'utilisation de la bibliothèque jQuery lors de l'impact

php中世界最好的语言original: 2018-04-23 11:25:451363parcourir

Cette fois, je vais vous donner une explication détaillée de l'utilisation de la bibliothèque jQuery lors de l'impact. Quelles sont les précautions lors de l'utilisation de la bibliothèque jQuery, jetons un coup d'œil.

Avant-propos

Lors d'une interview, l'intervieweur a demandé comment résoudre les conflits entre jQuery et d'autres bibliothèques ? Même si je l'ai déjà vu, je ne m'en souviens plus.

Mon idée est que si on me demande de concevoir, j'utiliserai une valeur par défaut de $ Si aucun paramètre n'est transmis, alors utilisez $. Enfin, montez-le sur window.$ et transmettez les paramètres. . Si le nom est transmis, comme jq, alors je le monterai sur window.jq.

var myControl="jq";
(function(name){
 var $=name ||"$"; //name存在$的值就是name的值，不存在或为null，$的值为字符串"$"
 console.log($);
 window[$]=function(){
 alert("123");
 }
})(myControl)
window[myControl]();

En fait, ce n’est certainement pas la façon dont jquery résout les conflits. Jetez ensuite un œil à la façon dont jQuery résout les conflits.

Les versions multiples de jQuery ou les conflits avec d'autres bibliothèques js sont principalement des conflits avec le symbole $ couramment utilisé.

1. Résolution des conflits

1. Comment résoudre les conflits entre plusieurs versions de jQuery d'une même page

<body>
<!-- 引入1.6.4版的jq -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<script> var jq164 = jQuery.noConflict(true); </script>
<!-- 引入1.4.2版的jq -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script> var jq142 = jQuery.noConflict(true); </script>
<script>
(function($){
 //此时的$是jQuery-1.6.4
 $('#');
})(jq164);
</script>
 
<script>
jq142(function($){
 //此时的$是jQuery-1.4.2
 $('#');
});
</script>
 
</body>

2. La bibliothèque jQuery importe la méthode

après que d'autres bibliothèques libèrent le contrôle de l'identifiant $ afin que d'autres scripts puissent l'utiliser. jQuery noConflict()

1. Vous pouvez utiliser jQuery en remplaçant son abréviation par son nom complet

Une fois les autres bibliothèques et la bibliothèque jQuery chargées, vous pouvez appeler la fonction

à tout moment pour modifier le La variable $ Control est transférée vers d'autres bibliothèques JavaScript. Ensuite, vous pouvez utiliser la fonction jQuery.noConflict() comme usine de fabrication d'objets jQuery dans le programme. jQuery()

<script src="prototype.js" type="text/javascript"></script>
<script src="jquery.js" type="text/javascript"></script>
<p id="pp">test---prototype</p>
<p>test---jQuery</p>
<script type="text/javascript">
jQuery.noConflict();  //将变量$的控制权让渡给prototype.js，全名可以不调用。
jQuery(function(){   //使用jQuery
 jQuery("p").click(function(){
 alert( jQuery(this).text() );
 });
});
//此处不可以再写成$,此时的$代表prototype.js中定义的$符号。
$("pp").style.display = 'none'; //使用prototype
</script>

2. Personnalisez un raccourci

qui peut renvoyer une référence à jQuery et la stocker dans un nom personnalisé, tel que jq, variables $J, pour une utilisation ultérieure. noConflict()

Cela garantit que jQuery n'entrera pas en conflit avec d'autres bibliothèques lors de l'utilisation d'un raccourci personnalisé.

<script type="text/javascript">
var $j = jQuery.noConflict(); //自定义一个比较短快捷方式
$j(function(){   //使用jQuery
 $j("p").click(function(){
 alert( $j(this).text() );
 });
});
$("pp").style.display = 'none'; //使用prototype
</script>

3. S'il n'y a pas de conflit, utilisez toujours $

Si vous souhaitez utiliser l'abréviation $ dans le bloc de code jQuery et ne souhaitez pas modifier ce raccourci, vous pouvez passez le symbole $ en tant que variable Give ready méthode. 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".

<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(document).ready(function($){
 $("p").click(function(){ //继续使用 $ 方法
 alert( $(this).text() );
 });
});
//或者如下
jQuery(function($){   //使用jQuery
 $("p").click(function(){ //继续使用 $ 方法
 alert( $(this).text() );
 });
});
</script>

Ou utilisez des blocs d'instructions IEF, ce qui devrait être le moyen le plus idéal, car une compatibilité totale peut être obtenue avec un minimum de modifications de code.

Lorsque nous écrivons nos propres plug-ins jquery, nous devrions tous utiliser cette méthode d'écriture, car nous ne savons pas comment introduire séquentiellement diverses bibliothèques js au cours du processus de travail spécifique, mais cette méthode d'écriture de blocs d'instructions peut conflits de boucliers.

<script type="text/javascript">
jQuery.noConflict();  //将变量$的控制权让渡给prototype.js
(function($){   //定义匿名函数并设置形参为$
 $(function(){   //匿名函数内部的$均为jQuery
 $("p").click(function(){ //继续使用 $ 方法
  alert($(this).text());
 });
 });
})(jQuery);    //执行匿名函数且传递实参jQuery
$("pp").style.display = 'none'; //使用prototype
</script>

3. La bibliothèque jQuery est importée avant les autres bibliothèques

La bibliothèque jQuery est importée avant les autres bibliothèques La propriété de $ appartient au JavaScript suivant. bibliothèque par défaut. Ensuite, vous pouvez utiliser "jQuery" directement pour effectuer du travail jQuery.

En même temps, vous pouvez utiliser la méthode

comme raccourci vers d'autres bibliothèques. Il n'est pas nécessaire d'appeler la fonction $() ici. jQuery.noConflict()

<!-- 引入 jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<!-- 引入 prototype -->
<script src="lib/prototype.js" type="text/javascript"></script>
<body>
<p id="pp">Test-prototype(将被隐藏)</p>
<p >Test-jQuery(将被绑定单击事件)</p>
<script type="text/javascript">
jQuery(function(){ //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。
 jQuery("p").click(function(){  
  alert( jQuery(this).text() );
 });
});
$("pp").style.display = 'none'; //使用prototype
</script>
</body>

2.Principe

Code source

Code source : Prendre un oeil au code source Comment faire dans

var
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,
jQuery.extend({
 noConflict: function( deep ) {
   if ( window.$ === jQuery ) {
    window.$ = _$;
   }
   if ( deep && window.jQuery === jQuery ) {
    window.jQuery = _jQuery;
   }
   return jQuery;
  }
});

Lorsque jQuery est chargé, le

actuel est obtenu via la variable _jQuery déclarée à l'avance, et le window.jQuery actuel est obtenu via _ $. window.$

Montez noConflict sur jQuery via

. Alors quand on l'appelle, on l'ajuste toujours comme ça jQuery.extend(). jQuery.noConflict()

a rendu deux jugements en appelant

noConflict()

Le premier si, remet le contrôle de $.

Le second if remet le contrôle de jQuery lorsque

passe les paramètres. noConflict()

Enfin

renvoie l'objet jQuery, quel paramètre est utilisé pour le recevoir et quel paramètre aura le contrôle jQuery. noConflict()

2. Vérification

//冲突 
 var $ = 123; //假设其他库中$为123
 $(
   function () {
    console.log($); //报错Uncaught TypeError: $ is not a function
   }
 );

Résoudre les conflits

//解决冲突
 var jq = $.noConflict();
 var $ = 123;
 jq(function () {
  alert($); //123
 });

Exemple de contrôle $

<script>
 var $ = 123; // window.$是123，存储在私有的_$上。
</script>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<body>
<p>aaa</p>
<script>
 var jq = $.noConflict();//当window.$===jQuery的时候，把_$赋给了window.$。
 jq(function () {
  alert($); //123
 });
</script>

Libérer jQuery exemple de contrôle

Le rôle du paramètre deep : deep est utilisé pour abandonner l'interface externe de jQuery.

est le suivant,

n'écrit pas de paramètres et jQuery apparaît en tant que noConflict() constructeur .

<script>
 var $ = 123;
 var jQuery=456;
</script>
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<body>
<p>aaa</p>
<script>
 var jq = $.noConflict();
 jq(function () {
  alert(jQuery); //构造函数
 });
</script>

如果写个参数true，会弹出456。

<script>
 var $ = 123;
 var jQuery=456;
</script>
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<body>
<p>aaa</p>
<script>
 var jq = $.noConflict(true); //写了true或者参数的时候，deep为真window.jQuery===jQuery为真，所以进入if条件。把456赋值给window.jQuery
 jq(function () {
  alert(jQuery); //456
 });
</script>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Articles Liés

Voir plus