집 > 기사 > 웹 프론트엔드 > 영향을 미칠 때 jQuery 라이브러리를 사용하는 방법에 대한 자세한 설명

영향을 미칠 때 jQuery 라이브러리를 사용하는 방법에 대한 자세한 설명

php中世界最好的语言원래의: 2018-04-23 11:25:451362검색

이번에는 Impacting 시 jQuery 라이브러리 사용에 대해 자세히 설명하겠습니다. jQuery 라이브러리 사용 시 주의 사항은 무엇입니까?

머리말

인터뷰 중 면접관이 jQuery와 다른 라이브러리 간의 충돌을 해결하는 방법을 물었습니다. 전에 본 적이 있지만 더 이상 기억이 나지 않습니다.

제 생각은 디자인을 요청받으면 기본값인 $를 사용하고, 매개변수를 전달하지 않으면 $를 사용한다는 것입니다. 마지막으로 window.$에 마운트하겠습니다. 를 입력하고 매개변수만 전달하면 됩니다. jq와 같은 이름을 전달하면 window.jq에 마운트됩니다. window.$上，传参数就用传入名字，比如传入jq，那我就挂载在window.jq上。

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

事实上这肯定不是jquery解决冲突的办法了。那就看看jQuery怎么解决冲突吧。

jQuery多个版本或和其他js库冲突主要是常用的$符号的冲突。

一、冲突的解决

1、同一页面jQuery多个版本冲突解决方法

<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、jQuery库在其他库之后导入

jQuery noConflict() 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用它了。

1、可以通过jQuery全名替代简写的方式来使用 jQuery

在其他库和jQuery库都加载完毕后，可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权移交给其他JavaSript库。然后就可以在程序里将jQuery()函数作为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、自定义一个快捷方式

noConflict() 可返回对 jQuery 的引用，可以把它存入自定义名称，例如jq,$J变量，以供稍后使用。

这样可以确保jQuery不会与其他库冲突，同时又使用自定义一个快捷方式。

<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、在不冲突的情况下仍然用$

如果想在jQuery 代码块使用 $ 简写，不愿意改变这个快捷方式，可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了，而在函数外，依旧不得不使用 "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>

或者使用IEF语句块，这应该是最理想的方式，因为可以通过改变最少的代码来实现全面的兼容性。

在我们自己写jquery插件时,应该都使用这种写法，因为我们不知道具体工作过程中是如何顺序引入各种js库的,而这种语句块的写法却能屏蔽冲突。

<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、jQuery库在其他库之前导入

jQuery库在其他库之前导入，$的归属权默认归后面的JavaScript库所有。那么可以直接使用"jQuery"来做一些jQuery的工作。

同时，可以使用$()方法作为其他库的快捷方式。这里无须调用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>

二、原理

1、源码

源码：看一下源码里怎么做到的

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

在jQuery加载的时候，通过事先声明的_jQuery变量获取到当前window.jQuery，通过_$获取到当前window.$。

通过jQuery.extend()把noConflict挂载到jQuery下面。所以我们在调用的时候都是jQuery.noConflict()这样调。

在调用noConflict()时做了2个判断，

第一个if，把$的控制权交出去。

第二个if，在noConflict()传参的时候把，jQuery的控制权交出去。

最后noConflict()返回jQuery对象，用哪个参数接收，哪个参数将拥有jQuery的控制权。

2、验证

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

解决冲突

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

释放$控制权例子

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

释放jQuery控制权例子

参数deep的作用：deep用来放弃jQuery对外的接口。

如下，noConflict()

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

