jquery $.proxy使用 Jquery实现ready()的源码
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()的源码相关推荐
- chosen.jquery.js 、chosen-select 源码修改控制 chosen:updated 方法动态更新下拉框选项不更新搜索框值 ,chosen 实现远程搜索加载下拉选项
chosen.jquery.js .chosen-select 源码修改控制 chosen:updated 方法动态更新下拉框选项不更新搜索框值,chosen 实现远程搜索加载下拉选项 chosen. ...
- html5 tab菜单切换页面,11个常用的jQuery TAB切换菜单源码及制作教程
11个常用的jQuery TAB切换菜单源码及制作教程 Sponsor TAB切换式菜单可以方便为我们减少很多网页布局空间,而且用jQuery的话可以加入一些动画效果,比如渐变,向左右滑动等,提升一定 ...
- 菜鸟读jQuery 2.0.3 源码分析系列(1)
原文链接在这里,作为一个菜鸟,我就一边读一边写 jQuery 2.0.3 源码分析系列 前面看着差不多了,看到下面一条(我是真菜鸟),推荐木有入门或者刚刚JS入门摸不着边的看看,大大们手下留情,想一起 ...
- 基于jQuery经典扫雷游戏源码
分享一款基于jQuery经典扫雷游戏源码.这是一款网页版扫雷小游戏特效代码下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <center><h1>jQ ...
- jquery 1.7.2源码解析(二)构造jquery对象
构造jquery对象 jQuery对象是一个类数组对象. 一)构造函数jQuery() 构造函数的7种用法: 1.jQuery(selector [, context ]) 传入字符串参数:检查该字符 ...
- jQuery 2.0.3 源码分析core - 整体架构
拜读一个开源框架,最想学到的就是设计的思想和实现的技巧. 废话不多说,jquery这么多年了分析都写烂了,老早以前就拜读过, 不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery ...
- jQuery插件stickup.js 源码解析初步
这里只是一个初步的解析 stickup.js是一个简单的jQuery插件,源代码只有100多行,它能让页面目标元素 "固定" 在浏览器窗口的顶部,即便页面在滚动,目标元素仍然能出现 ...
- jQuery 2.0.3 源码分析 Deferred(最细的实现剖析,带图)
Deferred的概念请看第一篇 http://www.cnblogs.com/aaronjs/p/3348569.html ******************构建Deferred对象时候的流程图* ...
- 最细的实现剖析:jQuery 2.0.3源码分析Deferred
Deferred的概念请看第一篇 http://www.cnblogs.com/aaronjs/p/3348569.html **构建Deferred对象时候的流程图** **源码解析** 因为cal ...
最新文章
- 逃离谷歌,多年来DeepMind一直在寻求独立:还搞了个「Mario」计划
- 洛谷P1832 A+B Problem(再升级)
- python什么时候诞生的_关于RFC 3339日期时间:在Python中产生timestamp
- 腾讯面试题 linux下free命令详解
- DayDayUp:教你一招如何在道客巴巴免费下载自己被侵权的文章
- 基础知识:元组、字典、集合
- python的时间差计算
- python求解不等式组_解线性方程组和线性不等式组
- 第6篇:Flowable快速工作流脚手架Jsite_请假实战_部门经理审批
- python遍历集合_Python 高效遍历 集合所有子集的全组合
- web-attack 1-5视频汇总
- ICML2018对抗生成网络论文评述
- 【静态化平台】☞( 一)网页静态化服务
- 驱动精灵w8ndows xp sp2,惠普打印机驱动官方正式版下载,适用于winxp,win2003,winvista,win7,win8,win10,win2008,win2012-驱动精灵...
- 毕业设计之 --- 基于java web的旅游网站设计
- 如何制作一个商城小程序?
- Kaggle泰坦尼克预测(完整分析)
- AI学习 Day06 内置函数
- Error:A problem occurred configuring project ':app'. failed to find target with hash string 'andro
- 培训机构内幕--转载
热门文章
- Visual Studio环境变量使用实例:使用环境变量来组织project
- 项目管理深入理解08--成本管理
- python-sendcmd主动模式访问ftp——修改port中IP地址信息
- oracle grant 权限
- 关于服务器启动慢的问题
- OpenWebSpider 安装使用
- DispatcherServlet之HandlerAdapter的handle
- mongoose笔记
- http://www.cnblogs.com/youfan/articles/3216816.html
- RHEL6 64位系统安装ORACLE 10g 64bit 数据库