jQuery的$.proxy()应用示例介绍


Posted in Javascript onApril 03, 2014

今天在看<<锋利的jQuery>>时看到了proxy()的使用,感觉很模糊,就到处找资料.

jQuery的$.proxy()应用示例介绍 

jQuery的源码也没看明白.

不过总算明白了proxy的用法了;

<input type="button" value="测试" id="guoBtn" name="我是按钮的name"/>

var obj = { 
name: "我是obj的name", 
sayName: function () { 
alert(this.name); 
} 
} 
$("#guoBtn").click(obj.sayName); //我是按钮的name 
// 如果我想访问obj的name怎么办呢? 
$("#guoBtn").click($.proxy(obj.sayName,obj));//"我是obj的name" 
$("#guoBtn").click($.proxy(obj, "sayName")); //"我是obj的name"

从上面proxy(a,b)的用法可以看出他的参数有两种写法.

第一种:a是一个function函数,b是这个函数的对象所有者.

第二种:a是一个对象,b是一个字符串,是a的属性名.

还有这个实例就是<<锋利的jQuery>>上的一个例子了.

<div id="panel" style="display:none;"> 
<button>Close</button> 
</div>

$("#panel").fadeIn(function () { 
$("#panel button").click(function () { 
$(this).fadeOut(); 
}); 
});

button虽然消失了,但是panel却没有消失.可以使用proxy来解决这个问题.

$("#panel").fadeIn(function () { 
var obj = this; 
$("#panel button").click($.proxy(function () { 
$(this).fadeOut(); 
}, obj)); 
});

这样单击按钮之后,panel才会消失.

个人感觉proxy最主要就是用来修改函数执行时的上下文对象的.

是在apply的基础上做的封装,所以说proxy就是我们jQuery自己的apply.

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 可调整尺寸
Sep 29 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 Javascript
php对mongodb的扩展(初识如故)
Nov 11 Javascript
ECMAScript 创建自己的js类库
Nov 22 Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
Jquery解析Json格式数据过程代码
Oct 17 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 Javascript
javascript中eval解析JSON字符串
Feb 27 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 Javascript
JS如何生成一个不重复的ID的函数
Dec 25 Javascript
javascript实现最长公共子序列实例代码
Feb 05 Javascript
MockJs结合json-server模拟后台数据
Aug 26 Javascript
js实现的复制兼容chrome和IE
Apr 03 #Javascript
JS实现局部选择打印和局部不选择打印
Apr 03 #Javascript
javascript实现页面内关键词高亮显示代码
Apr 03 #Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 #Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 #Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 #Javascript
JavaScript异步编程Promise模式的6个特性
Apr 03 #Javascript
You might like
一波PHP中cURL库的常见用法代码示例
2016/05/06 PHP
js 调整select 位置的函数
2008/02/21 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
js中this用法实例详解
2015/05/05 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
AngularJS基于factory创建自定义服务的方法详解
2017/05/25 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
2018/11/30 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
原生js实现下拉选项卡
2019/11/27 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
[46:27]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第一局
2016/03/02 DOTA
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python实现快速排序的示例(二分法思想)
2018/03/12 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
Python socket聊天脚本代码实例
2020/01/02 Python
python对一个数向上取整的实例方法
2020/06/18 Python
HTML5视频播放插件 video.js介绍
2018/09/29 HTML / CSS
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
大学考试作弊检讨书
2014/01/30 职场文书
表彰大会策划方案
2014/05/13 职场文书
工地安全标语
2014/06/07 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书
整脏治乱工作简报
2015/07/21 职场文书
Golang之sync.Pool使用详解
2021/05/06 Golang
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫
nginx配置之并发频次限制
2022/04/18 Servers