사실 이는 충돌을 해결하는 jquery의 방식이 아닙니다. 그런 다음 jQuery가 충돌을 해결하는 방법을 살펴보세요. jQuery의 여러 버전이나 다른 js 라이브러리와의 충돌은 주로 일반적으로 사용되는 $ 기호와 충돌합니다. 🎜🎜1. 충돌 해결🎜🎜🎜1. 동일한 페이지에 있는 여러 버전의 jQuery에 대한 충돌 해결 방법🎜🎜
<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>
🎜2, jQuery 라이브러리는 다른 라이브러리 다음에 가져옵니다. jQuery noConflect() 메서드는 다른 스크립트에서 사용할 수 있도록 $ 식별자에 대한 제어를 해제합니다. 🎜🎜1. 약어를 전체 이름으로 바꿔서 jQuery를 사용할 수 있습니다.🎜🎜다른 라이브러리와 jQuery 라이브러리가 로드된 후 언제든지 jQuery.noConstrict() 함수를 호출하여 변경할 수 있습니다. $의 Control 변수는 다른 JavaScript 라이브러리로 전송됩니다. 그런 다음 jQuery() 함수를 프로그램의 jQuery 개체에 대한 제조 공장으로 사용할 수 있습니다. 🎜rrreee🎜2. 바로가기 사용자 정의🎜🎜noConflect()는 나중에 사용하기 위해 jq, $J 변수와 같은 사용자 정의 이름에 저장할 수 있는 jQuery에 대한 참조를 반환할 수 있습니다. 🎜🎜이렇게 하면 사용자 정의된 단축키를 사용하는 동안 jQuery가 다른 라이브러리와 충돌하지 않게 됩니다. 🎜rrreee🎜3. 충돌이 없으면 계속 $를 사용하세요🎜🎜jQuery 코드 블록에서 $ 약어를 사용하고 이 단축키를 변경하고 싶지 않은 경우 $ 기호를 Ready 메소드에 변수로 전달할 수 있습니다. 이런 식으로 함수 내부에서는 $ 기호를 사용할 수 있지만 함수 외부에서는 여전히 "jQuery"를 사용해야 합니다. 🎜rrreee🎜 또는 최소한의 코드 변경으로 완전한 호환성을 달성할 수 있으므로 가장 이상적인 방법인 IEF 문 블록을 사용하세요. 🎜🎜자체 jquery 플러그인을 작성할 때 우리는 특정 작업 프로세스 중에 다양한 js 라이브러리를 순차적으로 도입하는 방법을 모르기 때문에 모두 이 작성 방법을 사용해야 하지만 이 명령문 블록 작성 방법은 충돌을 막을 수 있습니다. 🎜rrreee🎜3. jQuery 라이브러리는 다른 라이브러리보다 먼저 가져옵니다. 🎜🎜🎜 jQuery 라이브러리는 기본적으로 $의 소유권에 속합니다. 그런 다음 "jQuery"를 직접 사용하여 일부 jQuery 작업을 수행할 수 있습니다. 🎜🎜동시에 $() 메서드를 다른 라이브러리에 대한 바로가기로 사용할 수 있습니다. 여기서는 jQuery.noConflect() 함수를 호출할 필요가 없습니다. 🎜rrreee🎜2. 원리🎜🎜🎜1. 소스 코드🎜🎜🎜소스 코드: source code🎜rrreee🎜 jQuery가 로드되면 미리 선언한 _jQuery 변수를 통해 현재 window.jQuery를 얻고, _$를 통해 현재 window.$를 얻습니다. . 🎜🎜 jQuery.extend()를 통해 jQuery에 noConstrict를 마운트합니다. 따라서 호출할 때 항상 jQuery.noConflect()와 같이 조정합니다. 🎜🎜noConstrict()를 호출할 때 두 가지 판단을 내렸습니다. 🎜🎜첫 번째는 $의 제어권을 넘겨주는 것입니다. 🎜🎜두 번째 if는 noConflect()에 매개변수를 전달할 때 jQuery 제어권을 넘겨줍니다. 🎜🎜마지막으로 noConstrict()는 jQuery 객체를 반환하고, 이를 수신하는 데 사용되는 매개변수와 jQuery 제어 기능을 갖게 될 매개변수를 반환합니다. 🎜🎜2. 검증🎜🎜rrreee🎜충돌 해결🎜rrreee🎜Release $ 컨트롤 예시🎜rrreee🎜Release jQuery 컨트롤 예시🎜🎜deep 매개변수의 역할: deep은 jQuery의 외부 인터페이스를 포기하는 데 사용됩니다. 🎜🎜 다음과 같이 noConstrict()는 매개변수를 쓰지 않으며 jQuery가 🎜constructor🎜로 팝업됩니다. 🎜
<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中文网其它相关文章！

推荐阅读：

jQuery判断上传图片类型与大小方法详解

jquery总体架构分析与使用详解

위 내용은 영향을 미칠 때 jQuery 라이브러리를 사용하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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

성명：

이전 기사：새로운 구성 없이 jQuery를 사용하는 방법에 대한 자세한 설명다음 기사：새로운 구성 없이 jQuery를 사용하는 방법에 대한 자세한 설명