Ẩn đối tượng javascript global với Jquery Secret

Giới thiệu

Global Objects trong javascript là những cơn ác mộng thực sự

Những dữ liệu toàn cục như biến hay các object trong javascript có thể được truy xuất dễ dàng bởi bất kỳ đoạn script nào trên cùng trang. Rất dễ để ghi đè (overwritten) chúng, đặc biệt là khi bạn kết hợp chúng cùng với những đoạn code khác. Chưa kể việc tổ chức chúng theo dạng khai báo từng biến, hay phương thức một cách rời rạc thì khi bảo trì, nâng cấp code..., chúng thực sự là cơn ác mộng của bất kỳ lập trình viên nào. Tham khảo thêm về vấn đề này trong 1 bài viết trên yuiblog của tác giả Douglas Crockford.

Để khắc phục vấn đề này, chúng ta có thể wrap tất cả chúng lại bằng cách sử dụng 1 namespace

var global_config = {
    lang: 'vn',
    urlImage: 'http://mysite.com/api/images',
    authToken: 'HNJS/o110H9TIyOkl+dV7UPEjKWeJBNNefCpPn8XnW/Aw=',
    getImages: function() {
        // Code get image
    },
    ....
}

Trông có vẻ tốt hơn, nhưng thực tế thì chưa hẳn là tốt nhất. Dữ liệu trên vẫn khá dễ dàng để truy cập và thay đổi.

Trong các project vừa và nhỏ, bạn có thể tổng hợp tất cả code của bạn trong 1 hàm nặc danh hoặc phương thức $.document.ready của jquery, code của bạn vẫn chạy rất hoàn hảo

// Self invoking anonymous function
(function(){
     // Code here
}());

// Hoặc sử dụng phương thức document ready của jquery
$(function(){
    // Code here
});

Tuy nhiên, trong các project lớn, khi bạn muốn phân nhỏ code thành các module riêng biệt trong các file khác nhau thì phương thức này không còn phù hợp nữa. Và đây chính là lúc mà Jquery Secret toả sáng.

Demo

• Bạn có thể xem demo tại đây
• Và download mã nguồn tại trên Github

Yêu cầu

• Jquery version 1.3 trở lên

Trình duyệt tương thích

• Firefox 2.0+
• Internet Explorer 6+
• Safari 3+
• Opera 10.6+
• Chrome 8+

Cài đặt

• Hãy chắc chắn là bạn đang sử dụng 1 DOCTYPE theo chuẩn W3C
• Include các file js: jquery.js, jquery.secret.js

Sử dụng

Lưu trứ dữ liệu

// 'val' có thể là 1 chuỗi, số int, array, hash table hoặc objects
$.secret( 'in', 'secretName', val );

// hoặc 1 function
$.secret( 'in', 'secretName', function( arg1, arg2, arg3 ){
  // Your code
});

Lấy dữ liệu

$.secret( 'out', 'secretName' );

Gọi hàm

$.secret( 'call', 'secretName', [ arg1, arg2, arg3 ]);
// or
$.secret( 'call', 'secretName', arg );

Xoá dữ liệu

$.secret( 'clear', 'secretName' );

Tiến hành chuyển đoạn mã config đầu trang sử dụng jquery secret

Lưu dữ liệu

$.secret('in', 'lang', 'vn');

Các method in, out, call, clear là các methods dây chuyền

$.secret( 'in', 'urlImage', 'http://mysite.com/api/images' )
  .secret( 'in', 'authToken', 'HNJS/o110H9TIyOkl+dV7UPEjKWeJBNNefCpPn8XnW/Aw=' )
  .secret( 'call', 'getImages', $( '#img-slider' ))
  .secret( 'clear', 'something' );

Bạn có thể sử dụng lấy dữ liệu ở bất cứ đâu

var lang = $.secret('out', 'lang');

Dữ liệu bạn lưu có thể là 1 string

$.secret( 'in', 'username', 'Alvin' );

hoặc 1 số

$.secret( 'in', 'age', 26 );

hoặc 1 mảng

$.secret( 'in', 'skills', ['html', 'javascript', 'css', 'php'] );

hoặc 1 object

$.secret( 'in', 'authorInfo', {
     name: 'Alvin',
     age: 26,
     city: 'Hà Nội',
     experiences: {
          php: '2 năm',
          javascript: '1.5 năm'
     }
});

thậm chí là 1 function

$.secret('in', 'getImages', function( $slide-wrapper ) {
    // your code
});

về cơ bản là bạn có thể lưu bất kỳ thứ gì bạn muốn

Namespaces

$.secret hỗ trợ 1 lớp namespace. Với những project lớn thì bạn nên phân nhỏ code ra các modules khác nhau, ví dụ:

// hàm lấy ảnh từ api sig của flickr
$.secret( 'in', 'FLICKR.apiSig', function( secret, extraParams ){
   // 'this.defaultParams' tương ứng với 'FLICKR.defaultParams'
   return md5( secret + this.defaultParams.concat( extraParams.split( "&")).sort().join('').replace( '=', '' ));
});

// Hàm tìm kiếm ảnh từ google search
$.secret( 'in', 'GOOGLE.searchImage', function( args ){
   // do other stuffs here
}

// các code test
$.secret( 'in', 'SANDBOX.moduleName', function( args ){
  // your code
}

Bài viết được tham khảo từ Dreamlab blog. Hanoijs dịch và hiệu chỉnh