上一篇
下一篇
jQuery对象的书写风格
作者:SMbey0nd 日期:2008-07-28
我们在用jQuery独一无二的对象链式操作的时候，通常会将很多事件操作步骤在一行代码中搞定。写的时候确实觉得既方便又节约代码量。可是这样做没有考虑到今后维护时所带来的困难。比如随便写这样一行代码：
程序代码
$('#Col_1 .up').mouseover(function(){
$(this).addClass('sBlue').find('a').html('<span>文字说明</span>').end().find('img').attr('alt','文字说明').end().find('input').val('文字说明');
});
写起来确实感觉很爽，一气呵成。但如果这种代码给别人看的话，会让人觉得眼冒金星，金光闪闪……
由此，推荐一种有适当格式的jQ代码风格：
程序代码
$('#Col_1 .up').mouseover(function(){
$(this).addClass('sBlue') //为当前元素增加sBlue的class
.find('a').html('<span>文字说明</span>').end() //将下级a的html重写，并重新定位到上级
.find('img').attr('alt','文字说明').end() //将下级img的alt重写，并重新定位到上级
.find('input').val('文字说明'); //将下级input的val重写
});
这样看起来舒服多了。
=================普通的分割线===================
总结4种情况：
1.对于一个对象3个以内的操作，建议直接写成一行：
程序代码
$('this').addClass("sBlue").focus();
2.对于多个对象的少量操作，建议每行一个对象，子元素加缩进：
程序代码
$('#Col_1 .up').mouseover(function(){
$(this).addClass('sBlue')
.find('a').html('<span>文字说明</span>').end()
.find('img').attr('alt','文字说明').end()
.find('input').val('文字说明');
});
3.对于一个对象的较多操作，建议每行一个，或者按功能区分：
程序代码
3.1每行一个事件：
$(this).addClass("sBlue")
.attr('src','http://')
.focus()
.filter("a")
.slideUp("slow")
.slideDown("fast")
.unbind("click")
.click(function(){
// do something …
});
程序代码
3.2按功能区分换行：
$(this).addClass("sBlue") //Class
.attr('src','http://').focus().filter("a") //属性事件
.slideUp("slow").slideDown("fast") //动画
.unbind("click").click(function(){ //绑定事件
// do something …
});
4.对于多个对象的大量操作，结合2、3条。
=================普通的分割线=================
注：本文收集整理自CSSRain。
感谢CSSRain给我们这些jQuery新手带来的实用性很强的jQuery指南，希望他能坚持下去将这个指南完成。
程序代码$('#Col_1 .up').mouseover(function(){
$(this).addClass('sBlue').find('a').html('<span>文字说明</span>').end().find('img').attr('alt','文字说明').end().find('input').val('文字说明');
});
写起来确实感觉很爽，一气呵成。但如果这种代码给别人看的话，会让人觉得眼冒金星，金光闪闪……
由此，推荐一种有适当格式的jQ代码风格：
程序代码$('#Col_1 .up').mouseover(function(){
$(this).addClass('sBlue') //为当前元素增加sBlue的class
.find('a').html('<span>文字说明</span>').end() //将下级a的html重写，并重新定位到上级
.find('img').attr('alt','文字说明').end() //将下级img的alt重写，并重新定位到上级
.find('input').val('文字说明'); //将下级input的val重写
});
这样看起来舒服多了。
=================普通的分割线===================
总结4种情况：
1.对于一个对象3个以内的操作，建议直接写成一行：
程序代码$('this').addClass("sBlue").focus();
2.对于多个对象的少量操作，建议每行一个对象，子元素加缩进：
程序代码$('#Col_1 .up').mouseover(function(){
$(this).addClass('sBlue')
.find('a').html('<span>文字说明</span>').end()
.find('img').attr('alt','文字说明').end()
.find('input').val('文字说明');
});
3.对于一个对象的较多操作，建议每行一个，或者按功能区分：
程序代码3.1每行一个事件：
$(this).addClass("sBlue")
.attr('src','http://')
.focus()
.filter("a")
.slideUp("slow")
.slideDown("fast")
.unbind("click")
.click(function(){
// do something …
});
程序代码3.2按功能区分换行：
$(this).addClass("sBlue") //Class
.attr('src','http://').focus().filter("a") //属性事件
.slideUp("slow").slideDown("fast") //动画
.unbind("click").click(function(){ //绑定事件
// do something …
});
4.对于多个对象的大量操作，结合2、3条。
=================普通的分割线=================
注：本文收集整理自CSSRain。
感谢CSSRain给我们这些jQuery新手带来的实用性很强的jQuery指南，希望他能坚持下去将这个指南完成。
文章来自: 
引用通告: 
Tags: 评论: 2 | 引用: 0 | 查看次数: -
SMbey0nd[2008-07-29 10:55 PM | 
]
发表评论