Tạo plugin cho jQuery dùng để kiểm tra sự hợp lệ của form (Phần 2)

Ở phần 1, chúng ta đã biết cấu trúc để viết một plugin cho jQuery, phần 2 này mình sẽ trình bày về cách xử lý dựa trên đối tượng jQuery.

Những cách sử dụng liên hoàn và không liên hoàn trong jQuery

Có thể gọi đây là một chuỗi những lệnh gọi phương thức xử lý của jQuery:

jQuery('#myheader').addClass('.hilite');
jQuery('#myheader').text('Hello world !!!');

Ở trên là từng câu lệnh riêng lẽ, ta có thể rút gọn:

jQuery('#myheader').addClass('.hilite').text('Hello world !!!');

2 khai báo trên đều có kết quả như nhau, nhưng lợi điểm thì khác nhau. Khai báo đầu tách riêng từng câu lệnh, điều này khiến cho jQuery phải truy vấn tìm ra tập thẻ thỏa điều kiện 2 lần ứng với mỗi lần gọi. Nhưng ở khai báo sau thì jQuery chỉ cần một lần truy vấn để tìm thẻ và thông tin những thẻ đó được bảo lưu cho những lần gọi tiếp theo sau. Để có thể gọi một chuỗi liên hoàn như khai báo hai, điều cần thiết là ta phải nắm rõ kết quả trả về của một phương thức jQuery, nếu phương thức trả về đối tượng jQuery thì có nghĩa ta có thể gọi liên hoàn, ngược lại thì không:

jQuery('#myheader').attr('href');
jQuery('#myheader').attr('href', 'http://google.com');

Với lệnh dòng 2, phương thức attr với tham số 'href' sẽ trả về giá trị thuộc tính href của thẻ #myheader, như vây ta không thể tiếp tục gọi liên hoàn theo sau câu lệnh này được. Đến dòng 3, phương thức attr có tham số 'href' và 'http://google.com' sẽ thực hiện việc gán giá trị của thuộc tính href của thẻ #myheader, phương thức này trả về đối tượng jQuery, ta có thể gọi liên hoàn. Như bạn thấy đó, cùng một phương thức attr, ở mỗi cách gọi (ngữ cảnh) khác nhau, thì kết quả trả về sẽ khác nhau, chúng ta cần tham khảo tài liệu về jQuery để có thể vận dụng chính xác.



Áp dụng vào xây dựng plugin
Mình xin nhắc lại yêu cầu ban đầu:

• Chúng ta mong muốn một bằng cách nào đó để có thể sử dụng $('#loginForm input').validate() kiểm tra sự hợp lệ của một form.
• "Đầu vào" của chúng ta là một danh sách những thẻ input đã được jQuery "select" $('#loginForm input')
• Sau khi gọi plugin validate(), "đầu ra" sẽ là kết quả true hoặc false cho những trường hợp hợp lệ và không hợp lệ.

Yêu cầu cuối cho thấy ta cần nhận về giá trị kiểu logic (true/false) , có nghĩa phương thức này sẽ "đứt đoạn" không gọi liên hoàn được nữa.

Cấu trúc của một plugin gọi liên hoàn

(function ($) {
    $.fn.myPlugIn = function () {
        // Lệnh each là lệnh duyệt qua tập hợp thẻ
        // Kết quả lệnh each là một đối tượng jQuery
        // Vậy ta return kết quả của each có nghĩa là kết quả của myPlugIn cũng là đối tượng jQuery
        return this.each(function () {
            // Xử lý từng thẻ trong tập hợp những thẻ mà jQuery truy vấn được
        });
    };
})(jQuery);

Plugin trả về đối tượng jQuery thường là những plugin cài đặt, thay đổi thông tin thẻ, chẳng hạng như: cài đặt calendar, tạo hiệu ứng, ẩn thẻ, hiện thẻ...

Cấu trúc của một plugin không liên hoàn (trả về giá trị)

(function ($) {
    $.fn.myPlugIn = function () {
        // Một vài lệnh xử lý
        // Rút ra được kết quả;
        var results = null;
        // Trả về kết quả
        return results;
    };
})(jQuery);

Plugin trả về giá trị, ngay như tên gọi của nó, chuyên xử lý và trích xuất thông tin từ 1 hoặc nhiều thẻ, hoặc dùng để kiểm tra thông tin thẻ .v.v. Và plugin chúng ta đang thực hiện thuộc loại này.

Cấu hình cho plugin
Khi viết một plugin, điều cần thiết là xác định tham số đầu vào / ra, những cấu hình liên quan, chúng ta đã có thông tin về tham số vào / ra, bây giờ chúng ta cần những ý tưởng để xác định những cấu hình. Cấu hình gồm có 2 loại, một loại truyền trực tiếp khi gọi plugin đó:

(function ($) {
    $.fn.myPlugIn = function () {
    };
    $('a').myPlugIn(parameter1, parameter2, parameter3); // Cách 1
    $('a').myPlugIn({ paramName1: paramValue1, paramName2: paramValue2 }); // Cách 2
    $('a').myPlugIn({ // Cách 2 nhưng trên nhiều dòng
        paramName1: paramValue1,
        paramName2: paramValue2
    });
})(jQuery);

Dòng 4, là cách cổ điển, gọi phương thức và truyền tham số tuần tự, cách gọi này dễ hiểu nhất. Dòng 5 và dòng 6 là cách truyền tham số kiểu object, tận dụng cú pháp khởi tạo đối tượng đơn giản của Javascript, truyền vào đối tượng với tên thuộc tính và những giá trị đi kèm với thuộc tính đó. Hai dòng đều như nhau chỉ khác nhau bởi cách trình bày trên cùng dòng và nhiều dòng. Ưu điểm cách 1 là đơn giản, nhưng nhược điểm là không thể làm tham số tùy chọn (có thể bỏ qua không cần truyền) và phải nhớ thứ tự tham số gọi, gọi sai là chết đó. Cách 2 thì có nhiều ưu điểm hơn, nhưng khó hiểu hơn, người mới bắt đầu có thể bị choáng. Với plugin này mình tạm đề xuất cách 1.

Ngoài cách cấu hình bằng tham số truyền trực tiếp, ta còn có thể sử dụng thuộc tính của thẻ như một cách cấu hình:

<a id="mytag" my-custom-attribute="hello"></a>
<script type="text/javascript">
    alert($('#mytag').attr('my-custom-attribute'));
</script>

Thuộc tính my-custom-attribute của thẻ a#mytag là một thuộc tính "tự chế", nó không thuộc định nghĩa của thẻ HTML và bạn có thể "chế biến" bao nhiêu thuộc tính cũng được, đó là điểm đặc biệt của thẻ. Khi truy xuất thuộc tính ta sử dụng hàm attr với tham số là tên thuộc tính. Lưu ý những thuộc tính thêm vào như thế, cần có một cái tên hợp lệ, tên phải là những ký tự a-z 0-9 và ký tự - hoặc _, nếu không sẽ "phạm húy" với cú pháp HTML.

Còn tiếp...