Viết plugin cho jQuery của riêng mình

Viết plugin cho jQuery của riêng mình

jQuery là một javascript framework rất mạnh mẽ và phổ biến trong lập trình web. Một đặc tính giúp jQuery trở lên phổ biến và ưa chuộng là nó có khả năng viết thêm plugin dễ dàng cho phép người lập trình có thể tạo ra các function, tính năng của riêng mình. Trong bài viết này tôi sẽ hướng dẫn bạn cách viết một plugin cho riêng mình.

Phân loại

Tôi tạm chia plugin thành 2 loại theo cách sử dụng của chúng:

  • Hàm tiện ích: tính toán giá trị nào đó hoặc thực hiện nhiệm vụ nào đó. Nó giống như hàm tĩnh, dùng nhiều thì viết ra để tái sử dụng
  • Hàm xử lý DOM Node: nhận tập các Node mà đã được jQuery tìm ra và xử lý chúng

 

Viết một plugin đơn giản

Để tạo một plugin, đơn giản bạn thêm một thuộc tính kiểu function vào jQuery hoặc jQuery.fn:

(function( $ ) {
	$.myFunction = function() {

		// viết code vào đây

	};

	$.fn.myPlugin = function() {

		// viết phần code của plugin vào đây

	};
})( jQuery ); 

Ví dụ:

(function( $ ) {
	$.say = function(x) {
		alert(x);
	};

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

$.say("Hello the world!");
$(".abc").makeBlue().show();

 
Do loại hàm tiện ích viết tương đối đơn giản và cũng dễ hiểu nên tôi sẽ không nói nhiều về nó. Tôi sẽ trình bày chủ yếu về lại gắn thêm hàm vào jQuery.fn
Với ví dụ về hàm makeBlue ở trên this tương ứng với $(“.abc”) do đó bạn có thể gọi bất cứ hàm nào mà jQuery cung cấp như css, each, show, hide, animate …
 

Duy trì đặc tính gọi dạng chuỗi của jQuery

Một thế mạnh, điểm nổi trội của jQuery là nó được thiết kế để gọi theo dạng chuỗi. Hầu hết các hàm của jQuery trả về một tập các node đúng như thể hiện của nó. Vì vậy khi bạn viết plugin cho riêng mình, bạn cũng nên duy trì đặc điểm này. Để cài đặt, đơn giản bạn chỉ cần return lại this ở cuối hàm.
 

Truyền tham số

Khi viết hàm với jQuery, ta thường đị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. Trong trường hợp này ta sử dụng hàm có sẵn $.extend mà jQuery cung cấp:
$.extend nhận 2 hoặc nhiềm tham số, nó có nhiệm vụ thêm các method và các biến của tham số từ thứ 2 trở đi vào tham số thứ 1

defaults = { size: 3 };
options = { height: 6 };
var opts = $.extend(defaults, options)
// opts == defaults == { size: 3, height: 6 }
// options == { height: 6 };

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

defaults = { size: 3 };
options = { height: 6 };
var opts = $.extend( {}, defaults, options)
// opts == { size: 3, height: 6 }
// defaults == { size: 3 };
// options == { height: 6 };

Ví dụ đơn giản sử dụng $.extend:

(function ($) {

    $.fn.textHover = function (options) {

        var defaultVal = {

            Text: 'Your mouse is over',
            ForeColor: 'red',
            BackColor: 'gray'
        };

        var obj = $.extend(defaultVal, options);

        return this.each(function () {

            var selObject = $(this);

            var oldText = selObject.text();
            var oldBgColor = selObject.css("background-color");
            var oldColor = selObject.css("color");

            selObject.hover(function () {

                selObject.text(obj.Text);
                selObject.css("background-color", obj.BackColor);
                selObject.css("color", obj.ForeColor);
            },
            function () {
                selObject.text(oldText);
                selObject.css("background-color", oldBgColor);
                selObject.css("color", oldColor);
            }
            );
        });
    }
})(jQuery); 

 

Quy tắc đặt tên – Naming Convention

Có một vài quy tắc (luật bất thành văn) nhưng bạn nên theo:

  • Mỗi file js viết cho một plugin thôi
  • Đặt tên file: jquery.ten_plugin.js hoặc jquery.ten_namespace.ten_plugin.js nếu sợ bị trùng

 
Chúc các bạn thành công.

Khi trích dẫn bài viết từ tek.eten.vn, xin vui lòng ghi rõ nguồn. Chúng tôi sẽ rất cảm ơn bạn!