jquery里$.proxy的含义及使用方法推荐 原创 收藏


  • :
  • 06-23 19:18
  • :
  • 6次
  • :
  • 0条
  • 0赞

简介本文通过实例来讲解jquery里$.proxy的含义及使用方法,通过本文能让你快速掌握jquery里$.proxy的使用。

站长最近在做一个web项目时,用到了jquery里的$.proxy,为了强化记忆,也为了以后自己再次使用时方便,就把jquery里和$.proxy的相关信息整理了一下,希望能帮助到自己的同时,也能帮助到所有看到这篇文章的朋友们!

官方对$.proxy的解释:

$.proxy返回一个新函数,并且这个函数始终保持了特定的作用域。

当有事件处理函数要附加到元素上,但他们的作用域实际是指向另一个对象时,这个方法最有用了。此外,最妙的是,jQuery能够确保即便你绑定的函数是经过jQuery.proxy()处理过的函数,你依然可以传递原先的函数来准确无误地取消绑定。

自己的理解:

$.proxy和js里的call 或apply一样,都是用来改变某一个函数的this的指向。

下面通过实例来了解$.proxy的使用方法:

1.在对象里为元素绑定事件时:

//站长在做一个form表单验证时,参考了bootstrapvalid这个插件,里面用到了$.proxy
//大多js或jquery插件的代码都是写在对象里的,如:
var validator={
message:"内容不正确",
_init:function(){
    //为要验证的表单添加事件
    var $element=$("input[type='text']");
    $element.on("focus",$.proxy(this._test,this,$element));//第三个参数是要传给_test函数的值
},
_test:function($element){
    //这个函数里就可以对表单进行验证判断
    var v=$element.val();
    //这里省略了对值验证判断的具体过程
    if(v){
        //如果正确 就调用对象里的_success函数
        this._success($element);
    }else{
        //不正确就调用_wrong函数
        this._wrong($element);
    }
}
}

2.在使用setTimeout延时时:

站长在做web项目时,需要让一段ajax代码延时显示出来,如果只是单单的显示ajax的结果,那么没必要使用$.proxy,但如果在ajax完成后,还要再做进一步的操作,那么就需要用到了。

比如站长要做的是,点击链接后,等待半秒后显示内容,然后再根据你点的链接来判断是否加载同名的js文件:

options.success=function(d){
    setTimeout($.proxy(function(){
        $(options.target).html(d);
        if(Boolean(options.js)==true){LoadJs(options.url);}
    },this),300);
};

如果不使用$.proxy的话,就需要这样写:

options.success=function(d){
    var that=this;
    setTimeout(function(options){
        $(options.target).html(d);
        if(Boolean(options.js)==true){that.LoadJs(options.url);}
    },300);
};

非常的繁琐还不直观!!



您正在找的文章可能是: