jquery $.proxy使用

在某些情况下,我们调用Javascript函数时候,this指针并不一定是我们所期望的那个。例如:

 1 //正常的this使用2 $('#myElement').click(function() {3 4     // 这个this是我们所期望的,当前元素的this.5 6     $(this).addClass('aNewClass');7 8 });9
10
11 //并非所期望的this
12 $('#myElement').click(function() {
13
14     setTimeout(function() {
15
16           // 这个this指向的是settimeout函数内部,而非之前的html元素
17
18         $(this).addClass('aNewClass');
19
20     }, 1000);
21
22 });

这时候怎么办呢,通常的一种做法是这样的:

 1 $('#myElement').click(function() {2     var that = this;   //设置一个变量,指向这个需要的this3 4     setTimeout(function() {5 6           // 这个this指向的是settimeout函数内部,而非之前的html元素7 8         $(that).addClass('aNewClass');9
10     }, 1000);
11
12 });

但是,在使用了jquery框架的情况下, 有一种更好的方式,就是使用$.proxy函数。

jQuery.proxy(),接受一个函数,然后返回一个新函数,并且这个新函数始终保持了特定的上下文(context )语境。

有两种语法:

jQuery.proxy( function, context )
/**function将要改变上下文语境的函数。
** context函数的上下文语境(`this`)会被设置成这个 object 对象。
**/jQuery.proxy( context, name )
/**context函数的上下文语境会被设置成这个 object 对象。
**name将要改变上下文语境的函数名(这个函数必须是前一个参数 ‘context’ **对象的属性)
**/

上面的例子使用这种方式就可以修改成:

$('#myElement').click(function() {setTimeout($.proxy(function() {$(this).addClass('aNewClass');  }, this), 1000);});

Jquery实现ready()的源码

 1 function bindReady(){     2     if ( readyBound ) return;     3     readyBound = true;     4     5     // Mozilla, Opera and webkit nightlies currently support this event     6     if ( document.addEventListener ) {     7         // Use the handy event callback     8         document.addEventListener( "DOMContentLoaded", function(){     9             document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
10             jQuery.ready();
11         }, false );
12
13     // If IE event model is used
14     } else if ( document.attachEvent ) {
15         // ensure firing before onload,
16         // maybe late but safe also for iframes
17         document.attachEvent("onreadystatechange", function(){
18             if ( document.readyState === "complete" ) {
19                 document.detachEvent( "onreadystatechange", arguments.callee );
20                 jQuery.ready();
21             }
22         });
23
24         // If IE and not an iframe
25         // continually check to see if the document is ready
26         if ( document.documentElement.doScroll && typeof window.frameElement === "undefined" )
27           (function(){
28             if ( jQuery.isReady ) return;
29
30             try {
31                 // If IE is used, use the trick by Diego Perini
32                 // http://javascript.nwbox.com/IEContentLoaded/
33                 document.documentElement.doScroll("left");
34             } catch( error ) {
35                 setTimeout( arguments.callee, 0 );
36                 return;
37             }
38
39             // and execute any waiting functions
40             jQuery.ready();
41         })();
42     }
43
44     // A fallback to window.onload, that will always work
45     jQuery.event.add( window, "load", jQuery.ready );
46 }   

关键:IE or Webkit|Moz 内核判断、DOMContentLoaded事件、onreadystatechange事件、readyState==“complete”

