Hôm nay mình xin hướng dẫn cách viết 2 loại hàm chính Utitliy Method vàjQuery Wrapped Set Method.

Utility Method

VD:

	(function($){
	$.say = function(what) { alert('I say '+what); }
	})(jQuery);
	

Định nghĩa 1 utility function tên là say. “Say” function là property của jQuery Object – ($).

Nếu ta viết không có dấu $ trước hàm say, tức là ta định nghĩa 1 hàm global , tức là 1 hàm là property của Window object.

Bất cứ object nào được khai báo global trong javascript đều là property của Window object.

Vậy là xong 1 plugin jQuery đơn giản, chỉ cần gọi hàm bằng cách $.say(“Hi”) sẽ hiện lên 1 message: “I say Hi”

jQuery Wrapped Set Method

Thường thì ta viết plugin jQuery thì ta hay dùng hàm method jQuery wrapped set nhiều hơn.

Cấu trúc viết code như sau:

	(function($){
	$.fn.plugin_name = function(user_option)
	{
	/* Plugin Code Here */
	}
	})(jQuery);
	

Với plugin_name là tên hàm bạn cần định nghĩa.

Trong thân hàm, bạn có thể dùng từ khóa this.

Từ khóa this này đặc biệt ở chỗ this này không chỉ về 1 object mà là collection object được selector chọn hay còn gọi wrapped set.

VD:

	(function($){
	$.fn.makeItBlue = function()
	{
	return this.css('color','blue');
	}
	})(jQuery);
	

Thì hàm được gọi là: $(‘div’).makeItBlue();

thì tất cả các text thẻ div đều được có color là ‘blue’.

Bạn để ý các hàm đều có return 1 wrapped set, điều này đảm bảo cho chain method được hoạt động đúng.

VD chain method như sau.

	$(‘div’).makeItBlue().css(“color”,”red”);
	

Sau đây ta viết format trên khác đi 1 tý;

	(function($){
	$.fn.plugin_name = function(user_option)
	{
	return $(this).each(function()
	{
	/* Plugin Code Here */

	});
	}
	})(jQuery);
	

Format này y chang format trên, có điều nó cho ta cơ hội loop qua từng element trong wrapped set và thao tác từng element cụ thể, format này mình thấy nhiều người sài, mà nhiều người sài tức là best practice.

Lưu ý từ khóa this trong thân hàm each này chỉ đến 1 element cụ thể hay xác định nằm trong wrapped set.

Custom Parameter

Tiếp theo sẽ là định nghĩa tham số default và cho phép người dùng plugin có thể truyền tham số vào hàm , nếu user không truyền vào hay truyền thiếu thì các tham số có giá trị mặc định.

Thường khi các function được gọi đều cần truyền thao số, nhiều khi function cần 10 tham số thì user phải nhập đủ 10 tham số vào thì function mới work được. Nhưng với jQuery plugin, user chỉ cần nhập tham số nào mình cần muốn, còn các tham số không truyền vào thì ở giá trị default.

Sau đây là format code để làm điều đó.

	(function($){
	$.fn.plugin_name = function(user_setting)
	{
	var default =  {a:1,b:2};
	var settings = $.extend({},default , user_setting); //merge default parameter và user defined parameter
	return $(this).each(function()
	{
	/* Plugin Code Here */
	// Bạn có thể dùng settings để lấy các tham số
	});
	}
	})(jQuery);
	

Khi đó có thể gọi hàm của plugin như sau:

	$(“div”).plugin_name(); //hoặc
	$(“div”).plugin_name({a:3}); //hoặc
	$(“div”).plugin_name({a:3,a:4}); //hoặc
	

Mở rộng: mình xin nói thêm về hàm $.extend().

$.extend() nhận 2 hoặc nhiềm tham số, nó có nhiệm vụ add các method và các biến của tham số từ thứ 2 trở đi vào tham số thứ 1

VD:

		defaults = { size: 3 };
		options = { height: 6 };
		var opts = $.extend(defaults, options)
		// 'defaults' receives the methods and variables defined in 'options'
		// opts == defaults == { size: 3, height: 6 }
		// options == { height: 6 };
		

Người ta thường đặt tham số thứ nhất là {} để không bị ảnh hưởng tới tham số gốc .

		var opts = $.extend( {}, defaults, options)
		// 'opts' gets all methods and variables defined in 'defaults' and 'options',
		// neither of them get modified.
		// opts == { size: 3, height: 6 }
		// defaults == { size: 3 };
		// options == { height: 6 };
		

References:

http://asimilia.wordpress.com/2008/12/17/jquery-extend-confusion/

To BE CONTINUED…

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