jQuery编程技巧

标签：function   input   前缀   val   隐式   精简   css   赋值   one   

1.将会重用的元素缓存

//bad

var h = $(‘#hello‘).height()；

$(‘#hello‘).css(‘height‘，h-20)；

//good

var $hello = $(‘#hello‘)，

　　h = $hello.height()；

$hello.css(‘height‘，h-20)；

2.尽量少设置全局变量，尽量在函数作用域内设置变量

3.在jQuery对象前加$前缀，便于识别

//bad

var hello = $(‘#hello‘)，

　　value = hello.val()；

//good

var $hello = $(‘#hello‘)，

　　value = $hello.val()；

4.将多条var语句合并成一条var语句，将未赋值的变量放到后面

//good

var $hello = $(‘#hello‘)，

　　value = $hello.val()，

　　k = 3，

　　i，

　　j，

　　myArr = []；

5.统一使用on()方法

//bad

$hello.click(function(){

　　$hello.css(‘border‘，‘1px solid red‘)；

　　$hello.css(‘color‘，‘blue‘)；

})；

$hello.hover(function(){

　　$hello.css(‘border‘，‘1px solid red‘)；

})；

//good

$hello.on(‘click‘，function(){　

　　$hello.css(‘border‘，‘1px solid red‘)；

　　$hello.css(‘color‘，‘blue‘)；

})；

$hello.on(‘hover‘，function(){

　　$hello.css(‘border‘，‘1px solid red‘)；

})；

6.精简js

//bad

$hello.click(function(){

　　$hello.css(‘border‘，‘1px solid red‘)；

　　$hello.css(‘color‘，‘blue‘)；

})；

//good

$hello.on(function(){

　　$hello.css({

　　　　‘border‘：‘1px solid red‘，

　　　　‘color‘：‘blue‘

　　})；

})；

7.链式操作

//bad

$hello.html(value)；

$hello.on(‘click‘，function(){

　　alert(‘hello everyone‘)；

})；

$hello.fadeIn(‘slow‘)；

$hello.animate({height:‘120px‘}，500)；

//good

$hello.html(value)；

$hello.on(‘click‘，function(){

　　alert(‘hello everyone‘)；

}).fadeIn(‘slow‘).animate({height:‘120px‘}，500)；

8.利用锁进和换行提高代码可读性

//bad

$hello.html(value)；

$hello.on(‘click‘，function(){

　　alert(‘hello everyone‘)；

}).fadeIn(‘slow‘).animate({height:‘120px‘}，500)；

//good

$hello.html(value)；

$hello

　　.on(‘click‘，function(){alert(‘hello everyone‘)；})

　　.fadeIn(‘slow‘)

　　.animate({height:‘120px‘}，500)；

9.使用短路求值，短路求值是一个从左到右的表达式，用&&(逻辑与)或||(逻辑或)操作符

//bad

function init($myElement){

　　if(!$myElement){

　　　　$myElement = $(‘#myElement‘)；

　　}

}

//good

function init($myElement){

　　$myElement = $myElement || $(‘#myElement‘)；

}

10.选择捷径

//bad

if(myArr.length > 0){}

//good

if(myArr.length){}

11.缓存父元素并在选择子元素时重用这些已缓存的父元素

//bad

var $container = $(‘#container‘)，

　　$containerLi = $(‘#container li‘)，

　　$containerLiSpan = $(‘#container li span‘)；

//good

var $container = $(‘#container‘)，

　　$containerLi = $(‘#container‘).find(‘li‘)，

　　$containerLiSpan = $containerLi.find(‘span‘)；

12.尽量少用通用选择符(*)

13.避免隐式通用选择符

//bad

$(‘.hello :radio‘)

//good

$(‘.hello input:radio‘)

14.优化选择符

jQuery编程技巧

标签：function   input   前缀   val   隐式   精简   css   赋值   one   

原文地址：http://www.cnblogs.com/chuanzhi946/p/6476911.html