一、背景
window.onload方法只能存在一个,如果多次赋值给window.onload,则后者会覆盖前者。
二、浅谈jQuery.noConflict的实现方式
1)源代码
// 简化抽离出来源码
(function( window, undefined ) {
var _jQuery = window.jQuery,
_$ = window.$;
jQuery.extend({
noConflict: function( deep ) {
if ( window.$ === jQuery ) {
window.$ = _$;
}
if ( deep && window.jQuery === jQuery ) {
window.jQuery = _jQuery;
}
return jQuery;
}
);
window.jQuery = window.$ = jQuery;
})(window);
2)解析
-
缓存已有的引用
var _jQuery = window.jQuery, _$ = window.$;
那么,就必须先把$引用存起来,以备后续判断是否可以获得控制权。
-
根据需要,判定是否交出变量$的控制权
if ( window.$ === jQuery ) { window.$ = _$; }
如果当前变量$已由jQuery库控制,则交出控制权。还给jQuery库载入之前,变量$的拥有者。
-
彻底交出变量jQuery的使用权
if ( deep && window.jQuery === jQuery ) { window.jQuery = _jQuery; }
代码的含义:
如果当前变量jQuery由jQuery库控制,并且是深度还原(deep),则交出jQuery的控制权。将变量jQuery的使用权交还给jQuery载入之前的使用者。
三、window.onload借鉴这种“引用缓存机制”来实现多个并存
(function(window, undefined){ var old_onload = window.onload; // 缓存旧的onload方法 // 定义新的onload window.onload = function{ console.log("wall"); // 很多代码.... typeof old_onload == "function" && old_onload; // 执行旧的onload方法 }; })(window);
perfect!
四、号外
吐槽下:因为公司的产品,可以让高级用户自主添加代码。一些用户申请的工商认证代码,就带有window.onload方法。
然而,这种公用性居然没有一点包容原则,直接就把onload覆盖了!
所以,这个思路虽好,但是也别遇到猪队友 =_=!
---
原文入口:www.jianshu.com/p/5237512add46
本文为头条号作者发布,不代表今日头条立场。