Hôm nay mình xin giới thiệu các bạn 1 tutorial hướng dẫn viết jQuery plugin.

Tại sao phải viết jQuery plugin:

• Mặc dù API của jQuery đã cung cấp đầy đủ method cho bạn sài nhưng bạn có một lố operation được thực thi 1 cách chung nhất để có thể sài lại sau này. (tính tái sử dụng reuseability)
• Bạn là tín đồ jQuery và muốn viết plugin để dễ dàng sau này duy trì code, tăng tính tái sử dụng và tính mở rộng, và tách biệt phần presentation và operation

Khi bạn nào từng viết jQuery plugin, hay đã từng xem code jQuery plugin của các tác giả trên mạng thì nhận thấy có rất nhiều cách viết. Nhưng trong tutorial này mình xin giới thiệu 1 số cách cơ bản và phổ biến đủ giải quyết trong mọi trường hợp.

Ok, let’s go.

Khi viết plugin bạn phải tuân theo 1 số bước sau đây.

B1: Name convetion

• Mỗi file js viết cho chỉ duy nhất 1 plugin thôi.
• Các file này có tên theo format sau: jquery.ten_plugin.js

ten_plugin : có thể trùng tên với các plugin của các tác giả khác, bạn nên kèm theo 1 namespace để khỏi bị trùng, theo format sau: jquery.name_space.ten_plugin.js

Nếu bạn không theo các convention cách đặt tên trên cũng ok, không sao cả, code vẫn chạy được. Nhưng cách tên là cách đặt khuyến khích của cộng đồng jQuery, để plugin này có thể public cho mọi người cùng sài và tránh bị đụng độ code có sẵn sau này.
B2: Mình muốn quy ước 2 vocabularies trong tutorial này:

• Utility Method (hay Utility Function)(hàm tiện ích): vd có 1 utility function tên là ABC, thì khi gọi hàm như sau : $.ABC()
  • Lưu ý: $ chẳng qua là alias, hay tên 1 function mà thôi. $ tương đương với hàm có tên jQuery. Viết đúng chữ hoa thường. Bạn không tin thì check 2 hàm sau đây trong cửa sổ console của firebug trong trang đã jQuerify mà xem:
    • alert($)
    • alert(jQuery)

    VD hàm : $.trim(value): trả về chuỗi đã xóa các ký tự khoảng trắng ở 2 đầu text truyền vào.

• jQuery Wrapped Set Method : Wrapped set: bạn tạm hiểu là 1 tập hợp elements trả về từ jQuery Wrapped Set Method VD: $(“a”) : trả về “wrapped set” các element tag <a> trong cây DOM. $(“a”).css("color","red") : method css sẽ apply lên các “wrapped set” trả về từ selector $(“a”).

B3: bắt đầu viết plugin

(function($){
	//
	// các hàm của plugin viết chỗ này.
	//
	})(jQuery);

Giải thích:

• Vì lý do jQuery dùng $ là alias cho tên hàm jQuery.

Cho nên có thể đụng 1 số framework javascript khác trên mạng mà 1 site có thể sài 2 hay nhiều framework, các framework lại khoái sài $ làm tên alias cho main method của mình: VD Prototype.

• Cho nên trách đụng độ $ người ta viết như trên. Sau đây là giải thích step-by-step
  • Phần thứ 1: (function($) { /* function body here */ }) Có nghĩa là định nghĩa 1 hàm ko có tên, và truyền 1 tham số đầu vào có tên là $.
    Nguyên đống đó trả về 1 cái gọi là anonymous function.
    Ví lý đó tên biến local $ trong anonymous function sẽ có quyền ưu tiên cao hơn và nó là override bất kỳ biến nào có tên là $ ở toàn cục.
  • Phần thứ 2: (jQuery) Thực hiện 1 hành động gọi hàm anonymous function trên và truyền vào hàm có tên là jQuery.
    Điều này dẫn đến kể quả cuối cùng, biến local $ trong thân hàm anonymous function có nghĩa là đang tham chiếu đến hàm jQuery.
    Kết quả: => tránh đụng độ code với framework javascript khác.

To BE CONTINUED…

HCM, 19/05/2010 at 2hAM
Editor: Đặng Thanh Tùng