一、背景

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的思路的更多相关文章

  1. 转载 jquery $(document).ready() 与window.onload的区别

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 windo ...

  2. [转]jquery $(document).ready() 与window.onload的区别

    http://blog.csdn.net/xiebaochun/article/details/36375481 Jquery中$(document).ready()的作用类似于传统JavaScrip ...

  3. [Javascript]jquery $(document).ready() 与window.onload的区别

    引用:http://www.jb51.net/article/21628.htm Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload ...

  4. 转载jquery $(document).ready() 与window.onload的区别

    jquery $(document).ready() 与window.onload的区别 投稿:mdxy-dxy 字体:[增加 减小] 类型:转载 时间:2009-12-28我要评论 Jquery中$ ...

  5. jquery 的ready() 与window.onload()的区别

    做web开发时常用Jquery中$(document).ready()和JavaScript中的window.onload方法,两者都是要在页面加载完成以后加载的方法,但是这两者还是有很大区别的.最近 ...

  6. 【jquery】$(document).ready() 与window.onload的区别

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1)执行时间  wind ...

  7. 谈谈document.ready和window.onload的区别

    在Jquery里面,我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){}) 这两个方法的效果都是一样的,都是在dom文档树加载完之后执行 ...

  8. $(document).ready()即$()方法和window.onload方法的比较

    以浏览器装载文档为例,我们都知道在页面完毕后,浏览器会通过JavaScript为DOM元素添加事件.在常规的JavaScript代码中,通常使用window.onload方法,而在jQuery中,使用 ...

  9. window.onload 与 $(document).ready() 的区别

    以浏览器装载文档为例,在页面加载完毕后,浏览器会通过 JavaScript 为 DOM 元素添加事件.在常规的 JavaScript 代码中,通常使用 window.onload 方法 ,而在 jQu ...

随机推荐

  1. 分区表在安装系统(MBR)丢失或损坏

    操作系统能识别出硬盘中的各个不同的分区,是靠硬盘分区表(MBR)来识别的. 硬盘分区表中记录了各个分区的位置和大小以及类型等信息,假设这个分区表破坏了,那么这块硬盘里面的分区就会丢失.系统是无法在浏览 ...

  2. 运维自动化之SALTSTACK简单入门

    运维自动化之SaltStack简单入门 饱食终日而无所事事,是颓也,废也.但看昨日,费九牛二虎之力除一BUG便流连于新番之中,不知东方之既黑,实乃颓颓然而荒废矣.故今日来缀一文以忏昨日之悔. Salt ...

  3. leetcode第九题--Palindrome Number

    Problem: Determine whether an integer is a palindrome. Do this without extra space. click to show sp ...

  4. 让png在ie下正常显示 用到了jquery插件DD_belatedPNG 但是在ie6中这句话 前面添加有效 后面移除无效 IE6 jq removeClass无效

    jQuery(this).addClass("background").siblings().removeClass("background") 导致IE6移除 ...

  5. 批处理中set截取字符具体解释

    set截取字符具体解释  在批处理中,set的功能有点繁杂:设置变量.显示环境变量的名及值.做算术运算.等待用户的输入.字符串截取.替换字符串,是我们经常使用的命令之中的一个. 在字符串截取方面,新手 ...

  6. three.js 源代码凝视(十六)Math/Frustum.js

    商域无疆 (http://blog.csdn.net/omni360/) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:商域无疆 -  本博客专注于 敏捷开发 ...

  7. Mysql高级之触发器

    原文:Mysql高级之触发器 触发器是一类特殊的事务 ,可以监视某种数据操作(insert/update/delete),并触发相关操作(insert/update/delete). 看以下事件: 完 ...

  8. Java(5/6和8)中interface和Abstract Class

    这篇文章主要是自己在使用java的过程中对自己一些之前常困惑的问题的一些总结. 正如题目所言,这篇博客主要是讨论java中的接口与抽象类的区别,有自己的使用心得,以及自己平时在使用的过程中遇到的问题及 ...

  9. ASP.NET MVC显示WebForm网页或UserControl控件

    ASP.NET MVC显示WebForm网页或UserControl控件 学习与使用ASP.NET MVC这样久,还是对asp.net念念不忘.能否在asp.net mvc去显示aspx或是user ...

  10. 企业架构与建模之使用ArchiMate进行分析

    企业架构与建模之使用ArchiMate进行分析(全系列完) 4. 使用ArchiMate进行分析 正如前面所说的那样,一个企业整体效率的提升有时并不是通过某一个领域内的优化就能达到的,而且这种忽视全局 ...