使用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 相关文章推荐
jsTree树控件(基于jQuery, 超强悍)[推荐]
Sep 01 Javascript
javascript错误的认识不用关心内存管理
Dec 15 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
javascript实现C语言经典程序题
Nov 29 Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 Javascript
BootStrap Select清除选中的状态恢复默认状态
Jun 20 Javascript
JS检测window.open打开的窗口是否关闭
Jun 25 Javascript
vue-cli2.9.3 详细教程
Apr 23 Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 Javascript
layui表格数据复选框回显设置方法
Sep 13 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
MySql中正则表达式的使用方法描述
2008/07/30 PHP
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
php比较相似字符串的方法
2015/06/05 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
phpmyadmin在宝塔面板里进不去的解决方案
2020/07/06 PHP
用javascript动态调整iframe高度的方法
2007/03/06 Javascript
在JavaScript中通过URL传递汉字的方法
2007/04/09 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
js实现表格字段排序
2014/02/19 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
Vue单文件组件基础模板小结
2017/08/10 Javascript
深入理解Vue nextTick 机制
2018/04/28 Javascript
JS实现键值对遍历json数组功能示例
2018/05/30 Javascript
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
js实现无缝轮播图
2020/03/09 Javascript
python实现的阳历转阴历(农历)算法
2014/04/25 Python
python套接字流重定向实例汇总
2016/03/03 Python
Python图算法实例分析
2016/08/13 Python
Django密码系统实现过程详解
2019/07/19 Python
python基础 range的用法解析
2019/08/23 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
Python实现扫码工具的示例代码
2020/10/09 Python
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
北大研究生linux应用求职信
2013/10/29 职场文书
给面试官的感谢信
2014/02/01 职场文书
委托证明书
2014/09/17 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
TV动画《间谍过家家》公开PV
2022/03/20 日漫
PHP RabbitMQ消息列队
2022/05/11 PHP