window.onload多个共存

2017-01-13 08:18:24来源:cnblogs.com作者:借鉴jQuery.noConflict的思路 - wall&人点击

一、背景

 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方法// 定义新的onloadwindow.onload = function(){    console.log("wall");    // 很多代码....    typeof old_onload == "function" && old_onload(); // 执行旧的onload方法};})(window);


    perfect!

    四、号外

     吐槽下:因为公司的产品,可以让高级用户自主添加代码。一些用户申请的工商认证代码,就带有window.onload方法。
     然而,这种公用性居然没有一点包容原则,直接就把onload覆盖了!
     所以,这个思路虽好,但是也别遇到猪队友 =_=!

    ---
    原文入口:www.jianshu.com/p/5237512add46
    

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台