Tìm hiểu cách viết JQuery plugin

jQuery là một Javascript Framework, là một thư viện Javascript hỗ trợ các nhà lập trình web tạo ra các tương tác trên website một cách nhanh nhất và hiệu quả nhất. jQuery được khởi xướng bởi John Resig vào năm 2006, jQuery có mã nguồn mở và hoàn toàn miễn phí. jQuery có một cộng đồng sử dụng đông đảo và được rất nhiều lập trình tham gia hoàn thiện, phát triển và viết Plugin.

Hiện nay có rất nhiều jQuery Plugin được tạo ra bởi các lập trình viên trên thế giới, và chia sẽ cho mọi người thông qua mạng Internet. Và bạn hoàn toàn có thể viết một plugin để phục vụ cho nhu cầu của bản thân mình và public cho cộng đồng cùng sử dụng.

Đây là cú pháp cơ bản để tạo một jQuery Plugin.

$.fn.your_function_name = function() {
    //your code write here
}

Giả sử chúng ta có một site html đơn giản như sau:

<p> This is example jQuery Plugin</p>
<a id='1st_link' href='viblo.framgia.com'>Viblo Framgia</a>
<a href='www.facebook.com'>Facebook</a>

Và chúng ta muốn mỗi khi di chuột qua thẻ <a> đầu tiên thì màu chữ và cỡ chữ của nó sẽ thay đổi, khi di chuột ra ngoài thì màu chữ và cỡ chữ trở về như ban đầu. Chúng ta có thể viết code javascripts như sau:

$('#1st_link').mouseover(function(){
	$(this).css('color', 'red');
	$(this).css('font-size', '30px');
});
$('#1st_link').mouseout(function(){
	$(this).css('color', 'white');
	$(this).css('font-size', '15px');
});

Nhưng chúng ta cũng có thể viết một plugin để làm việc đó.

$.fn.highlight_link = function() {
	this.mouseover(function(){
		$(this).css('color', 'red');
		$(this).css('font-size', '30px');
	});
	this.mouseout(function(){
		$(this).css('color', 'white');
		$(this).css('font-size', '15px');
	});
}

Trong đó:

• $$là viết tắt của jQuery
• fn là viết tắt của prototype

Nếu viết đầy đủ ra sẽ thế này

window.jQuery.prototype.highlight_link = function(){};

Để sử dụng plugin trên ta gọi như sau:

$('#1st_link').highlight_link();

Plugin của chúng ta đã hoạt động. Nhưng một trong những tính năng quan trọng của jQuery là chuỗi, nó cho phép bạn liên kết nhiều hành động liên tiếp vào một selector. Điều này được thực hiện nhờ tất cả các phương thức của đối tượng jQuery đều trả về đối tượng jQuery gốc (có một số ngoại lệ: .awidth () được gọi là không có tham số trả về chiều rộng của phần tử được lựa chọn, và không thể kết nối). Để phương thức plugin trên có thể kết nối chúng ta thêm dòng mã trả về đối tượng jQuery gốc như sau:

$.fn.highlight_link = function() {
	this.mouseover(function(){
		...
	});
	this.mouseout(function(){
		...
	});
    return this;
}

Các biến là rất phổ biến giữa các thư viện JavaScript, và khi sử dụng thư viện javascript ta có thể sử dụng nhiều thư viện khác nhau, kí tự thường được chọn làm đại diễn cho nhiều thư viện vì vậy để đảm bảo rằng $$ đại diện cho thư viện jQuery khi viết plugin, ta viết lại đoạn code trên như sau:

(function ( $ ) {
    $.fn.highlight_link = function() {
        this.mouseover(function(){
            ...
        });
        this.mouseout(function(){
            ...
        });
        return this;
    }
}( jQuery ));

Bây giờ thì plugin của chúng ta đã tạm ổn. Nhưng một nhu cầu mới xuất hiện, đó là làm sao để tham số hóa cho nó. Hiện tại plugin của chúng ta đang hoạt động một cách cứng nhắc, màu chữ của selector gọi đến nó chỉ được đổi sang màu đỏ khi di chuyển chuột qua và cỡ chữ là 30px. Điều này không có tính áp dụng trong thực tiễn. Chúng ta cần làm cho plugin linh hoạt hơn bằng cách làm cho nó chấp nhận các tham số người dùng truyền vào. Đầu tiên ta thêm vào các tham số mặc định như sau:

(function ( $ ) {
    $.fn.highlight_link = function() {
    	var defaults = {
        	mouseover_color: 'red',
            mouseover_size: '30px',
            mouseout_color: 'white',
            mouseout_size: '15px'
        };
        var settings = defaults;
        this.mouseover(function(){
            $(this).css('color', settings.mouseover_color);
            $(this).css('font-size', settings.mouseover_size);
        });
        this.mouseout(function(){
            $(this).css('color', settings.mouseout_color);
            $(this).css('font-size', settings.mouseout_size);
        });
        return this;
    }
}( jQuery ));

Sau đó là chấp nhận các tham số người dùng truyền vào.

(function ( $ ) {
    $.fn.highlight_link = function(options) {
    	var defaults = {
        	mouseover_color: 'red',
            mouseover_size: '30px',
            mouseout_color: 'white',
            mouseout_size: '15px'
        };
        var settings = $.extend(defaults, options);
        this.mouseover(function(){
            $(this).css('color', settings.mouseover_color);
            $(this).css('font-size', settings.mouseover_size);
        });
        this.mouseout(function(){
            $(this).css('color', settings.mouseout_color);
            $(this).css('font-size', settings.mouseout_size);
        });
        return this;
    }
}( jQuery ));

Giờ đây ta có thể sử dụng hàm highlight_link với tham số mặc định hoặc truyền vào các tham số tùy chỉnh bằng cách gọi như sau:

$('#1st_link').highlight_link({
	mouseover_color: '#FFFF00',
    mouseover_size: '50px',
    mouseout_color: '#333333',
    mouseout_size: '15px'});

Tham khảo https://learn.jquery.com/plugins/basic-plugin-creation/