仿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'); })