使用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 相关文章推荐
禁用Enter键表单自动提交实现代码
May 22 Javascript
jQuery 选择器详解
Jan 19 Javascript
jquery $(document).ready()和window.onload的区别浅析
Feb 04 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
Feb 16 Javascript
Javascript 对cookie操作详解及实例
Dec 29 Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 Javascript
Angular 4 指令快速入门教程
Jun 07 Javascript
微信小程序实现流程进度的图样式功能
Jan 16 Javascript
JavaScript实现区块链
Mar 14 Javascript
详解vue 数组和对象渲染问题
Sep 21 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 数字左侧自动补0
2008/03/31 PHP
Windows 下的 PHP-PEAR 安装方法
2010/11/20 PHP
php简单防盗链实现方法
2015/07/29 PHP
iOS10推送通知开发教程
2016/09/19 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
laravel通用化的CURD的实现
2019/12/13 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
js简易namespace管理器 实例代码
2013/06/21 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
JS中FRAME的操作问题实例分析
2014/10/21 Javascript
js打造数组转json函数
2015/01/14 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
javascript 的变量、作用域和内存问题
2017/04/19 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
深入掌握 react的 setState的工作机制
2017/09/27 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
2020/07/23 Javascript
js实现鼠标拖曳效果
2020/12/30 Javascript
python实现逆波兰计算表达式实例详解
2015/05/06 Python
深入理解Python分布式爬虫原理
2017/11/23 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
pytorch 共享参数的示例
2019/08/17 Python
Django 批量插入数据的实现方法
2020/01/12 Python
Python Flask框架实现简单加法工具过程解析
2020/06/03 Python
pytorch 多分类问题,计算百分比操作
2020/07/09 Python
介绍一下Linux文件的记录形式
2012/04/18 面试题
房产转让协议书(2014版)
2014/09/30 职场文书
Elasticsearch 批量操作
2022/04/19 Python