jQuery源碼研究——解決命名沖突 - pssp－IT工程師數位筆記本

文章出處

在項目中難免不去使用多個插件，如此一來這些插件就有可能出現一樣的名稱，當出現同名變量時后一個將會覆蓋上一個，這樣的話我們就無法同時使用多個插件了。

當遇到這種情況我們可以手動去修改插件源碼把它的名字改了，但這種方式是不明智的，假如說你使用的某個插件它的版本更新了，那么你還得再次去修改它的源碼，再則隨意去修改插件源碼對團隊來說是混亂不堪的，因此最好的方式應該是由插件自身來解決命名沖突，在jQuery中有一個noConflict方法，這個方法就是用來解決命名沖突的。

jQuery.noConflict

var _jQuery = window.jQuery,
    _$ = window.$;
jQuery.noConflict = function( deep ) {
    if ( window.$ === jQuery ) {
        window.$ = _$;
    }
    if ( deep && window.jQuery === jQuery ) {
        window.jQuery = _jQuery;
    }
    return jQuery;
};
if ( !noGlobal ) {
    window.jQuery = window.$ = jQuery;
}
return jQuery;

代碼中的window是全局的，jQuery是局部的，window.jQuery把全局中的jQuery保存下來，window.$的作用同上，將全局中的jQuery和$保存下來是為了當我們使用jQuery.noConflict方法時好將$和jQuery還原成之前的，因為在沒有使用jQuery.noConflict方法前，全局的$和jQuery已經被咱們強大的jQuery給覆蓋了，因此如果你不使用jQuery.noConflict方法將無法使用之前的那個插件，那么當我們使用jQuery.noConflict方法后jQuery不就被其他插件給覆蓋了嗎，插件確實會把jQuery給覆蓋，不過在jQuery.noConflict方法中，它最后又將jQuery返回了，因此我們只需要將這個返回的jQuery取一個新的名字就好了。

因此我們可以看出jQuery在解決命名沖突上它是先將插件保存下來，然后使用自己的jQuery將插件覆蓋，當調用jQuery.noConflict方法時再將插件放出并將自己返回。

需要注意的是此方法只能解決在jQuery之前導入的插件，因為如果在jQuery之后導入，那么jQuery就已經被覆蓋了，自然也就無法使用noConflict方法。

在解決命名沖突方面，當jQuery檢查到我們有使用CommonJS時，$和jQuery將不會暴露到window中，具體代碼就是下面這句了

if ( !noGlobal ) {
    window.jQuery = window.$ = jQuery;
}

這個noGlobal是從這里傳過去的

( function( global, factory ) {
    "use strict";
    // 判斷是否有使用CommonJS
    if ( typeof module === "object" && typeof module.exports === "object" ) {
        module.exports = global.document ?
            // true：不在window上暴露$和jQuery，因此使用CommonJS后你將無法在全局調用jQuery
            factory( global, true ) :
            function( w ) {
                if ( !w.document ) {
                    throw new Error( "jQuery requires a window with a document" );
                }
                return factory( w );
            };
    } else {
        factory( global );
    }
} )( typeof window !== "undefined" ? window : this, function( window, noGlobal ){
  // 省略
});

jQuery.noConflict注釋版

var
    // 將全局jQuery保存起來
    _jQuery = window.jQuery,
    // 將全局$保存起來
    _$ = window.$;
    // 解決命名沖突 當傳遞一個true值則會將$和jQuery命名權限都交出
jQuery.noConflict = function( deep ) {
    // 如果現在使用的是jQuery則將$權限交出，給其他插件使用
    if ( window.$ === jQuery ) {
        window.$ = _$;
    }
    // 如果deep為true并且使用的是jQuery則將jQuery命名權限交出，給其他插件使用
    if ( deep && window.jQuery === jQuery ) {
        window.jQuery = _jQuery;
    }
    // 返回jQuery，我們可以去重新命名
    return jQuery;
};

// 暴露jQuery和$標識符
// 關于在全局暴露jQuery的相關討論：https://github.com/jquery/jquery/pull/557
if ( !noGlobal ) {
    window.jQuery = window.$ = jQuery;
}
return jQuery;
} );