$.proxy用法详解

jQuery中的$.proxy官方描述为：

描述：接受一个函数，然后返回一个新函数，并且这个新函数始终保持了特定的上下文语境。

官方API；

jQuery.proxy( function, context )

 function为执行的函数，content为函数的上下文this值会被设置成这个object对象

jQuery.proxy( context, name )

content 函数的上下文会被设置成这个object对象，name要执行的函数，次函数必须是content对象的属性、

jQuery.proxy( function, context [, additionalArguments ] )

function为执行的函数，content为函数的上下文this值会被设置成这个object对象,additionalArguments任何数目的参数，传递给function

 

更详细的用法参考：

http://www.css88.com/jqapi-1.9/jQuery.proxy/

 

现在让我们一起来看实际例子：

var objPerson = {
        name: "obj",
        age: 32,
        test: function() {
            $("p").after("Name: " + this.name + "<br> Age: " + this.age);
        }
    }

    $("#btn").on("click", $.proxy(objPerson.test, objPerson))

点击按钮，输出：Name:obj  Age:32

objPerson.test表示上下文的方法，objPerson代表执行的上下文,例子中的this的上下文指的是objPerson

更具体的例子如：

var me = {
    type: "zombie",
    test: function(event) {
        /* Without proxy, `this` would refer to the event target */
        /* use event.target to reference that element. */
        var element = event.target;
        $(element).css("background-color", "red");

        /* With proxy, `this` refers to the me object encapsulating */
        /* this function. */
        $("#log").append("Hello " + this.type + "<br>");
        $("#test").unbind("click", this.test);
    }
};

var you = {
    type: "person",
    test: function(event) {
        $("#log").append(this.type + " ");
    }
};

/* execute you.test() in the context of the `you` object */
/* no matter where it is called */
/* i.e. the `this` keyword will refer to `you` */
var youClick = $.proxy(you.test, you);


/* attach click handlers to #test */
$("#test")

/* this === "zombie"; handler unbound after first click */
.on("click", $.proxy(me.test, me))

/* this === "person" */
.on("click", youClick)

/* this === "zombie" */
.on("click", $.proxy(you.test, me))

/* this === "<button> element" */
.on("click", you.test);

 

结合以上说明，再写一个综合的例子，例如 js封装一个ajax请求，代码如下：

var t = {
    param: {},
    url: "",
    type: "get",
    dataType: "json",
    ajaxOnly: true,
    contentType: 'application/x-www-form-urlencoded',
    /**
     *   取model数据
     *   @param {Function} onComplete 取完的回调函
     *   传入的第一个参数为model的数第二个数据为元数据，元数据为ajax下发时的ServerCode,Message等数
     *   @param {Function} onError 发生错误时的回调
     *   @param {Boolean} ajaxOnly 可选，默认为false当为true时只使用ajax调取数据
     * @param {Boolean} scope 可选，设定回调函数this指向的对象
     * @param {Function} onAbort 可选，但取消时会调用的函数
     */
    execute: function(onComplete, onError, ajaxOnly, scope) {
        var __onComplete = $.proxy(function(data) {
            var _data = data;
            if (typeof data == 'string') _data = JSON.parse(data);

            // @description 对获取的数据做字段映射
            var datamodel = typeof this.dataformat === 'function' ? this.dataformat(_data) : _data;

            if (this.onDataSuccess) this.onDataSuccess.call(this, datamodel, data);
            if (typeof onComplete === 'function') {
                onComplete.call(scope || this, datamodel, data);
            }

        }, this);

        var __onError = $.proxy(function(e) {
            if (typeof onError === 'function') {
                onError.call(scope || this, e);
            }
        }, this);

        this.sendRequest(__onComplete, __onError);

    },

    sendRequest: function(success, error) {
        var params = _.clone(this.getParam() || {});
        var crossDomain = {
            'json': true,
            'jsonp': true
        };

        if (this.type == 'POST') {
            this.dataType = 'json';
        }

        //jsonp与post互斥
        $.ajax({
            url: this.url,
            type: this.type,
            data: params,
            dataType: this.dataType,
            contentType: this.contentType,
            crossDomain: crossDomain[this.dataType],
            timeout: 50000,
            // xhrFields: {
            //     withCredentials: true
            // },
            success: function(res) {
                success && success(res);
            },
            error: function(err) {
                error && error(err);
            }
        });
    },

    setParam: function(key, val) {
        if (typeof key === 'object') {
            _.extend(this.param, key);
        } else {
            this.param[key] = val;
        }
    },

    removeParam: function(key) {
        delete this.param[key];
    },

    getParam: function() {
        return this.param;
    },

    dataformat: function(data) {
        if (_.isString(data)) data = JSON.parse(data);
        if (data.data) return data.data;
        return data;
    },

    onDataSuccess: function() {}
}

 

调用封装的方法：

function getData(url) {
  //设置参数
  t.setParam({
        "CurrentDestId": 7,
        "Platform":2,
        "ViewDestId":7
    });
   t.url=url;
   t.type="post";

   //调用
   t.execute(function(data){
        var list=data.Tags;
        var temp=_.template($("#foodListTemp").html());
        $("#list").html(temp({"dataTag":list}));
    },function(data){
        alert("fail");
    });
}