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.$;
在jQuery库想获得变量$的控制权之前,需要假设之前已经有其他库使用了变量$。
那么,就必须先把$引用存起来,以备后续判断是否可以获得控制权。
- 根据需要,判定是否交出变量$的控制权
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
window.onload多个共存 - 借鉴jQuery.noConflict的思路的更多相关文章
- 转载 jquery $(document).ready() 与window.onload的区别
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 windo ...
- [转]jquery $(document).ready() 与window.onload的区别
http://blog.csdn.net/xiebaochun/article/details/36375481 Jquery中$(document).ready()的作用类似于传统JavaScrip ...
- [Javascript]jquery $(document).ready() 与window.onload的区别
引用:http://www.jb51.net/article/21628.htm Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload ...
- 转载jquery $(document).ready() 与window.onload的区别
jquery $(document).ready() 与window.onload的区别 投稿:mdxy-dxy 字体:[增加 减小] 类型:转载 时间:2009-12-28我要评论 Jquery中$ ...
- jquery 的ready() 与window.onload()的区别
做web开发时常用Jquery中$(document).ready()和JavaScript中的window.onload方法,两者都是要在页面加载完成以后加载的方法,但是这两者还是有很大区别的.最近 ...
- 【jquery】$(document).ready() 与window.onload的区别
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1)执行时间 wind ...
- 谈谈document.ready和window.onload的区别
在Jquery里面,我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){}) 这两个方法的效果都是一样的,都是在dom文档树加载完之后执行 ...
- $(document).ready()即$()方法和window.onload方法的比较
以浏览器装载文档为例,我们都知道在页面完毕后,浏览器会通过JavaScript为DOM元素添加事件.在常规的JavaScript代码中,通常使用window.onload方法,而在jQuery中,使用 ...
- window.onload 与 $(document).ready() 的区别
以浏览器装载文档为例,在页面加载完毕后,浏览器会通过 JavaScript 为 DOM 元素添加事件.在常规的 JavaScript 代码中,通常使用 window.onload 方法 ,而在 jQu ...
随机推荐
- 快速构建Windows 8风格应用36-商店应用发布流程
原文:快速构建Windows 8风格应用36-商店应用发布流程 引言 在发布应用之前,我们需要注册开发者账号才能够发布应用.我们可以登录https://appdev.microsoft.com/Sto ...
- ASP.NET DataTable的操作大全
DataTable表示一个与内存有关的数据表,可以使用工具栏里面的控件拖放来创建和使用,也可以在编写程序过程中根据需要独立创建和使用,最常见的情况是作为DataSet的成员使用,在这种情况下就需要用在 ...
- bootstrap-paginator 分页插件笔记
[MVC]bootstrap-paginator 分页插件笔记 bootstrap-paginator基于bootstrap框架,使用起来非常简单.官网:http://harttle.github ...
- 六白话经典算法系列 高速分拣 高速GET
高速分拣,因为相同的排序效率O(N*logN)几个订购流程更高效,因此,经常使用,再加上高速分拣思想----分而治之的方法也是非常有用的,如此多的软件公司书面采访.它包含了腾讯,微软等知名IT企业宁 ...
- 【工作笔记二】ASP.NET MVC框架下使用MVVM模式
ASP.NET MVC框架下使用MVVM模式 原文:http://www.cnblogs.com/n-pei/archive/2011/07/21/2113022.html 对于asp.net mvc ...
- dbcp的配置
tomcat的 配置,进入conf->context.xml <Resource name="mysql" auth="Container" ...
- Web缓存(Varnish方案)
Web缓存(Varnish方案) 转载 http://www.s135.com/post/313/ arnish是一款高性能的开源HTTP加速器,挪威最大的在线报纸 Verdens Gang (htt ...
- 一个快速找第k+1小的算法
public static int randomSelect(int[] A, int k) { return randomSelectDo(A, 0, A.L ...
- c#中解决winform中控件不能输入汉字的办法
设置控件的ImeMode属性 如: textBox.ImeMode = System.Windows.Forms.ImeMode.On; 其中枚举有如下值:
- 程序媛也话Android 之 自定义控件(垂直方向滑动条)
Android里已经有足够多的控件供开发者使用,但有时候我们还是会想要一些不一样的东西,比如一些UI特效,比如一些3D动画,今天就讲讲比较basic的东西:自定义控件. 1.效果图 如果项目里需要一个 ...