转载自http://james.padolsey.com/javascript/76-bytes-for-faster-jquery/

作者JAMES PADOLSEY

在我们平时使用JQuery,调用了一个回调函数,我们会根据迭代中this对象的不同来确定上下文,然后在用$(this)构建$对象来使用jQuery对象里的方法。像这样

html

  1. <a><span>link1</span></a>
  2. <a><div>link2</div></a>

js

  1. $("a").click(function(){
  2. console.log($(this).text());
  3. })

每次迭代,都创建一个新的对象,这些jQuery对象似乎是很多余的,尤其是当迭代次数很多的时候。

下面来看一个优化的写法,共用一个jQuery对象。

  1. // 只创建一个jQuery对象
  2. var $obj = $([1]);
  3.  
  4. $("a").click(function(){
  5.  
  6. // 给出需要操作的this
  7. $obj[0] = this;
  8.  
  9. // 共用先前的jQuery对象中的方法
  10. console.log( $obj.text());
  11. })

这是一种flyweight的概念,共享数据,无论我们有多少次迭代,我们都只创建了一个jQuery对象并使用其.text()。

现在这只是概念,为了更好的运用到实际当中,JAMES PADOLSEY给出了良好的函数

  1. jQuery.single = (function(o){
  2.  
  3. var collection = jQuery([1]); // Fill with 1 item, to make sure length === 1
  4.  
  5. return function(element) {
  6.  
  7. // Give collection the element:
  8. collection[0] = element;
  9.  
  10. // Return the collection:
  11. return collection;
  12.  
  13. };
  14.  
  15. }());

使用

  1. jQuery('a').click(function(){
  2.  
  3. console.log($.single(this).text());
  4.  
  5. });

常常的,在一些编码当中,我们不需要创建jQ对象,但我们要使用jQuery.fn里的函数,且要可以链式使用。这时我就可以使用JAMES PADOLSEY的$.single了。

76 bytes for faster jQuery的更多相关文章

  1. sqoop错误集锦2

    1.使用sqoop技术将mysql的数据导入到Hive出现的错误如下所示: 第一次使用命令如下所示: 1 [hadoop@slaver1 sqoop-1.4.5-cdh5.3.6]$ bin/sqoo ...

  2. net core分块上传文件

    net core分块上传文件   写完asp.net多文件上传(http://www.cnblogs.com/bestckk/p/5987383.html)后,感觉这种上传还是有很多缺陷,于是...( ...

  3. 使用weave管理docker网络

    weave简介 Weave creates a virtual network that connects Docker containers deployed across multiple hos ...

  4. TTL 生存时间介绍 (转)

    TTL: (Time To Live)生存时间,是IP协议包中的一个值,它告诉网络路由器包在网络中的时间是否太长而应被丢弃.有很多原因使包在一定时间内不能被传递到目的地.例如,不正确的路由表可能导致包 ...

  5. rsync.conf详解

    1.在服务端编辑配置文件 [root@game_intf ~]# more /etc/rsyncd.conf port=8730 log file=/var/log/rsync.log pid fil ...

  6. bbed的使用--查看数据文件信息 & sid信息

    1.得到文件的块大小和数据块个数 在Linux和Unix上,oracle提供了一个小工具dbfsize用于查看文件块大小 (可以参看[ID:360032.1]How to detect and fix ...

  7. FW:使用weave管理docker网络

    Posted on 2014-11-12 22:20 feisky 阅读(1761) 评论(0) 编辑 收藏 weave简介 Weave creates a virtual network that ...

  8. Rsync详解

    Rsync详解 1.什么是RsyncRsync(remote synchronize)是一个远程数据同步工具,可通过LAN/WAN快速同步多台主机间的文件.Rsync使用所谓的“Rsync算法”来使本 ...

  9. Docker-网络基础配置

    从外部访问容器 指定容器端口随机映射主机端口 [root@wls12c /]$ docker run -p -d --name web tomcat /bin/bash -c /root/apache ...

随机推荐

  1. js校验

    判空 function check(s) { return (s == null || typeof (s) == "undefined" || s == "" ...

  2. Redis 安装教程 (Windows 2.6.13 稳定版)

    redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted set ...

  3. 【问题备注】VS2012不能输入代码,文字…

    第一次遇到,非常奇怪,一个项目,VS2012能正常打开,但是不能输入代码. 对比分析发现,其他项目能正常work.在于一个问题就是,VS2012 右下角有个INS一直在转一直analyzing,而正常 ...

  4. document.write 存在几个问题?应该注意

    document.write (henceforth DW) does not work in XHTML XHTML 不支持 DW executed after the page has finis ...

  5. IOS开发之程序执行状态更改

    1 前言 上节我们介绍了程序执行的状态,从例子中我们可以发现处理这些状态更改的时候有明确的策略可以遵循,这次我们就来介绍一下. 2 详述 2.1 活动->不活动 使用applicationWil ...

  6. PHP获取客户端操作系统,浏览器,语言,IP,IP归属地等

    <?php class Client { ////获得访客浏览器类型 function Get_Browser(){ if(!empty($_SERVER['HTTP_USER_AGENT']) ...

  7. 我对前端MVC的理解

    前端MVC:(model.view.controller)模型.视图.控制器 MVC的逻辑都应该以函数的形式包装好,然后按产品业务和交互需求,使用对应的设计模式组装成合适的MVC对象或类. MVC逻辑 ...

  8. Win 10 、Win 8 系统默认字体如何修改为宋体

    Win 10 字体改为宋体方法:新建一个文本文档txt,将如下代码复制进去:Windows Registry Editor Version 5.00[HKEY_LOCAL_MACHINE\SOFTWA ...

  9. Slack 开源替代品 Rocket.Chat(聊天,文件上传等等)

    Rocket.Chat 是特性最丰富的 Slack 开源替代品之一. 主要功能:群组聊天,直接通信,私聊群,桌面通知,媒体嵌入,链接预览,文件上传,语音/视频 聊天,截图等等. Rocket.Chat ...

  10. C# 内存泄露

    一.事件引起的内存泄露 1.不手动注销事件也不发生内存泄露的情况 我们经常会写EventHandler += AFunction; 如果没有手动注销这个Event handler类似:EventHan ...