首页 > 代码库 > 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.$;
      在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覆盖了!
      ?所以,这个思路虽好,但是也别遇到猪队友 =_=!

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