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

Phuc Pham viết ngày 04/07/2016

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:

1. Không sử dụng document ready

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.

2. Hạn chế dùng vòng lặp

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

3. Không sử dụng this

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

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Phuc Pham

6 bài viết.
3 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
7 3
Tương lai của CSharp Ngày nay, C không chỉ là một ngôn ngữ phát triển trên Windows mà nó có thể sử dụng để xây dựng web ap, mobile apps bao gồm cả...
Phuc Pham viết 2 năm trước
7 3
White
3 1
Linq to Sql cho phép ta query và modify data của Sql Server sử dụng cú pháp Linq. Entity framework là một ORM (Objectrelational mapping), cho phép ...
Phuc Pham viết 2 năm trước
3 1
White
3 5
Thực ra thế này, tuần này mình optimize về phần API tìm kiếm và đến giờ vẫn chưa xong =)), và một số kinh nghiệm mình muốn chia sẽ khi optimize sql...
Phuc Pham viết 2 năm trước
3 5
Bài viết liên quan
White
17 10
Lời nói đầu Tuần trước mình đã bắt tay vào làm thử app theo ý tưởng clone chương trình "Ai là triệu phú" trên TV, với các chức năng cơ bản, chỉ sử...
Andy Crush viết hơn 2 năm trước
17 10
Male avatar
22 5
Trước khi đến với bài viết mời bà con cô bác thưởng thức tuyệt phẩm Ngày không em (Ảnh)Như mọi người đã biết, jQuery là một thư viện javascript rấ...
Cận viết 2 năm trước
22 5
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
6 bài viết.
3 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!