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()的源码的更多相关文章

  1. Jquery实现ready()的源码

    function bindReady(){ if ( readyBound ) return; readyBound = true; // Mozilla, Opera and webkit nigh ...

  2. jQuery 2.0.3 源码分析core - 选择器

         声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢!      打开jQuery源码,一眼看去到处都充斥着正则表达式,jQuery框架的基础就是查询了,查询文档元素对象 ...

  3. 在网站开发中很有用的8个 jQuery 效果【附源码】

    jQuery 作为最优秀 JavaScript 库之一,改变了很多人编写 JavaScript 的方式.它简化了 HTML 文档遍历,事件处理,动画和 Ajax 交互,而且有成千上万的成熟 jQuer ...

  4. 分享一组很赞的 jQuery 特效【附源码下载】

    作为最优秀的 JavaScript 库之一,jQuery 不仅使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果.这篇文章挑选了8个优秀的 jQuery 实例教程,这些  ...

  5. 14款让前端开发者心动的jQuery/CSS3插件及源码

    14款让前端开发者心动的jQuery/CSS3插件及源码,一起来看看. 1.jQuery左右滚动banner代码! DEMO演示    /    源码下载 2.jQuery QQ表情插件qqFace ...

  6. 第二十五课:jQuery.event.trigger的源码解读

    本课主要来讲解jQuery.event.trigger的源码解读. trigger = function(event, data, elem, onlyHandlers){ if(elem & ...

  7. jQuery 2.0.3 源码分析Sizzle引擎解析原理

    jQuery 2.0.3 源码分析Sizzle引擎 - 解析原理 声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 先来回答博友的提问: 如何解析 div > p + ...

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

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

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

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

随机推荐

  1. PDO 使用prepared statement 预处理LIMIT等非表字段参数

    由于一些驱动不支持原生的预处理语句,因此PDO可以完全模拟预处理.PDO的模拟预处理是默认打开的,即便MYSQL驱动本身支持预处理,在默认打开的状态下,PDO是不会用到MYSQL本身提供的预处理功能. ...

  2. 【java基础 14】锁的粒度:ThreadLocal、volatile、Atomic和Synchronized

    导读:题目中提到的几个关键字,分别是解决并发问题中,加锁所使用到的几个关键字,每个关键字代表的锁的粒度 不同,本篇博客,主要是从概念定义上,区分这几个关键字的应用场景.(PS:睡梦中,依稀记得有回面试 ...

  3. iOS学习笔记26-视频播放

    一.视频 在iOS中播放视频可以使用两个框架来实现: MediaPlayer框架的MPMoviePlayerController和MPMoviePlayerViewController AVFound ...

  4. 【Luogu】P2053修车(费用流)

    题目链接 早上状态不好,虚树搞崩只好来刷网络流了qwq. (然后我犹豫几秒之后看了题解) 使用拆点大法把工人拆成n*m个点,然后每个点代表每个时间段的工人, 然后从车到每个工人点连一条边,权值是耽误的 ...

  5. 最短路---dijsktra--邻接矩阵

    ; ; //点的个数 int dist[MAXNUM]; int prev[MAXNUM]; int A[MAXUNM][MAXNUM]; void Dijkstra(int v0) { bool S ...

  6. 刷题总结——树的同构(bzoj4337 树上hash)

    Description 树是一种很常见的数据结构. 我们把N个点,N-1条边的连通无向图称为树. 若将某个点作为根,从根开始遍历,则其它的点都有一个前驱,这个树就成为有根树. 对于两个树T1和T2,如 ...

  7. 刷题总结——影魔(HNOI2017 BZOJ4826 线段树+扫描线)

    题目: Description 影魔,奈文摩尔,据说有着一个诗人的灵魂.事实上,他吞噬的诗人灵魂早已成千上万.千百年来,他收集了各式各样 的灵魂,包括诗人.牧师.帝王.乞丐.奴隶.罪人,当然,还有英雄 ...

  8. 算法复习——哈希表+折半搜索(poj2549)

    搬讲义~搬讲义~ 折半搜索感觉每次都是打暴力时用的啊2333,主要是用于降次··当复杂度为指数级别时用折半可以减少大量复杂度··其实专门考折半的例题并不多···一般都是中途的一个小优化··· 然后折半 ...

  9. C# 实现图像快速 水平 垂直 翻转

    C#  图像水平,垂直翻转的方法,速度很快 重新把图像绘制成翻转的方法 /// <summary> /// 图像水平翻转 /// </summary> /// <para ...

  10. LA 6450 social advertising(dfs剪枝)

    6450 Social AdvertisingYou have decided to start up a new social networking company. Other existing ...