仿JQuery输写高效JSLite代码的一些技巧
讨论jQuery和javascript性能的文章并不罕见。然而,我计划根据他人对jQuery总结的一些速度方面的技巧和一些建议,来教你提升你的JSLite和javascript代码。好的代码会带来速度的提升。快速渲染和响应意味着更好的用户体验。
首先,在脑子里牢牢记住JSLite就是javascript。这意味着我们应该采取相同的编码惯例,风格指南和最佳实践。
首先,如果你是一个javascript新手,没有用过jQuery我建议您阅读最好先阅读官方文档的语法介绍,这是一篇高质量的javascript教程,表示您已经会jQuery用过一段时间了。
当你准备使用JSLite,我强烈建议你遵循下面这些指南:
缓存变量
DOM遍历是昂贵的,所以尽量将会重用的元素缓存。
//糟糕 h=$('#element').height(); $('#element').css('height',h-20); //建议 $element=$('#element'); h=$element.height(); $element.css('height',h-20);
避免全局变量
JSLite与javascript一样,一般来说,最好确保你的变量在函数作用域内。
//糟糕 $element=$('#element'); h=$element.height(); $element.css('height',h-20); //建议 var$element=$('#element'); varh=$element.height(); $element.css('height',h-20);
使用匈牙利命名法
在变量前加$前缀,便于识别出JSLite对象。
//糟糕 varfirst=$('#first'); varsecond=$('#second'); varvalue=$first.val(); //建议-在JSLite对象前加$前缀 var$first=$('#first'); var$second=$('#second'), varvalue=$first.val();
使用var链(单var模式)
将多条var语句合并为一条语句,我建议将未赋值的变量放到后面。
var$first=$('#first'), $second=$('#second'), value=$first.val(), k=3, cookiestring='SOMECOOKIESPLEASE', i, j, myArray={};
请使用on
在新版JSLite中,更短的on("click")用来取代类似click()这样的函数。在之前的版本中on()就是bind()。on()附加事件处理程序的首选方法。然而,出于一致性考虑,你可以简单的全部使用on()方法。
//糟糕 $first.click(function(){ $first.css('border','1pxsolidred'); $first.css('color','blue'); });
$first.hover(function(){ $first.css('border','1pxsolidred'); }) //建议 $first.on('click',function(){ $first.css('border','1pxsolidred'); $first.css('color','blue'); })
$first.on('hover',function(){ $first.css('border','1pxsolidred'); })