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; //设置一个变量,指向这个需要的this 3 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()的源码的更多相关文章
- Jquery实现ready()的源码
function bindReady(){ if ( readyBound ) return; readyBound = true; // Mozilla, Opera and webkit nigh ...
- jQuery 2.0.3 源码分析core - 选择器
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 打开jQuery源码,一眼看去到处都充斥着正则表达式,jQuery框架的基础就是查询了,查询文档元素对象 ...
- 在网站开发中很有用的8个 jQuery 效果【附源码】
jQuery 作为最优秀 JavaScript 库之一,改变了很多人编写 JavaScript 的方式.它简化了 HTML 文档遍历,事件处理,动画和 Ajax 交互,而且有成千上万的成熟 jQuer ...
- 分享一组很赞的 jQuery 特效【附源码下载】
作为最优秀的 JavaScript 库之一,jQuery 不仅使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果.这篇文章挑选了8个优秀的 jQuery 实例教程,这些 ...
- 14款让前端开发者心动的jQuery/CSS3插件及源码
14款让前端开发者心动的jQuery/CSS3插件及源码,一起来看看. 1.jQuery左右滚动banner代码! DEMO演示 / 源码下载 2.jQuery QQ表情插件qqFace ...
- 第二十五课:jQuery.event.trigger的源码解读
本课主要来讲解jQuery.event.trigger的源码解读. trigger = function(event, data, elem, onlyHandlers){ if(elem & ...
- jQuery 2.0.3 源码分析Sizzle引擎解析原理
jQuery 2.0.3 源码分析Sizzle引擎 - 解析原理 声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 先来回答博友的提问: 如何解析 div > p + ...
- 基于jQuery经典扫雷游戏源码
分享一款基于jQuery经典扫雷游戏源码.这是一款网页版扫雷小游戏特效代码下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <center> <h1>j ...
- jquery 1.7.2源码解析(二)构造jquery对象
构造jquery对象 jQuery对象是一个类数组对象. 一)构造函数jQuery() 构造函数的7种用法: 1.jQuery(selector [, context ]) 传入字符串参数:检查该字符 ...
随机推荐
- [python IO学习篇] 补充中文编码
http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/001386820066616a7 ...
- 以前刷过的FFT
Gym - 101667H 2017-2018 ACM-ICPC, Asia Daejeon Regional Contest #include<bits/stdc++.h> using ...
- 安装anaconda并配置环境
安装anaconda的步骤 1.确定系统信息 uname -a 2.下载对应版本 3.sh 安装shell脚本 4.添加到对应路径 5.安装完anaconda之后,创建虚拟环境 conda creat ...
- 九度oj 1005
题目1005:Graduate Admission 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:6182 解决:1791 题目描述: It ...
- 利用MVC模式简单设计jsp分页效果
利用Mysql创建一个表Car 用Eclipse创建一个Dynamic Web Project 在lib目录下导入Mysql的jar包 创建如下文件 package com.bean; public ...
- 计算机、程序和java概述
1.1 计算机.程序和java概述计算机包括硬件(hardware)软件(software)两部分.硬件包括计算机中看得见的物理部分,软件提供看不见的指令,指令控制硬件并且使得硬件完成特定的任务.一台 ...
- BZOJ 4821 [Sdoi2017]相关分析 ——线段树
打开题面,看到许多$\sum$ woc,好神啊,SDOI好强啊 然后展开之后,woc,SDOI好弱啊,怎么T3出个线段树裸题啊. 最后写代码的时候,woc,SDOI怎么出个这么码农的题啊,怎么调啊. ...
- 刷题总结——稻草人(bzoj4237cdq分治)
题目: Description JOI村有一片荒地,上面竖着N个稻草人,村民们每年多次在稻草人们的周围举行祭典. 有一次,JOI村的村长听到了稻草人们的启示,计划在荒地中开垦一片田地.和启示中的一样, ...
- [暑假集训--数位dp]LightOj1205 Palindromic Numbers
A palindromic number or numeral palindrome is a 'symmetrical' number like 16461 that remains the sam ...
- UVA 10003 Cutting Sticks(区间dp)
Description Cutting Sticks You have to cut a wood stick into pieces. The most affordable company ...