IT工程師數位筆記本

一、背景

 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