讨论jQuery和javascript性能的文章并不罕见。然而,本文我计划总结一些速度方面的技巧和我本人的一些建议,来提升你的jQuery和javascript代码。好的代码会带来速度的提升。快速渲染和响应意味着更好的用户体验。
首先,在脑子里牢牢记住jQuery就是javascript。这意味着我们应该采取相同的编码惯例,风格指南和最佳实践。
 
首先,如果你是一个javascript新手,我建议您阅读 《给JavaScript初学者的24条最佳实践》 ,这是一篇高质量的javascript教程,接触jQuery之前最好先阅读。
 
当你准备使用jQuery,我强烈建议你遵循下面这些指南:
 
缓存变量
DOM遍历是昂贵的,所以尽量将会重用的元素缓存。
// 糟糕
 
h = $('#element').height();
$('#element').css('height',h-20);
 
// 建议
 
$element = $('#element');
h = $element.height();
$element.css('height',h-20);
 
 
避免全局变量
jQuery与javascript一样,一般来说,最好确保你的变量在函数作用域内。
// 糟糕
 
$element = $('#element');
h = $element.height();
$element.css('height',h-20);
 
// 建议
 
var $element = $('#element');
var h = $element.height();
$element.css('height',h-20);
 
 
使用匈牙利命名法
在变量前加$前缀,便于识别出jQuery对象。
// 糟糕
 
var first = $('#first');
var second = $('#second');
var value = $first.val();
 
// 建议 - 在jQuery对象前加$前缀
 
var $first = $('#first');
var $second = $('#second'),
var value = $first.val();
 
 
使用 Var 链(单 Var 模式)
将多条var语句合并为一条语句,我建议将未赋值的变量放到后面。
var 
  $first = $('#first'),
  $second = $('#second'),
  value = $first.val(),
  k = 3,
  cookiestring = 'SOMECOOKIESPLEASE',
  i,
  j,
  myArray = {};
 
 
请使用’On’
在新版jQuery中,更短的 on(“click”) 用来取代类似 click() 这样的函数。在之前的版本中 on() 就是 bind()。自从jQuery 1.7版本后,on() 附加事件处理程序的首选方法。然而,出于一致性考虑,你可以简单的全部使用 on()方法。
 
转载自: 爱思资源网 - 专注WEB前端开发 
原文链接: http://www.aseoe.com/show-13-384-1.html
 

探索高效jQuery的奥秘的更多相关文章

  1. 高效jQuery的奥秘

    讨论jQuery和javascript性能的文章并不罕见.然而,本文我计划总结一些速度方面的技巧和我本人的一些建议,来提升你的jQuery和javascript代码.好的代码会带来速度的提升.快速渲染 ...

  2. 高效 jquery 的奥秘

    当你准备使用 jQuery,我强烈建议你遵循下面这些指南: 1. 缓存变量 DOM 遍历是昂贵的,所以尽量将会重用的元素缓存. // 糟糕 h = $('#element').height(); $( ...

  3. jQuery的奥秘

    颜海镜 高效jQuery的奥秘 讨论jQuery和javascript性能的文章并不罕见.然而,本文我计划总结一些速度方面的技巧和我本人的一些建议,来提升你的jQuery和javascript代码.好 ...

  4. 高效jQuery

    1.缓存变量 DOM遍历是昂贵的,所以尽量将会重用的元素缓存. // 糟糕 h = $('#element').height(); $('#element').css('height',h-20); ...

  5. 高效JQuery编码

    缓存变量 DOM遍历是昂贵的,所以尽量将会重用的元素缓存. // 糟糕   h = $('#element').height(); $('#element').css('height',h-20); ...

  6. 深入探索 高效的Java异常处理框架

    转载自:http://www.sunwei.org/archives/196 摘要:本文从Java异常最基本的概念.语法开始讲述了Java异常处理的基本知识,分析了Java异常体系结构,对比Sprin ...

  7. 编写高性能的javascript代码(持续更新)

    参考资料: Vanilla JS——世界上最轻量的JavaScript框架(没有之一) http://segmentfault.com/a/1190000000355277 探索高效jQuery的奥秘 ...

  8. 给JavaScript初学者的24条最佳实践(转:http://www.cnblogs.com/yanhaijing/p/3465237.html)

    作为“30 HTML和CSS最佳实践”的后续,本周,我们将回顾JavaScript的知识 !如果你看完了下面的内容,请务必让我们知道你掌握的小技巧! 1.使用 === 代替 == JavaScript ...

  9. javascript小小技巧

    JS的一些小技巧,我主要是做后台的(.NET),前端知识了解得不多,经验非常有限,不过还是经常写JS代码,对前端有着浓厚的兴趣,特喜欢js这门语言,虽然很多人喷它,但还是很喜欢Js.下面说说项目中我经 ...

随机推荐

  1. andorid 进度条

    SeekBar类似于ProgressBar,但是ProgressBar的主要功能是让用户知道目前的状态,而SeekBar的功能在于让用户调整进度,举个例子,在音乐播放器中,可以通过调整SeekBar来 ...

  2. asp.net文本编辑器(FCKeditor)

    FCKeditor介绍 FCKeditor是一个功能强大支持所见即所得功能的文本编辑器,可以为用户提供微软office软件一样的在线文档编辑服务.它不需要安装任何形式的客户端,兼容绝大多数主流浏览器, ...

  3. 2014上海网络赛 HDU 5053 the Sum of Cube

    水 #include <stdio.h> #include <stdlib.h> #include<math.h> #include<iostream> ...

  4. 5.2 CUDA Histogram直方图

    什么是Histogramming Histogramming是一种从大的数据集中提取典型特征和模式的方式. 在统计学中,直方图(英语:Histogram)是一种对数据分布情况的图形表示,是一种二维统计 ...

  5. DataRow数组 转 datatable

    DataTable tmpdt = dt.Clone(); DataRow[] drs = dt.Select("legnbr="+legNbr); ) { tmpdt = drs ...

  6. EventBus使用小记

    自从使用了EventBus,代码干净了好多. 从此你不用startActivityForResult了,从此你不用再写注册BroadcastReceiver了,从此你不用再写一些回调了. 只需要在需要 ...

  7. 统一样式的View应该用style修饰

    我们的应用中,常常有一些统一的组件,这时候应该用style来修饰.这样的话,修改起来也方便,代码也更简洁 比如,下面的代码,没有用style修饰 <LinearLayout xmlns:andr ...

  8. [html]HTML <form> 标签的 enctype 属性

  9. Jenkins 实际项目操作

    .Abstract { padding: 15px; border: dotted 2px #999; color: #999; font-family: "Microsoft Yahei& ...

  10. 一步一步学android控件(之十五) —— DegitalClock & AnalogClock

    原本计划DigitalClock和AnalogClock单独各一篇来写,但是想想,两个控件的作用都一样,就和在一起写一篇了. DegitalClock和AnalogClock控件主要用于显示当前时间信 ...