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 相关文章推荐
用Javascript实现UTF8编码转换成gb2312编码
Dec 22 Javascript
javascript 词法作用域和闭包分析说明
Aug 12 Javascript
JavaScript中的apply()方法和call()方法使用介绍
Jul 25 Javascript
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
jQuery EasyUi实战教程之布局篇
Jan 26 Javascript
jQuery图片渐变特效的简单实现
Jun 25 Javascript
Javascript实现信息滚动效果
May 18 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
express express-session的使用小结
Dec 12 Javascript
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
Oct 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
PHPMailer 中文使用说明小结
2010/01/22 PHP
php数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
thinkphp实现附件上传功能
2017/05/26 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
中文字符串截取的js函数代码
2013/04/17 Javascript
JavaScript和CSS通过expression实现Table居中显示
2013/06/28 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
Javascript实现字数统计
2015/07/03 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
如何基于jQuery实现五角星评分
2020/09/02 jQuery
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
Python3实现连接SQLite数据库的方法
2014/08/23 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
Python网络编程使用select实现socket全双工异步通信功能示例
2018/04/09 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
python Paramiko使用示例
2020/09/21 Python
pycharm进入时每次都是insert模式的解决方式
2021/02/05 Python
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
会计应聘求职信范文
2013/12/17 职场文书
财务经理的岗位职责
2013/12/17 职场文书
文秘档案管理岗位职责
2014/03/06 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
婚礼领导致辞大全
2015/07/28 职场文书