jquery $.proxy使用 Jquery实现ready()的源码相关推荐

  1. chosen.jquery.js 、chosen-select 源码修改控制 chosen:updated 方法动态更新下拉框选项不更新搜索框值 ,chosen 实现远程搜索加载下拉选项

    chosen.jquery.js .chosen-select 源码修改控制 chosen:updated 方法动态更新下拉框选项不更新搜索框值,chosen 实现远程搜索加载下拉选项 chosen. ...

  2. html5 tab菜单切换页面,11个常用的jQuery TAB切换菜单源码及制作教程

    11个常用的jQuery TAB切换菜单源码及制作教程 Sponsor TAB切换式菜单可以方便为我们减少很多网页布局空间,而且用jQuery的话可以加入一些动画效果,比如渐变,向左右滑动等,提升一定 ...

  3. 菜鸟读jQuery 2.0.3 源码分析系列(1)

    原文链接在这里,作为一个菜鸟,我就一边读一边写 jQuery 2.0.3 源码分析系列 前面看着差不多了,看到下面一条(我是真菜鸟),推荐木有入门或者刚刚JS入门摸不着边的看看,大大们手下留情,想一起 ...

  4. 基于jQuery经典扫雷游戏源码

    分享一款基于jQuery经典扫雷游戏源码.这是一款网页版扫雷小游戏特效代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <center><h1>jQ ...

  5. jquery 1.7.2源码解析(二)构造jquery对象

    构造jquery对象 jQuery对象是一个类数组对象. 一)构造函数jQuery() 构造函数的7种用法: 1.jQuery(selector [, context ]) 传入字符串参数:检查该字符 ...

  6. jQuery 2.0.3 源码分析core - 整体架构

    拜读一个开源框架,最想学到的就是设计的思想和实现的技巧. 废话不多说,jquery这么多年了分析都写烂了,老早以前就拜读过, 不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery ...

  7. jQuery插件stickup.js 源码解析初步

    这里只是一个初步的解析 stickup.js是一个简单的jQuery插件,源代码只有100多行,它能让页面目标元素 "固定" 在浏览器窗口的顶部,即便页面在滚动,目标元素仍然能出现 ...

  8. jQuery 2.0.3 源码分析 Deferred(最细的实现剖析,带图)

    Deferred的概念请看第一篇 http://www.cnblogs.com/aaronjs/p/3348569.html ******************构建Deferred对象时候的流程图* ...

  9. 最细的实现剖析:jQuery 2.0.3源码分析Deferred

    Deferred的概念请看第一篇 http://www.cnblogs.com/aaronjs/p/3348569.html **构建Deferred对象时候的流程图** **源码解析** 因为cal ...

最新文章

  1. 逃离谷歌,多年来DeepMind一直在寻求独立:还搞了个「Mario」计划
  2. 洛谷P1832 A+B Problem(再升级)
  3. python什么时候诞生的_关于RFC 3339日期时间:在Python中产生timestamp
  4. 腾讯面试题 linux下free命令详解
  5. DayDayUp:教你一招如何在道客巴巴免费下载自己被侵权的文章
  6. 基础知识:元组、字典、集合
  7. python的时间差计算
  8. python求解不等式组_解线性方程组和线性不等式组
  9. 第6篇:Flowable快速工作流脚手架Jsite_请假实战_部门经理审批
  10. python遍历集合_Python 高效遍历 集合所有子集的全组合
  11. web-attack 1-5视频汇总
  12. ICML2018对抗生成网络论文评述
  13. 【静态化平台】☞( 一)网页静态化服务
  14. 驱动精灵w8ndows xp sp2,惠普打印机驱动官方正式版下载,适用于winxp,win2003,winvista,win7,win8,win10,win2008,win2012-驱动精灵...
  15. 毕业设计之 --- 基于java web的旅游网站设计
  16. 如何制作一个商城小程序?
  17. Kaggle泰坦尼克预测(完整分析)
  18. AI学习 Day06 内置函数
  19. Error:A problem occurred configuring project ':app'. failed to find target with hash string 'andro
  20. 培训机构内幕--转载

热门文章

  1. Visual Studio环境变量使用实例:使用环境变量来组织project
  2. 项目管理深入理解08--成本管理
  3. python-sendcmd主动模式访问ftp——修改port中IP地址信息
  4. oracle grant 权限
  5. 关于服务器启动慢的问题
  6. OpenWebSpider 安装使用
  7. DispatcherServlet之HandlerAdapter的handle
  8. mongoose笔记
  9. http://www.cnblogs.com/youfan/articles/3216816.html
  10. RHEL6 64位系统安装ORACLE 10g 64bit 数据库