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 相关文章推荐
JS模拟多线程
Feb 07 Javascript
JQuery切换显示的效果实例代码
Feb 27 Javascript
使用JavaScript实现Java的List功能(实例讲解)
Nov 07 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
Mar 10 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 Javascript
canvas绘制的直线动画
Jan 23 Javascript
js实现方块上下左右移动效果
Aug 17 Javascript
浅谈react前后端同构渲染
Sep 20 Javascript
Javascript的console['']常用输入方法汇总
Apr 26 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 Javascript
Vue实现boradcast和dispatch的示例
Nov 13 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一些十分严重的缺陷详解
2013/06/03 PHP
php自定义类fsocket模拟post或get请求的方法
2015/07/31 PHP
通过PHP自带的服务器来查看正则匹配结果的方法
2015/12/24 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
jQuery 学习 几种常用方法
2009/06/11 Javascript
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
js对象数组按属性快速排序
2011/01/31 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
如何在postman测试用例中实现断言过程解析
2020/07/09 Javascript
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
在python里从协程返回一个值的示例
2019/02/19 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
Python 实现向word(docx)中输出
2020/02/13 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
美国性感女装网站:bebe
2017/03/04 全球购物
巴基斯坦购物网站:Goto
2019/03/11 全球购物
应届护士推荐信
2013/11/16 职场文书
酒店开业庆典策划方案
2014/05/28 职场文书
2014企业年终工作总结
2014/12/23 职场文书
学校团代会开幕词
2016/03/04 职场文书
90行Python代码开发个人云盘应用
2021/04/20 Python