jquery之重寫（擴展）$.ajax和$.fn.load方法詳解

一、前提知識
往下翻頁之前，有必要了解以下知識：

1. (function($){….})(jQuery)

        第一個括號裏邊的function($){….}實際上就是一個匿名函數，它的形參是$，這很奇怪，其實這裏主要是爲了不與其它的庫衝突。我們在調用函數的時候，通常都是函數名後邊加上括號以及實參，但是由於操作符的優先級我們定義的匿名函數也需要用（）括起來，所以就有了前面的(function($){....})。

       現在這句代碼什麼意思大家應該很清楚了：第一個括號表示定義了一個匿名函數，然後(jQuery)表示爲該函數傳遞的參數，整個結合起來意思就是，定義了一個匿名函數，然後又調用該函數，並傳遞實參jQuery，相當於——function fun($){…};fun(jQuery);

       這種方法多用於存放開發的插件，執行其中的代碼時，Dom對象並不一定加載完畢。於此相反的是$(function(){})，這種方法在使用時頁面的Dom對象已經加載完畢了。事實上該方法的全寫是：$(document).ready(function(){});

2.$.fn.extend和$.extend

jQuery爲開發插件提拱了兩個方法，分別是：

jQuery.fn.extend(object);//爲jQuery的實例對象添加方法

jQuery.extend(object);//爲jQuery類本身擴展，添加新的方法或覆蓋原有的方法

（1）$.fn.extend 
在jQuery中有如下源碼：

jQuery.fn = jQuery.prototype = {
　　　init: function( selector, context ) {//....　
　　　//......
};

 

由此看來jQuery.fn=jQuery.prototype，然而prototype是什麼呢？

        在 JavaScript 中，每個函數對象都有一個默認的屬性 prototype，稱爲函數對象的原型成員，這個屬性指向一個對象，稱爲函數的原型對象，當我們每定義了一個函數的時候，JavaScript 就創建了一個對應的原型對象，也就是說，當我們定義一個函數的時候，實際上得到了兩個對象，一個函數對象，一個原型對象。原型對象是一個特殊的對象，函數的 prototype 成員指向它的原型對象，可以通過函數對象的 prototype 成員取得這個原型對象的引用。

        所以fn表示的就是原型對象，而extend表示擴展，所以$.fn.extend表示的是爲原型對象擴展方法，使用此方式擴展的方法只能用對象去調用，example：

$.fn.extend({
	test:function(){
		alert("test");
	}
});
 
$("#id").test();

（2）$.extend

此方式則表示爲jQuery類添加類方法（雖然jQuery沒有類的概念，但用類來理解似乎簡單了不少），或者直接理解爲添加靜態方法，然後就可以直接用$在其他地方來調用此擴展方法了，example：

$.extend({
	test:function(param){
		alert(param);
	}
});
$.test(1);//則直接彈出1

二、重寫方法

1.重寫$.ajax方法

 

 

(function($){
    //首先備份下jquery的ajax方法
    var_ajax=$.ajax;
     
    //重寫jquery的ajax方法
    $.ajax=function(opt){
        //備份opt中error和success方法
        var fn = {
            error:function(XMLHttpRequest, textStatus, errorThrown){},
            success:function(data, textStatus){}
        }
        if(opt.error){
            fn.error=opt.error;
        }
        if(opt.success){
            fn.success=opt.success;
        }
         
        //擴展增強處理
        var_opt = $.extend(opt,{
            error:function(XMLHttpRequest, textStatus, errorThrown){
                //錯誤方法增強處理
                fn.error(XMLHttpRequest, textStatus, errorThrown);
            },
            success:function(data, textStatus){
                //成功回調方法增強處理
                fn.success(data, textStatus);
            },
            beforeSend:function(XHR){
                //提交前回調方法
                $('body').append("<div id='ajaxInfo' style=''>正在加載,請稍後...</div>");
            },
            complete:function(XHR, TS){
                //請求完成後回調函數 (請求成功或失敗之後均調用)。
                $("#ajaxInfo").remove();;
            }
        });
        return _ajax(_opt);
    };
})(jQuery);

 2.重寫$.load方法

//同樣先備份下jquery的load方法
var _load=$.fn.load;
$.fn.extend({
    load:function(url,param,calbck){
        //其他操作和處理
	//..
	//此處用apply方法調用原來的load方法，因爲load方法屬於對象，所以不可直接對象._load（...）	
	return _load.apply(this,[url,param,calbck]);
    }
});

轉自

https://blog.csdn.net/qq_16313365/article/details/51078252