使用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 相关文章推荐
解决FireFox下[使用event很麻烦]的问题
Nov 26 Javascript
使用jquery实现放大镜效果
Sep 02 Javascript
JS显示表格内指定行html代码的方法
Mar 31 Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 Javascript
JavaScript实现的CRC32函数示例
Nov 23 Javascript
jquery实现焦点轮播效果
Feb 23 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
Apr 16 Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
Sep 20 Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 Javascript
JQuery表单元素取值赋值方法总结
May 12 jQuery
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
在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
建站常用13种PHP开源CMS比较
2009/08/23 PHP
php排序算法(冒泡排序,快速排序)
2012/10/09 PHP
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
如何实现JS函数的重载
2006/09/22 Javascript
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
JSON辅助格式化处理方法
2013/03/26 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
jQuery实现的图片分组切换焦点图插件
2015/01/06 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
2016/08/01 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
微信小程序url与token设置详解
2017/09/26 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
Vue的土著指令和自定义指令实例详解
2018/02/04 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
Python解析nginx日志文件
2015/05/11 Python
python在控制台输出进度条的方法
2015/06/20 Python
浅析python实现scrapy定时执行爬虫
2018/03/04 Python
python处理RSTP视频流过程解析
2020/01/11 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
教师师德反思材料
2014/02/15 职场文书
小学生家长寄语
2014/04/02 职场文书
食品安全演讲稿
2014/09/01 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
2014年个人售房协议书
2014/10/30 职场文书
pytorch 如何使用batch训练lstm网络
2021/05/28 Python
Python自动化实战之接口请求的实现
2022/05/30 Python