$.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
更详细的⽤法参考：
www.css88/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", $.st, objPerson))
点击按钮，输出：Name:obj  Age:32
更具体的例⼦如：
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 " + pe + "<br>");
$("#test").unbind("click", st);
}
};
var you = {
type: "person",
test: function(event) {
$("#log").pe + " ");
}
};
/
* st() in the context of the `you` object */
/* no matter where it is called */
/* i.e. the `this` keyword will refer to `you` */
var youClick = $.st, you);
/* attach click handlers to #test */
/* this === "zombie"; handler unbound after first click */
.on("click", $.st, me))
/* this === "person" */
.on("click", youClick)
/* this === "zombie" */
.on("click", $.st, me))
/
* this === "<button> element" */
.on("click", st);
结合以上说明，再写⼀个综合的例⼦，例如 js封装⼀个ajax请求，代码如下：
var t = {
param: {},
url: "",
type: "get",typeof的用法
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 (DataSuccess) DataSuccess.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 = _.Param() || {});
var crossDomain = {
'json': true,
'jsonp': true
};
if (pe == 'POST') {
this.dataType = 'json';
}
//jsonp与post互斥
$.ajax({
url: this.url,
type: pe,
data: params,
dataType: this.dataType,
contentType: tType,
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;
//调⽤
var list=data.Tags;
var temp=_.template($("#foodListTemp").html());        $("#list").html(temp({"dataTag":list}));
},function(data){
alert("fail");
});
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。