Thuật toán chung để rút gọn Code trong Jquery

Vấn đề chung trong giới lập trình chúng ta là làm sao rụt gọn được code . Vậy làm sao , thế nào để làm điều đó . Dựa vào một số kinh nghiệm mình đã có , mình có thể trình bày như sau :

1 ) Thứ nhất : Nếu bạn viết 1 gallery ảnh với Jquery , bạn sẽ thấy 1 điều là code của chúng ta gồm 3 phần : code HTML  , code CSS , code Jquery . Thường code HTML như sau :

<div class='demo'>
<img1 /> <img2 /> <img3 /> ...
</div>

Và code Jquery , nếu ta viết theo lối thường thuật toán của ta sẽ như vầy : Khi click vào img 1 thì load content liên quan đến img1 , khi click vào img2 thì load content liên quan đến img2 . cứ thế code của chúng ta sẽ rất dài .

– Đọc 1 số source trên mạng, những người khác viết theo lối chạy vòng for hết các ảnh và add class tương ứng vào . Ví dụ :

var i=0;
this.each(function(){
$(this).addClass('img'+i);
i++;
});

Và khi click vào 1 img thì gọi class của content tương ứng . Cách này code xem ra ngắn hơn cách trên , nhưng vẫn còn dài hơn cách này . Đó là : Ví dụ ta có 5 ảnh và 5 content . Thì ở sự kiện click vào ảnh ta gọi hạm index() để biết vị trí của tấm ảnh , và đặt vị trí đó vào content . Thế là content có vị trí tương ứng sẽ được load vào . Bằng cách này , với gallery 100 ảnh , hay 1000 ảnh ta cũng không quan tâm , chỉ cần bảo đảm , 1 ảnh thì 1 content tương ứng , code mẫu :

$("#menu-top li").click(function(){
if($('.dropdown:eq('+$(this).index()+')').css('display')=='none')
{
$('.dropdown').hide();
$('.dropdown:eq('+$(this).index()+')').slideDown({queue:false,duration: 500, easing: 'backout'});
open_dropdown=1;
temp_dropdown=$(this);
setTimeout(function() {
close_topDropdown($('.dropdown:eq('+$(this).index()+')'));
}, 30000);
}
else
{
close_topDropdown($('.dropdown:eq('+$(this).index()+')'));
}
});

2 ) Hãy tận dụng hết khả năng của các hàm find(), filter(), next(), prev(), parent(), children() . Đây là các hướng đi basic trong DOM . Nhưng ngoài ra , hãy tận dụng các hàm cao hơn như : prevAll() , prevUntil() , siblings() , nextAll() , nextUntil() , parents() . Hãy thử dùng các hàm , và bạn sẽ thấy dùng nó , code của các bạn sẽ rất ngắn gọn và đẹp hơn bao giờ hết (xem chi tiết các hàm tại đây : http://api.jquery.com/category/traversing/tree-traversal ) .

Giải được bài toán con đường đi ngắn nhất là trước tiên , sau đó hãy đi thử từng bước ^^ .

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s