Một số lưu ý không nên làm với Jquery

Lâu quá rồi không được làm web, lên công ty thì làm wpf, wcf vớ vẫn ngứa tay chân nghi lại ngồi viết tut về js :p

Hẵn là ai đang sử dụng Javascript thuần được học từ trên nhà trường hay tự học đều thấy phấn khích khi dùng Jquery, mình phải thốt lên thật là ảo dịu, nó đã rút ngọn code js đáng kể.

Và theo kinh nghiệm đi làm của mình với lại đọc đọc tìm tim trên mạng thì có một số điểm không nên làm khi sử dụng Jquery:

Thay vì dùng $(document).ready(function(){ //Do something }); thì ta có thể đặt đoạn Script của mình ở cuối trang. HTML5 sẽ đồng bộ các attribute, những đoạn scripts lé được load và đồng bộ bởi webbrowser, nên nếu như chúng ta bỏ những đoạn script đầu trang sẽ làm delay sự tải DOM và làm cho sự load trang web của chúng ta chậm hơn.

Cũng không có gì sai lắm :p. Nhưng mà jquery đã hỗ trợ thì mình sử dụng :p :P
Ví dụ ta có 1 mảng , lọc ra những người có rank <=5
Thông thường thì ta sẽ làm như thế này

(function($) {

  var list = [
    { firstName: "abc", rank: 1 },
    { firstName: "ss", rank: 2 },
    { firstName: "a", rank: 3 },
    { firstName: "nsdl", rank: 4 },
    { firstName: "sds", rank: 5 },
    { firstName: "aass", rank: 6 },
    { firstName: "sddd", rank: 7 }
  ]

  // iterate through the cast and find zack and kelly

  var topFive = [];
  $.each(list function(idx, item) {
    if ( item.rank <= 5) {
      topFive.push(actor);
    }
  });

  console.log(topFive);

}(jQuery));

Basic quá :v

Nhưng ta có thể viết ngắn ngọn như sau :

(function($) {

   var list = [
     { firstName: "abc", rank: 1 },
    { firstName: "ss", rank: 2 },
    { firstName: "a", rank: 3 },
    { firstName: "nsdl", rank: 4 },
    { firstName: "sds", rank: 5 },
    { firstName: "aass", rank: 6 },
    { firstName: "sddd", rank: 7 }
  ]


  var topFive = $.map(list, function(item, idx) {
     if ( item.rank <= 5) {
      return item;
    }
  });

  console.log(topFive);

}(jQuery));

Giờ nhìn code nó gọn gàng hơn tí đúng hơm

Link tham khảo : http://api.jquery.com/jquery.map/

Nếu chỉ lấy thôi không chỉnh sửa thì ta có thể dụng $.Grep

 var topFive = $.grep(list, function(item) {
      if ( item.rank <= 5) {
      return item;
    }
  });

Tuyệt vời ông mặt trời :P

Có sẵn thì mình cứ ăn thôi hehe

Cũng không phải gì lớn lao hay vấn đề gì, nhưng ít sử dụng this trong trường hợp code phực tạp thì chúng ta có thể hạn chế được sự nhầm lẫn, thay vf dùng this thì ta gán cho nó vào một biến.

var obj = this;

Mình chỉ nêu một số điểm hay mắc phải, tất nhiên là còn rất nhiểu nữa nhưng chưa đủ điều kiện (time, công sức tiền bạc ... haha) để nêu lên. Hy vọng mọi người cùng bổ sung để improve skill của mình

Link blog wordpress của mình : https://azlogs.wordpress.com/2016/06/04/mot-so-luu-y-khong-nen-lam-voi-jquery/

Còn tiếp nhưng chưa biết khi nào