Tạo đối tượng Module cho việc tổ chức, quản lý jQuery code


Tạo đối tượng Module cho việc tổ chức, quản lý jQuery code

Hầu hết dev làm việc nhiều với javascript đều biết tới thư việc jQuery. Việc sử dụng thư viện này trong các dự án thực sự hữu ích, nó giảm thiểu khá nhiều thời gian cho việc thao tác trên DOM, viết sự kiện, xây dựng những tính năng

Đối với những dự án không yêu cầu quá nhiều hiệu ứng, xử lý jQuery thì cách viết không phải là vấn đề, developer có thể viết bất kỳ cách nào mình muốn. Nhưng với những dự án lớn thì việc này quả thực là 1 vấn đề nghiêm trọng, bản thân tôi cũng đã từng đối mặt với việc này trong một vài dự án (Vd: Mạng xã hội, Hệ thống quản lý dự án, …)

Chúng ta cùng xem 1 ví dụ về cách viết jQuery code như sau:

$( document ).ready(function() {
  $( "#myFeature li" ).append("<a>Look</a>").click(function() {
    var item = $( this );
    var div = item.find( "div" );
        div.load( "foo.php?item=" + item.attr( "id" ), function() {
            div.show();
            item.siblings().find( "div" ).hide();
        });
   });
});

Đoạn code trên ko có vấn đề gì, vấn đề ở đây là, nếu chúng ta có 5 – 10 hay thậm chỉ 10 – 50 xử lý khác nhau kiểu khác nhau (append 1 element khi click, dùng ajax method để gọi 1 danh sách dữ liệu, hay ấn tổ hợp nào đó thực thi 1 tác vụ, …)

Do đó chúng ta nên sử dụng 1 phương pháp để quản lý tốt hơn những đoạn code này.

Tôi sẽ dùng Object thuần để xử lý việc này

// Tạo 1 Object, định nghĩa các phương thức cần thiết
var Foo = {
// Tôi khai báo phương thức init để gọi nó trước tiên
init: function() {
  $( "#body" ).click( Foo.changeStyle );
  this.slideCb();
},
changeStyle: function( event ) {
  $(this).hasClass('old') && $(this).toggleClass('old');
},
slideCb: function() { ... },
unicornCb: function() { ... }
};
// Gọi phương thức init khi DOM ready.
$( document ).ready( Foo.init.call(Foo) );

Như vậy các bạn có thể thấy việc khó quản lý hầu như đã đc giải quyết, chỉ còn lại là cách bạn viết sao cho hợp lý

Nếu bạn thấy việc dùng Object thuần ko đảm bảo hết và có thể vẫn làm bạn mất thời gian cho việc khai báo, định nghĩa thì có thể tạo ra 1 Class, đặt ra các quy tắc, tự động hóa việc thực thi phương thức.
Bạn có thể xem qua Module.js tôi sử dụng. Vd:

new Module({
init: function(){
// chạy trước hết tất cả các phương thức khác ....
},
_privateVar: true,
commentAction: function(){ ... },
calculateAction: function(){ ... },
toggleAction: function(){ ... },
});

Tạo đối tượng Module cho việc tổ chức, quản lý jQuery code

You May Also Like

Leave a Reply

Be the First to Comment!

Notify of
avatar