《学习jquery的几点建议》由会员分享，可在线阅读，更多相关《学习jquery的几点建议（8页珍藏版）》请在金锄头文库上搜索。
1、Jquery代码的几点建议讨论jQuery和javascript性能的文章并不罕见。然而，木文我计划总结一些速度方血的 技巧和我木人的一些建议，来提升你的jQuery和javascript代码。好的代码会带来速度 的提升。快速渲染和响应意味着更好的用户体验。首先，在脑了里牢牢记住jQuery就是javascript o这意味着我们应该采取相同的编码惯例, 风格指南和最佳实践。首先，如果你是一个javascript新手，我建议您阅读JavaScript初学者的最佳实践, 这是一篇高质量的javascript教程，接触jQuery Z前最好先阅读。当你准备使用jQuery,我强烈建议你遵循下面这些
2、指南：缓存变量DOM遍历是昂贵的，所以尽量将会重用的元索缓存。 /糟糕h = $ (J #element，). height ();$ ( #element，). css (height, h20);/建议Selement = $ C #element，); h = Selement.height();$element.css C height , h20);避免全局变量jQuery与javascript样，般来说，最好确保你的变量亦函数作用域内。 /糟糕$el ement 二 $ (J #el ement，); h = Selement.height();$element. css C he
3、ight , h20);/建议var $element = $( #element/);var h = $element.height();Selement. css C height , h20);使用匈牙利命名法在变最前加$前缀，便于识别出jQuery对彖。 /糟糕var first = $(#first);var second 二 $ ( #second);var value = $first.val();建议在jQuery对象前加$前缀var $first = $(#first);var $second 二 $(，#sec()ncT),var value = $first.val();
4、使用Var链(单Var模式)将多条var语句合并为一条语句，我建议将未赋值的变最放到后面。var$first = $ (J #first，),Ssecond = $ (#seconcT ),value = $ first.val(),k = 3,cookiestring 二SOMECOOKIESPLEASE,1,J,myArray = ;请使用On，在新版jQuery中,更短的on(“click”)用来取代类似click()这样的函数。在之前的版 本中on()就是bind()。自从jQuery 1.7版本后，on()?附加事件处理程序的首选方法。 然而，出于一致性考虑，你可以简单的全部使用on
5、()方法。/糟糕$first click(function() $f irst. css (bo rder，,5 lpx solid red);$f irst. css ( color，, blue);)；$first hover(function() $f irst .css( b OTder,lpx solid Ted); )$first. on( click，, function() $firs t. css (borderlpx solid red); $first. css ( color，, blue);)$first. on( hover，, function() $first
6、.css( b order,lpx solid red);)精简 javascript-般来说，最好尽可能合并函数。/糟糕$first. cl ick (function () $first .css( b order,lpx solid red);$first. css ( color，, blue，);)；/建议$first. on( click5, function() $first.css(border，:lpx solid Ted,color，: blue)；)；链式操作jQuery实现方法的链式操作是非常容易的。下面利用这一点。 /糟糕$second.html(val ue);$s
7、econd. on ( cl ickJ , function () alert ( hello everybody);); , ,$second. fadein C slow);$second. animate(height: 120px, 500);建议$second.html(value);Ssecond.()n( click , function() alert (hello everybody，);) fadein ( slow). animate (height: 120px, 500);维持代码的可读性伴随着精简代码和使川链式的同时，可能带来代码的难以阅读。添加缩紧和换行能起到很好
8、 的效果。/糟糕$secondhtml(value);$second. on ( cl ick，、function () alert ( hello everybody，);). fadeln ( slow). animate (height: 120px , 500);/建议$second.html(value);Ssecond.()n C click, function () alert C hello everybody);).fa de Tn ( slow).animate (height / 120pxJ , 500);选择短路求值短路求值是一个从左到右求值的表达式，用& (逻辑与)
9、或| (逻辑或)操作符。 /糟糕function initVar($myVar) if(!$myVar) $myVar = $ ( selector);/建议function initVar($myVar) SmyVar = $myVar | | $ (，#selector，); 选择捷径精简代码的K-P-种方式是利用编码捷径。/糟糕if (collection. length ()if (collection, length) 繁重的操作中分离元素如果你打算对DOM元素做大量操作(连续设置多个属性或css样式)，建议首先分离元素 然麻在添加。/糟糕var$container = $(#con
10、tainer),$containerLi = $(#container li), $element = null;$element = $containerLi.first();/.许多复杂的操作/ better var$container = $(#container),$containerLi = $container. find(z，li/z),$element = null;$element = $containerLi.first().detach();许多复杂的操作$container.append($element);熟记技巧你可能对使用jQuery中的方法缺少经验，一定要查看的
11、文档，可能会冇个更好或更快的 方法来使用它。/糟糕$ ( #id ) data (key, value);建议(高效)$. data(，#id, key, value);使用子查询缓存的父元素正如前面所提到的，DOM遍历是一项昂贵的操作。典型做法是缓存父元素并在选择了元素 时重用这些缓存元素。/糟糕varScontainer = $ #container，), $containerLi = $ ficontainer ScontainerLiSpan 二 $ C container li span);建议(高效)var$container 二 $ C containerScontainerLi
12、 二 $contai ner. f i nd 1 i , $containerLiSpan= $containerLi. findspan);避免通用选择符将通用选择符放到后代选择符中，性能菲常糟糕。/糟糕$ ( container*);/建议$ (I container). children();避免隐式通用选择符通用选择符有时是隐式的，不容易发现。/糟糕$ ( someclass : radio,);建议$( someclass input:radio);优化选择符例如，Id选择符应该是唯-的，所以没有必要添加额外的选择符。 /糟糕$ ( div#myid，);$ ( div#footer
13、 a. myLink);/建议$ ( #myid);$ ( footer . myLink，);避免多个I D选择符在此强调，ID选择符应该是唯一的,不需要添加额外的选择符,更不需要多个后代ID选 择符。/糟糕$ ( ttouter #irmerJ);建议$ ( #inner，);坚持最新版本新版木通常更好：更轻量级，更高效。显然，你需要考虑你要支持的代码的兼容性。例如, 2.0版本不支持ie 6/7/8o摒弃弃用方法关注毎个新版木的废弃方法是非常重要的并尽量避免使用这些方法。/糟糕- live已经废弃$ ( #stuff) 1 ive ( click，, function () consol
14、e logC hooray);)；/建议$(#stuff) on (click, function () console logC hooray);)；注：此处可能不?应为live能实现实吋绑定，delegate或许更合适利用CDN谷歌的CND能保证选择离用户最近的缓存并迅速响应。(使用谷歌CND请白行搜索地址, 此处地址以不能使用，推荐jquery官网提供的CDN)。必要时组合jQuery和javascript原生代码如上所述，jQuery就是javascript,这意味着用jQuery能做的事情，同样可以用原生代 码来做。原生代码(或？vanilla)的可读性和可维护性可能不如jQuery,而且代码更长。但也意味着更高效(通常更接近底层代码可读性越并，性能越高，例如：汇编，当然需要更 强大的人才可以)。牢记没有任何框架能比原生代码更小，更轻，更高效(注：测试链接己 失效，可上网搜索测试代码)。鉴于vanilla和jQuery Z间的性能茅异，我强烈建议吸收两人的精华，使用（可能的话） 和iQuerv等价的原生代码。最后忠告最后，我记录这篇文章的目的
