jQuery源碼,想讓兩個jQuery庫並存 怎麼做?
<script src="./jquery1.11.3"></script>
<script src="./jquery3.4.1"></script>
$ = jQuery 1.11.3 ; //先引入1.11.3 版本
$ = jQuery 3.4.1 ; //然後引入3.4.1 版本
內部處理
var _jQuery = window.jQuery; jQuery1.11.3
_$ = window.$ ; jQuery1.11.3
window.jQuery = window.$ = jQuery; jQuery3.4.1
let j = $.noConflict(true);
if (window.$ === jQuery) { //如果 $ 和 jQuery 相同
window.$ = _$; jQuery1.11.3 把3.4.1版本使用$權利轉讓給了 1.11.3
現在 window.$ 就是1.11.3版本
}
if (deep && window.jQuery === jQuery) { // deep===true ;(window.jQuery3.4.1 === jQuery 3.4.1) === true
window.jQuery = _jQuery; // 1.11.3
};
return jQuery; // 最新的版本 3.4.1
$ => 外面使用 $ 代表 jQuery => 1.11.3 版本
j => 外面使用 j 代表 jQuery => 3.4.1 版本
// $('.box') 每一次執行都是創建了一個jq類的新實例(JQ對象);
// =》$(".box") !==$(".box") 兩個不同的實例,開闢了兩個堆內存;
// ===========函數的多種角色:普通函數/構造函數(類)/普通對象
// =》在控制檯輸出 jQuery.fn 可以查看原型上的方法,這些方法都可以被實例調用 (此時把jquery看作一個類);
// =》但jq也是一個普通對象,在普通對象上也有很多方法,
// 這些方法和實例沒有直接的關係,基於$.xxx()調用,例如:$.Callbacks() 或者 $.ajax() 等 ;
// dir($) jQuery函數、對象
// dir($.fn) jQuery 類
let $box = $('.box');
$('.box').click(() => {}); // 開闢了3個實例 消耗性能
$('.box').fadeIn(() => {});
$('.box').addClass(() => {});
/* */
$box.click(() => {}); // 只開闢了一個實例
$box.fadeIn(() => {});
$box.addClass(() => {});