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 ul标签下拉菜单演示代码
Dec 11 Javascript
jQuery仿Excel表格编辑功能的实现代码
May 01 Javascript
如何编写高质量JS代码
Dec 28 Javascript
javascript日期格式化方法小结
Dec 17 Javascript
JavaScript常用判断写法大全(推荐)
May 30 Javascript
小程序scroll-view组件实现滚动的示例代码
Sep 20 Javascript
vue中动态select的使用方法示例
Oct 28 Javascript
JS实现滑动插件
Jan 15 Javascript
微信小程序如何实现点击图片放大功能
Jan 21 Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 Javascript
js实现购物车商品数量加减
Sep 21 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
discuz7 phpMysql操作类
2009/06/21 PHP
PHP函数实现从一个文本字符串中提取关键字的方法
2015/07/01 PHP
Zend Framework教程之Bootstrap类用法概述
2016/03/14 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
javascript实现依次输入input自动定焦
2014/12/23 Javascript
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
js改变css样式的三种方法推荐
2016/06/28 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
Angular5中调用第三方js插件的方法
2018/02/26 Javascript
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
详解VUE中的插值( Interpolation)语法
2020/10/18 Javascript
python 同时读取多个文件的例子
2019/07/16 Python
tensorflow使用L2 regularization正则化修正overfitting过拟合方式
2020/05/22 Python
python实现mean-shift聚类算法
2020/06/10 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
JD Sports德国官网:英国领先的运动鞋和运动服饰零售商
2018/02/26 全球购物
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
计算机应用专业自荐信
2014/07/05 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
2015年度保密工作总结
2015/04/24 职场文书
背起爸爸上学观后感
2015/06/08 职场文书
小学教代会开幕词
2016/03/04 职场文书
python 模块重载的五种方法
2021/04/24 Python
Python几种酷炫的进度条的方式
2022/04/11 Python
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL