window.onload多个共存 - 借鉴jQuery.noConflict的思路

最新推荐文章于 2022-11-15 19:21:09 发布

weixin_30879169

最新推荐文章于 2022-11-15 19:21:09 发布

阅读量88

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/walls/p/6279555.html

本文探讨了window.onload方法在存在多个定义时的问题，并提出了一个解决方案。同时，深入解析了jQuery.noConflict方法的工作原理，包括如何缓存和释放对$和jQuery的控制权。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、背景

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

转载于:https://www.cnblogs.com/walls/p/6279555.html