jquery之重写(扩展)$.ajax和$.fn.load方法详解_js 重写函数用$-程序员宅基地

技术标签: $.fn.load  js  重写  $.ajax  jquery  

一、前提知识
往下翻页之前,有必要了解以下知识:

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

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u012949335/article/details/97297701

智能推荐

C3P0和Druid数据库连接池的简单使用;几种设计模式简介;简略介绍自定义数据库连接池注意点_c3p0连接池用的设计模式-程序员宅基地

文章浏览阅读577次。数据库连接池负责分配、管理和释放数据库连接;它允许应用程序重复使用一个连接,而不是新建连接,提高了程序的效率;由于新建数据库连接也是要耗费性能和时间的,当访问量十分巨大的时候,对程序性能的影响就极为显著,为了解决这个问题出现了数据库连接池的技术;C3P0连接池使用步骤1、导入jar包;2、导入配置文件到src目录下;(配置文件会自动导入,但是名字必须是c3p0-config.xml或者c3p0-config-properties)3、创建C3P0连接池对象;4、获取连接;5、使用连接;_c3p0连接池用的设计模式

vue修改config后怎么生效_vue.config.js 配置无效?-程序员宅基地

文章浏览阅读6.2k次。vue.config.js 位于根目录下使用vue-cli3构建的项目constpath=require("path");functionresolve(dir){returnpath.join(__dirname,dir);}module.exports={lintOnSave:true,//生产环境是否生成sourceMap文件producti..._vue.config.js 生效

SpringBoot 系列教程(三十):SpringBoot整合Mybatis增删改查注解版_springboot mybatis 使用查锁-程序员宅基地

文章浏览阅读2.9k次。源码:https://github.com/Thinkingcao/SpringBootLearning/tree/master/springboot-mybatis本文主要讲解如何使用SpringBoot整合Mybatis,并访问数据库。由于Mybatis这个框架太过于流行,所以这里不过多涉及Mybatis的知识。一、创建SpringBoot项目,引入配置信息0、项目结构1..._springboot mybatis 使用查锁

bzoj1047【haoi2007】理想正方形-程序员宅基地

文章浏览阅读832次。单调队列

linux addr2line 定位ASan Dump信息-程序员宅基地

文章浏览阅读1k次,点赞25次,收藏19次。解决linux user层代码出现crash定位大难题_linux addr2line 定位asan dump信息

关于interface接口的使用与理解-程序员宅基地

文章浏览阅读4.1k次,点赞2次,收藏21次。1、什么是interface接口?首先,接口是与类平行的结构,两者都是独立的一个结构,都有自己的定义与规则,接口不属于类2、如何定义interface接口?定义接口中的成员:在jdk7以前只能定义全局常量(使用public static final修饰的变量,通常可以省略不写)与抽象方法(类似于方法,但是没有方法体,使用public abstract修饰变量名)。注意在接口中不能定义构造器!意味着接口不可以被实例化new出对象。3、如何使用interface?只要编写了接口,意_interface接口

随便推点

ssh远程登陆执行命令:未找到命令_sshpass命令找不到-程序员宅基地

文章浏览阅读5.1k次。ssh远程登陆执行命令:未找到命令_sshpass命令找不到

浅谈Linux的locale,LC_ALL和LANG_lc——time-程序员宅基地

文章浏览阅读4.4k次。如果你是一个Linux新手,并且刚刚安装了一个新的英文系统但想要设置成中文系统,肯定会接触到上面几个变量,在网上搜索了一系列解决方法,给一些变量赋一下值,再export一下,或者写到配置文件里面,然后就搞定了,但究竟为什么要这样做,可能还是一知半解。通过这两天自己对网上看到的一些文章的整理和自己的试验,在这里记录一下自己的理解。一、什么是localelocale这个单词中文翻译成地_lc——time

Vue实现前端本地打包为一个zip文件_vant打包完项目,再次打包文件夹内容为zip-程序员宅基地

文章浏览阅读989次。1、应用场景:打包下载的批量二维码图片2、实际后端返回数据格式:图片联机数组集合,每个图片链接打开都是一张二维码图片3、代码实现如下:元素代码<el-button type="primary" icon="el-icon-download" size="mini" @click="downloadCode"> 下载二维码</el-button>js代码第一步安装依赖包_vant打包完项目,再次打包文件夹内容为zip

Java面向对象1----类与对象的定义和使用_java类和对象的定义和使用答案头歌-程序员宅基地

文章浏览阅读821次。介绍面型对象的概念,以及Java中类的定义和使用方法_java类和对象的定义和使用答案头歌

Java 搭建一个可交互的窗体程序_java窗体程序的主程序-程序员宅基地

文章浏览阅读2k次。简单地显示一个窗口所需的最少代码import javax.swing.JFrame;public class main { static class Win extends JFrame{//static不能少 Win() { setVisible(true);//setv } } public static void main(String[] args) { // TODO new Win(); }}报错:No enclosing instan_java窗体程序的主程序

Anti ptrace:去掉AlipayWallet的ptrace 反调试保护,进行lldb调试---仅用于参考学习-程序员宅基地

文章浏览阅读1.8k次。新的博客学习笔记前言code软件环境:Xcode硬件环境:iPhone5越狱手机、Mac开发工具: Cycript、LLDB、logos Tweak、hopper、MonkeyDev、AFLEXLoader、dumpdecrypted、debugserver、ssh、class_dump、hook本文采用tweak 的方式进行M..._lldb 绕过ptrace反调试

推荐文章

热门文章

相关标签