使用jQuery在对象中缓存选择器的简单方法


Posted in Javascript onJune 30, 2015

 当使用像jQuery这样的库时,开发者通常会使用选择器来访问和操作DOM中的元素。当一个选择在页面上被反复的访问时,把它缓存起来以获得更好的性能是个不错的想法。

让我们看一个例子,
 

jQuery(document).ready(function() {
  jQuery('#some-selector').on('hover', function() {
    jQuery(this).fadeOut('slow').delay(400).fadeIn();
    console.log(jQuery(this).text());
  });
 
  jQuery('#another-element').on('hover', function() {
    jQuery(this).slideUp();
  });
 
  jQuery('#some-selector').on('click', function() {
    alert('You have clicked a featured element');
  });
 
  jQuery('#another-element').on('mouseout', function() {
    jQuery(this).slideUp();
  });
});

也许你已经注意到,ID ‘some-selector' 和 ‘another-element' 在上面的代码片段中被提到了两次。通过把这些选择器保存到变量里,可以使他们能被复用,并且避免了重复选择操作。

当你开始在你的jQuery代码里积攒出各种各样的选择器时,你就能领会到在对象中缓存选择器 ? 以键值对的形式 ? 是多么美好。这使得你更容易在脚本中的任何地方访问它们,并且维护这些选择器也是轻而易举的事。

缓存选择器后,改进过的代码会像这样,
 

var someNamespace_Dom = {
  someSelector : 'jQuery("#some-selector")',
  anotherElement: 'jQuery("#another-element")',
};
 
jQuery(document).ready(function() {
  someNamespace_Dom.someSelector.on('hover', function() {
    jQuery(this).fadeOut('slow').delay(400).fadeIn();
    console.log(jQuery(this).text());
  });
  someNamespace_Dom.anotherElement.on('hover', function() {
    jQuery(this).slideUp();
  });
  someNamespace_Dom.someSelector.on('click', function() {
    alert('You have clicked a featured element');
  });
  someNamespace_Dom.anotherElement.on('mouseout', function() {
    jQuery(this).slideUp();
  });
});

由于选择器已经被缓存到变量中,DOM 树不再需要被重复遍历来寻找被操作的元素。‘someNamespace_Dom' 对象可以被用来添加更多键值对,使得维护工作很轻松。

Javascript 相关文章推荐
Extjs单独定义各组件的实例代码
Jun 25 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 Javascript
jquery表单验证插件formValidator使用方法
Apr 01 Javascript
JS获取IMG图片高宽的简单实例
May 17 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
Jan 13 Javascript
Angular如何引入第三方库的方法详解
Jul 13 Javascript
深入浅析JavaScript中的RegExp对象
Sep 18 Javascript
js如何实现元素曝光上报
Aug 07 Javascript
在Node.js应用中读写Redis数据库的简单方法
Jun 30 #Javascript
javascript日期计算实例分析
Jun 29 #Javascript
javascript处理a标签超链接默认事件的方法
Jun 29 #Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 #Javascript
JavaScript实现级联菜单的方法
Jun 29 #Javascript
node.js读取文件到字符串的方法
Jun 29 #Javascript
JavaScript模拟实现键盘打字效果
Jun 29 #Javascript
You might like
PHP 和 HTML
2006/10/09 PHP
php join函数应用
2011/05/04 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
JSON 学习之完全手册 图文
2007/05/29 Javascript
Javascript 面向对象 对象(Object)
2010/05/13 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
2013/02/02 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
python实现apahce网站日志分析示例
2014/04/02 Python
python中的多线程实例教程
2014/08/27 Python
python3 读取Excel表格中的数据
2018/10/16 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
python 基于opencv操作摄像头
2020/12/24 Python
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
继电保护工岗位职责
2014/01/05 职场文书
小学科学教学反思
2014/01/26 职场文书
大学新闻系求职信
2014/06/03 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
PHP判断是否是json字符串
2021/04/01 PHP
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python
pytorch实现ResNet结构的实例代码
2021/05/17 Python