jquery源碼中noConflict(防止$和jQuery的命名沖突)的實現(xiàn)原理

最近在看jquery源碼分析的視頻教學，希望將視頻中學到的知識用博客記錄下來，更希望對有同樣對jquery源碼有困惑的童鞋能有一點點的幫助（我是從一個小白的角度出發(fā)，感覺挺容易理解的，順帶說下視頻中jquery源碼選取的是2.0.3版本）。

?

我們都知道，使用$和jQuery效果是一樣的，比如:

1 <button id="btn">點我</button> 2 $("#btn").click(function(e) { 3 console.info(e.type); 4 }); 5 jQuery("#btn").click(function(e) { 6 console.info(e.type); 7 });

為什么是這樣子呢？因為jquery源碼中是包在一個立即調(diào)用的函數(shù)表達式中（一個閉包），對外暴露的接口就是$和jQuery,將這兩個屬性綁定在window下：

1 window.jQuery = window.$ = jQuery;

因為別的庫也用$或者jQuery符號，比如prototype.js，所以同時引prototype和jquery就有可能造成命名沖突，jquery解決命名沖突問題的代碼如下：

1 (function(window, undefined) 2 3 4 var 5 // Map over jQuery in case of overwrite 6 _jQuery = window.jQuery, 7 8 // Map over the $ in case of overwrite 9 _$ = window.$; 10 11 jQuery.noConflict = function( deep ) { 12 if ( window.$ === jQuery ) { 13 window.$ = _$; 14 } 15 16 if ( deep && window.jQuery === jQuery ) { 17 window.jQuery = _jQuery; 18 } 19 20 return jQuery; 21 }; 22 })(window);

noConflict是jquery通過extend擴展的工具方法（靜態(tài)方法），與ajax方法一樣，調(diào)用方法為$.noConflict()或者jQuery.noConflict()，不帶參數(shù)是對$的處理，帶參數(shù)true時是對jQuery的處理，這個函數(shù)返回值就是jQuery對象。jquery源碼中用_jQuery和_$來保存全局中jQuery和$的值，因為jquery對外接口的時候?qū)?和jQuery全部掛在window上，window.$和jQuery始終是相等的，都等于jquery源碼中的jQuery對象，所以jquery會放棄對$的使用（我不用$了，你們用吧）,將_$中保存的值賦給window.$；如果加一個參數(shù)true的時候，jquery會放棄jQueryde的使用，將_jQuery中保存的值賦給window.jQuery（2種情況都會返回jQuery對象，我們還是可以用繼續(xù)用$來用別的庫的方法，并且用另外的變量來保存返回的jQuery對象來使用jquery的方法。

1 <script> 2 var $ = { 3 sayName: function() { 4 console.info('我是prototype中的$'); 5 } 6 }; 7 </script> 8 <script src="jquery.2.0.3.js"></script> 9 <script> 10 var iAmRealJQ = $.noConflict(); 11 $.sayName(); // 我們還可以使用自定的$對象的方法 12 console.info(iAmRealJQ); // 我們還可以用jquery源碼的jQuery對象來實例化一個新對象 --> 13 </script> 1 <script> 2 var jQuery = { 3 sayName: function() { 4 console.info('我是某個庫中的jQuery'); 5 } 6 }; 7 </script> 8 <script src="jquery.2.0.3.js"></script> 9 <script> 10 var iAmRealJQ = jQuery.noConflict(true); 11 jQuery.sayName(); // 我們還可以使用自定的jQuery對象的方法 12 console.info(iAmRealJQ); // 我們還可以用jquery源碼的jQuery對象來實例化一個新對象 13 </script>

?

轉(zhuǎn)載于:https://www.cnblogs.com/hanshuai/p/6766202.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的jquery源码中noConflict(防止$和jQuery的命名冲突)的实现原理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。