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

一、语法:

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

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

例如:

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

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

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

从上面的代码可以看出,$.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,看出来了吗?
});

zepto中$.proxy()的到底有多强大?的更多相关文章

  1. Proxy:简单小巧又强大好用的代理系统

    之前的文章介绍了许多我们在用的DevOps相关的工具系统,例如:方便创建多套运行环境的Alodi,对运维友好的配置中心Kerrigan,强大的自定义任务引擎Probius以及专注于数据库自动化的ove ...

  2. jquery和zepto的扩展方法extend

    jquery和zepto的扩展方法extend 总结下jQuery(3.1.1)和zepto(1.1.6)到底是如何来开放接口,使之可以进行扩展,两者都会有类型判断,本文使用简单的类型判断,暂不考虑兼 ...

  3. Python强大的日志模块logging

    前言 日志是对于软件执行所发生的事件的一种追踪记录方式.日常使用过程中对代码执行的错误和问题会进行查看日志来分析定位问题所在.平常编写代码以及调试也经常用到.通常的新手的做法是直接print打印,但是 ...

  4. java 代理模式-静态代理与动态代理

    最近在研究SpringAOP,当然要学习AOP就要知道这么健硕.强大的功能的背后究竟隐藏着怎样不可告人的“秘密”?? 接下来就是查阅了许多资料详细的研究了一下Java的代理模式,感觉还是非常非常重要的 ...

  5. postman---postman简单介绍

    有小伙伴们想要了解postman,今天它来了,不要问它到底有多强大,自古免费好用即是王道,它不仅仅是开发接口强大的调试工具,还是测试接口的居家必备,它不仅仅可以把需要调用的接口保存下来方便调用,还可以 ...

  6. 高并发大流量专题---11、Web服务器的负载均衡

    高并发大流量专题---11.Web服务器的负载均衡 一.总结 一句话总结: 推荐使用nginx七层(应用层)负载均衡的实现:配置那是相当的简单 http{ upstream cluster{ serv ...

  7. iOS移动下上传图片失败解决 (上传多图,带其他参数)

    项目中有一个主要的功能,就是上传图片,结结果移动真的是很奇怪,WiFi,联通,电信都没有问题的情况下,居然在移动下不行,真的是很头疼.不过好在最后是解决了 项目的网络请求我是采用ASIHttpRequ ...

  8. Sublime Text 设置文件详解

     Sublime Text 2是那种让人会一眼就爱上的编辑器,不仅GUI让人眼前一亮,功能更是没的说,拓展性目前来说也完全够用了,网上介绍软件的文章和推荐插件的文章也不少,而且很不错,大家可以去找找自 ...

  9. Perl的基本语法<总结> (转载)

    前言:这篇文章是花了我很多时间.费了我很多心血才完成的,虽然连我自己都觉得无法达到尽善尽美的境界,但希望能帮助大家入门,稍微了解到Perl 到底是个什么样的东西,Perl到底有那些强大的功能,那么这篇 ...

随机推荐

  1. 第五周 mybash的实现

    第五周 mybash的实现 1. 使用fork,exec,wait实现mybash 2. 写出伪代码,产品代码和测试代码 3. 发表知识理解,实现过程和问题解决的博客(包含代码托管链接) 1. for ...

  2. 小程序if else 判断显示隐藏

    wxml: <view> <text wx:if="{{ifnumber>80}}">{{ifnumber}}</text> <te ...

  3. 【索引】MySQL索引

    一.索引的定义及作用 1. 二.索引的创建及删除 1.1查看表的索引 show index from tblname; 1.2.创建索引 1.22创建普通索引 ALTER TABLE `table_n ...

  4. Python小白学习之文件内建函数

    文件内建函数: 2018-10-24 23:40:02   简单介绍: open()打开文件 read()读取文件(其实是输入文件里的内容到read函数,类似于get(url),所以下面的图片备注的是 ...

  5. katalon系列十一:Katalon Studio在Jenkins持续集成

    以下在WIN10上运行正常.安装准备:一.安装Katalon Studio二.安装Jenkins三.获取Katalon命令行运行命令:点击工具栏的‘Build CMD’按钮,选择测试集以及其他选项:选 ...

  6. 创建第一个Scrapy项目

    d:进入D盘 scrapy startproject tutorial建立一个新的Scrapy项目 工程的目录结构: tutorial/ scrapy.cfg # 部署配置文件 tutorial/ # ...

  7. 袋鼠云研发手记 | 袋鼠云EasyManager的TypeScript重构纪要

    作为一家创新驱动的科技公司,袋鼠云每年研发投入达数千万,公司80%员工都是技术人员,袋鼠云产品家族包括企业级一站式数据中台PaaS数栈.交互式数据可视化大屏开发平台Easy[V]等产品也在迅速迭代.在 ...

  8. Linux内核学习笔记(4)-- wait、waitpid、wait3 和 wait4

    进程调用 exit() 退出执行后,被设置为僵死状态,这时父进程可以通过 wait4() 系统调用查询子进程是否终结,之后再进行最后的操作,彻底删除进程所占用的内存资源. wait4() 系统调用由 ...

  9. IncDec序列:差分+贪心

    IncDec序列 题目描述: 给定一个长度为 n 的数列 a1,a2,…,an,每次可以选择一个区间[l,r],使下标在这个区间内的数都加一或者都减一. 求至少需要多少次操作才能使数列中的所有数都一样 ...

  10. 华为笔试——C++括号匹配

    题目:括号匹配 题目来源:https://blog.csdn.net/lizi_stdio/article/details/76618908 题目介绍:输入一个字符串,里面可能包含“()”.“ [   ...