你的位置:首页 > Java教程

[Java教程]zepto中$.proxy()的到底有多强大?


好吧,其实是标题党了,哈哈,只是想总结一下工作中遇到$.proxy()的用法而已。

一、语法:

$.proxy()有两种使用语法

1)$.proxy(fn,context),fn是一个函数,context是执行fn这个函数的上下文。

例如:

  var obj = {name: 'Zepto'},      handler = function () {        alert(this.name)      };  $(document).on('click', $.proxy(handler, obj));

View Code

2)$.proxy(context, "fnName" ),请注意,此处fnName(函数名)必须是一个字符串。

  var obj2 = {        name: 'jQuery',        age: 22,        showAge: function () {          alert(this.age)        }      };  $(document).on('click', $.proxy(obj2, "showAge"));//弹出22

View Code

从上面的代码可以看出,$.proxy()主要用来改变函数执行的上下文,下面再看一个实战例子,真正把它用到好处。

二、实战例子:

需求:点击id为myElement的按钮,1000毫秒后,元素myElement增加一个class('aNewClass')。

一开始可能会有如下代码,但是我们发现无法实现我们的需求。

$('#myElement').click(function () {    setTimeout(function () {      $(this).addClass('aNewClass');//此时this指向window,当然无法给#myElement添加class}, 1000); });

为了修改这个this的指向,我们使用$.proxy()

$('#myElement').click(function() {     setTimeout($.proxy(function() {        $(this).addClass('aNewClass');     }, this), 1000);//此时this指向被点击的#myElement,看出来了吗?});