Heim > Artikel > Web-Frontend > Was tun bei jQuery-Bibliothekskonflikten?

Was tun bei jQuery-Bibliothekskonflikten?

小云云Original: 2018-01-11 14:08:401437Durchsuche

Bei der Entwicklung mit jQuery können Sie auch andere JS-Bibliotheken verwenden, z. B. Prototype. Bei der Koexistenz mehrerer Bibliotheken können jedoch Konflikte auftreten. Dieser Artikel stellt Ihnen hauptsächlich die perfekte Lösung für jQuery-Bibliothekskonflikte vor Werfen wir einen Blick darauf.

Meine Idee ist, dass ich, wenn ich zum Entwerfen aufgefordert würde, den Standardwert $ verwenden würde, und wenn ich keine Parameter übergebe, würde ich $ verwenden und es schließlich im Fenster mounten.$, und übergebe den Namen, z. B. jq, dann mounte ich ihn auf window.jq.

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

Tatsächlich ist dies definitiv nicht die Art und Weise, wie Jquery Konflikte löst. Dann schauen Sie sich an, wie jQuery Konflikte löst.

Mehrere Versionen von jQuery oder Konflikte mit anderen js-Bibliotheken sind hauptsächlich Konflikte mit dem häufig verwendeten $-Symbol.

1. Konfliktlösung

So lösen Sie Konflikte zwischen mehreren Versionen von jQuery auf derselben Seite

<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 in anderen Bibliotheken Durch den späteren Import der

jQuery noConflict()-Methode wird die Kontrolle über den $-Bezeichner freigegeben, sodass andere Skripte ihn verwenden können.

1. Sie können jQuery verwenden, indem Sie die Abkürzung durch den vollständigen Namen ersetzen.

Nachdem andere Bibliotheken und die jQuery-Bibliothek geladen wurden, können Sie jederzeit die Funktion jQuery.noConflict() aufrufen Die Steuerung der Variablen $ wird an andere JavaScript-Bibliotheken übertragen. Anschließend können Sie die jQuery()-Funktion als Fertigungsfabrik für jQuery-Objekte in Ihrem Programm verwenden.

<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. Passen Sie eine Verknüpfung an

noConflict() kann einen Verweis auf jQuery zurückgeben, der zur späteren Verwendung in einem benutzerdefinierten Namen wie jq oder $J-Variablen gespeichert werden kann .

Dadurch wird sichergestellt, dass jQuery bei Verwendung einer benutzerdefinierten Verknüpfung nicht mit anderen Bibliotheken in Konflikt gerät.

<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. Wenn kein Konflikt vorliegt, verwenden Sie trotzdem $

Wenn Sie die $-Abkürzung im jQuery-Codeblock verwenden und diese Verknüpfung nicht ändern möchten, können Sie dies tun Übergeben Sie das $-Symbol als Variable. Bereiten Sie die Methode vor. Auf diese Weise können Sie das $-Symbol innerhalb der Funktion verwenden, außerhalb der Funktion müssen Sie jedoch weiterhin „jQuery“ verwenden.

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

Oder verwenden Sie IEF-Anweisungsblöcke, was die idealste Methode sein sollte, da vollständige Kompatibilität mit minimalen Codeänderungen erreicht werden kann.

Wenn wir unsere eigenen JQuery-Plug-Ins schreiben, sollten wir alle diese Schreibmethode verwenden, da wir nicht wissen, wie wir verschiedene JS-Bibliotheken während des spezifischen Arbeitsprozesses nacheinander einführen, diese Methode zum Schreiben von Anweisungsblöcken jedoch Schildkonflikte.

<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. Die jQuery-Bibliothek wird vor anderen Bibliotheken importiert.

Die jQuery-Bibliothek wird standardmäßig vor anderen Bibliotheken importiert . Dann können Sie „jQuery“ direkt verwenden, um einige jQuery-Arbeiten zu erledigen.

Gleichzeitig können Sie die Methode $() als Verknüpfung zu anderen Bibliotheken verwenden. Es ist hier nicht erforderlich, die Funktion jQuery.noConflict() aufzurufen.

<!-- 引入 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. Prinzip

1. Quellcode

Schauen Sie sich an, wie es im Quellcode geht

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

Wenn jQuery geladen wird, wird das aktuelle window.jQuery über die zuvor deklarierte Variable _jQuery und das aktuelle window.$ über _$ abgerufen.

NoConflict über jQuery.extend() in jQuery einbinden. Deshalb passen wir jQuery.noConflict() beim Aufruf immer so an.

Beim Aufruf von noConflict() wurden zwei Urteile gefällt,

Das erste if übergibt die Kontrolle über $.

Das zweite if übergibt die Kontrolle über jQuery, wenn noConflict() Parameter übergibt.

Schließlich gibt noConflict() das jQuery-Objekt zurück, welcher Parameter zum Empfang verwendet wird und welcher Parameter die jQuery-Steuerung hat.

2. Überprüfung

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

Konflikte lösen

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

Beispiel für die Freigabe von $-Steuerelementen

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

Beispiel für die Freigabe von jQuery-Steuerelementen

Die Rolle des Parameters deep: deep wird verwendet, um die externe Schnittstelle von jQuery aufzugeben.

Wie folgt: noConflict() schreibt keine Parameter und öffnet jQuery als Konstruktor.

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

Wenn Sie einen Parameter true schreiben, wird 456 angezeigt.

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

Verwandte Empfehlungen:

Verwenden Sie jquery.noConflict(), um das Problem von Konflikten zwischen der JQuery-Bibliothek und anderen Bibliotheken zu lösen

Wie schreibe ich eine js/jQuery-Bibliothek (Zusammenfassung der Erfahrungen)

Lösung für den Konflikt zwischen der jQuery-Bibliothek und anderen JS-Bibliotheken_jquery

Das obige ist der detaillierte Inhalt vonWas tun bei jQuery-Bibliothekskonflikten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery if 构造函数标识符接口 JS 对象 prototype

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：ztree implementiert die Beispielfreigabe für die horizontale Anzeigefunktion mit BerechtigungenNächster Artikel：ztree implementiert die Beispielfreigabe für die horizontale Anzeigefunktion mit Berechtigungen

In Verbindung stehende Artikel

Mehr sehen