首页 > 代码库 > window.onload多个共存 - 借鉴jQuery.noConflict的思路
window.onload多个共存 - 借鉴jQuery.noConflict的思路
一、背景
?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覆盖了!
?所以,这个思路虽好,但是也别遇到猪队友 =_=!
window.onload多个共存 - 借鉴jQuery.noConflict的思路
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。