Plugins JQuery

JQuery là một Javascript Framework rất mạnh mẽ và phổ biến trong lập trình web, nó 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. jQuery được khởi xướng bởi John Resig (hiện là trưởng dự án của Mozzila) 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.

jQuery Plugin đơn giản chỉ là một hàm (method) được thừa kế đối tượng nguyên mẫu của jQuery. Có thể tham khảo các plugin có sẵn như .fadeOut() hay .addClass(). Hiện nay, có hàng ngàn plugin jQuery đã được viết, hãy bắt đầu tự tạo một plugin jQuery cho riêng mình.

Trước khi bắt đầu, chúng ta cần hiểu một chút về cách jQuery hoạt động. Nhìn đọan mã dưới đây.

   $("a").css("color", "red");

Đây là đoạn mã đơn giản của jQuery, có thể hiểu như sau: Khi bạn dùng hàm $ để chọn lấy các giá trị, nó trả về một đối tượng jQuery (jQuery Object) đối tượng này chứa tất cả các hàm bạn sẽ dùng (.onclick(), .css(), .hide(), …) để có thể tác động đến những giá trị bạn đã chọn trước đó. Các hàm như vậy được gọi là hàm đối tượng.

Ngoài ra, chúng ta còn có hàm tiện ích. Ví dụ như, .trim()_ được sử dụng để loại bỏ các ký tự khoảng trắng ở hai đầu chuỗi ký tư. Hàm tiện ích trực thuộc _ bạn có thể gọi nó ở bất kỳ nơi nào bạn thích.

Tạo một Plugins

Để tạo một plugins, các bạn chỉ cần thêm một thuộc tính kiểu function vào JQuery hoặc JQuery.fn. Cấu trúc như sau:

(function($){
    $.myFunction = function() {
        // input code
    };

    $.fn.myPlugin = function() {
        // input code of plugin
    }
}(JQuery));

Trong đó:

• $.fn là cố định
• myPlugin là tên hàm bạn cần viết.

Một ví dụ đơn giản như sau:

Chúng ta muốn dùng plugin để đổi màu các giá trị được chọn thành màu xanh (blue). Các bước để thực hiện là tạo một hàm với tên makeBlue() trực thuộc đối tượng $.fn. Như đoạn mã duới đây.

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

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

$.say("Hello framgia Viet Nam");
$("a").makeBlue().show();

Với ví dụ trên, khi phương thức makeBlue() được gọi đến trong JQuery, tất cả các thẻ link trong trang web sẽ chuyển sang màu xanh.

Chú ý: Câu hỏi đặt ra là vì sao chúng ta sử dụng phương thức this.css()_ mà không phải là _(this)? Bởi vì hàm makeBlue() chúng ta vừa tạo ở trên và .css() cùng thuộc một đối tượng. Vì vậy, trong hàm makeBlue(), chúng ta có thể gọi đến bất kỳ hàm nào mà JQuery cung cấp như css, show, hide, each, animate, …

Một vài đặc điểm và cách sử dụng Plugin jQuery Gọi nhanh các plugin theo chuỗi.

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. Để sử dụng được đặc điểm này trong hàm bạn viết, bạn chỉ cần gọi return ở cuối hàm.

Cụ thể như sau:

$.fn.greenify = function() {
    this.css("color", "green");
    return this;
}
$("a").greenify().addClass("greenified");

Chú ý: Nên nhớ rằng, một vài plugin không trả về đối tượng mà trả về một mảng, số, chuỗi,.. Vì vậy, trong các trường hợp đó thì chúng ta không thể sử dụng cách trên. Một số hàm không cho kết quả là một đối tượng điển hình như: .trim(), .width(), …..

Phạm vi và bí danh $

Trong khi sử dụng thư viện Javascript, chúng ta có thể sử dụng nhiều thư viện khác nhau, và kí tự $ thường được chọn làm đại diện cho nhiều thư viện vì vậy để có thể sử dụng được bí danh** $** trong plugin, chúng ta cần đặt toàn bộ code vào giữa căp dấu.

(function($){

}(JQuery));

Ngoài ra, chúng ta cũng có thể sử dụng với các biển riêng tư. Ví dụ như sau:

(function($) {
    var shade = "#556b2f";

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

Giảm thiếu Plugin

Có khi nào bạn nghĩ, plugin bạn viết ra sẽ bị trùng tên với plugin của người khác viết? Điều này không phải là không thể xảy ra mà còn xảy ra rất phổ biến. Hãy nhìn đoạn code dưới đây:

(function($) {

    $.fn.openPopup = function() {
        // Open popup code.
    };

    $.fn.closePopup = function() {
        // Close popup code.
    };
}(JQuery));

Thay vì sử dụng riêng biệt hai hàm như trên, chúng ta có thể viết lại ngắn gọn hơn mà chức năng không hề thay đổi.

(function($) {

    $.fn.openPopup = function() {
        if (action = "open") {
            // Open popup code.
        }

        if (action = "close") {
            // Close popup code.
        }
    };

}(JQuery));

Sử dụng phương thức each()

Một đối tượng jQuery bao gồm một hoặc nhiều elements. Vì vậy, muốn duyệt qua từng giá trị và thao tác trên mỗi giá trị đó chúng ta cần sử dụng phương thức .each(). Điều này cũng giúp chúng ta lấy chính xác các thuộc tính của đối tượng như id, css … Gỉa sử muốn lấy thuộc tính id của các đối tượng mà không sử dụng phương thức .each() đẻ duyệt qua từng đối tượng thfi chúng ta chỉ có thể lấy được id của đối tượng đầu tiên. Câu trúc:

$.fn.myNewPlugin = function() {
    return this.each(function() {

    });
};

Chú ý: Chúng tả trả về kết quả của .each() thay vì trả về kết quả của this.

Truyền tham số

Khi viết hàm với jQuery, ta thường định nghĩa tham số mặc định và cho phép người dùng plugin có thể truyền tham số vào hàm, nếu người dùng không truyền tham số hoặc trong trường hợp truyền thiếu thì các tham số sẽ có giá trị mặc định. Trong trường hợp này ta sử dụng phương thức $.extend mà jQuery cung cấp.

$.extend nhận hai hoặc nhiều tham số, nó có nhiệm vụ thêm các phương thức và các biến của tham số thứ hai trở đi vào tham số đâu tiên. Cụ thể qua ví dụ sau:

var defaults = { size:3};

var options = { height:6};

var results = $.extend(defaults, options);

// Results
// Results == default == { size: 3, height: 6}
// Options == { height: 6}

Ta thường đặt tham số thứ nhất là {} để không ảnh hưởng đến tham số gốc. Cụ thể qua ví dụ sau:

var defaults = { size:3};

var options = { height:6};

var results = $.extend({}, defaults, options);

// Results
// defaults == { size: 3}
// Options == { height: 6}
// Results == { size: 3, height: 6}

Cách sử dụng hàm vừa viết như sau:

$("div").greenify({
    color: "orange";
});

Hoàn thành!

Trên đây là cách viết một Plugin jQuery cho riêng mình. Chúc các bạn thành công!