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

Lời mở đầu
jQuery là một thư viện Javascript khá nổi tiếng, thư viện này "bảo kê"  tất cả những thao tác xử lý về thẻ một cách linh hoạt và đơn giản. Ai chưa biết về thư viện này thì mất nửa "cuộc đời", mà biết rồi thì cũng mất thêm nửa "cuộc đời" để tìm hiểu nó, nói cho vui vậy thôi chứ jQuery theo mình là rất tuyệt nhưng không hẳn là "vô đối", ngoài jQuery còn có những "đại gia" như mootool, extJS, prototype... khi có thời gian mình sẽ giới thiệu nhiều hơn về chúng.

Làm sao để viết plugin cho jQuery ?
Viết một "cắm vào" (plugin) cho jQuery khó không ? Theo mình thì đơn giản vô cùng, quan trọng là viết xử lý có phức tạp hay không, chứ viết một cái được gọi là plugin của jQuery thì còn dễ hơn ăn bánh mì.


Nhúng jQuery
Khi viết plugin cho jQuery bạn cần ... tối thiểu là thư viện jQuery, nhúng đoạn mã sau vào trang

<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>

Cấu trúc một plugin của jQuery
Cấu trúc của một plugin được trình bày như sau:

(function ($) {
    // Những hàm, biến dành riêng, không ảnh hưởng bên ngoài

    // Khai báo một plugin
    $.fn.pluginName = function (pluginParameters) {
        // Nội dung xử lý của plugin đó
    };
})(jQuery);

Lưu ý khi viết plugin
Plugin "nên" (chứ không bắt buộc) bao bở một hàm không tên, hàm không tên này có nhiệm vụ bọc tất cả nội dung xử lý, hàm, biến cần cho plugin lại để tránh xung đột với những hàm sẵn có:

<script type="text/javascript">
    var initValue = 0;
    function increment(x) {
        initValue = initValue + x;
    }
</script>
<script type="text/javascript">
    var initValue = -1;
    function increment(x) {
        initValue = initValue + 2 * x;
    }

    // Một jQuery plugin
    $.fn.incrementValues = function () {
        increment(1);
    };
</script>

Giả sử khai báo script đầu tiên là những hàm chúng ta dùng riêng cho chính mình, còn khai báo script thứ 2 là khai báo của một jQuery plugin, khai báo này cần một hàm increment và một biến initValue. Trong khi đó, ở cả 2 đoạn mã của ta và của plugin đề có biến, hàm cùng tên với nhau, nhưng cách sử dụng khác nhau, điều nguy hiểm xảy ra khi ta gọi increment() hoặc đoạn mã bên trong plugin gọi increment(), nó sẽ mang lại kết quả không như mong đợ, do hàm increment ở khai báo thứ 2 mới là hàm chính thức được sử dụng, vậy hàm increment của plugin đã "đè bẹp" hàm increment của chúng ta. Do vậy, mọi khai báo plugin ta nên bao lại bởi một hàm không tên, để giới hạn việc sử dụng hàm, tên hàm không trùng lắp với những hàm có sẵn, đoạn mã trên được viết lại:

<script type="text/javascript">
    var initValue = 0;
    function increment(x) {
        return initValue + x;
    }
</script>
<script type="text/javascript">
    (function () {
        var initValue = -1; // khởi tạo initValue này không dính dáng gì đến khởi tạo initValue ở dòng 2
        function increment(x) {
            return initValue + 2 * x;
        }

        // Một jQuery plugin
        $.fn.incrementValues = function () {
            increment(1); // đây là lời gọi hàm increment ở dòng 10 chứ không phải hàm increment ở dòng 3
        };
    })();
    increment(2); // đây là lời gọi hàm increment ở dòng 3, vì đây là phạm vi nằm ngoài hàm không tên, nên không có tác dụng gọi increment ở dòng 10.
</script>

Hàm không tên (anonymous) sử dụng ra sao ?
Một điểm cần lưu ý là ta sử dụng cấu trúc (function() {})() chứ không phải function() {}, khác biệt ở đây là hàm không tên được bao bởi cặp () và liền sau nó là cặp (), điều này có ý nghĩa ra sao ? Việc bao hàm không tên bởi cặp () là khởi tạo một hàm không tên sau đó cặp () phía sau có tác dụng là gọi hàm không tên đó (cặp dấu () là lệnh gọi hàm).

Một điểm quan trọng khác, hàm không tên sử dụng cho plugin phải có tham số là $ và khi gọi phải truyền vào jQuery:

(function ($) {  })(jQuery);

Ta cần làm như thế vì có rất nhiều thư viện, framework javascript, thư viện nào cũng kết "cô nàng" $, chính vì vậy, nếu ta dùng chung nhiều thư viện khác nhau, thì khi đó dấu $ chỉ có thể sử dụng cho một thư viện mà thôi, vậy trong hàm plugin của chúng ta, nếu có đoạn xử lý dùng dấu $ thì không ai đảm bảo rằng dấu $ này là của jQuery cả. Chính vì vậy ta cần giới hạn phạm vi sử dụng biến $ lại, chúng ta chỉ biết rằng plugin nhận tham số jQuery và tham số này có tên là $, khi gọi hàm không tên, nhiệm vụ của chúng ta là phải truyền vào đúng đối tượng jQuery.

Một plugin thật "bệnh"

<script type="text/javascript">
    (function ($) {
        $.fn.doNothing()
        {
            alert("Không làm cái chi cả");
        }
    })(jQuery);
</script>

Ý tưởng xây dựng
Quay trở lại vấn đề, ý tưởng xây dựng plugin của chúng ta là:

• 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ệ.

Với ý tưởng này, đã có rất nhiều người "đẽo" rồi, có thể bạn nghĩ đã có cày rồi, có người đẽo cày rồi thì chúng ta cần gì phải học đẽo làm gì, tốt nhất cứ đi mua, đi mượn cày mà dùng. Vâng, ý tưởng tiến bộ là thế, nhưng nó phù hợp với những người đã có kinh nghiệm, đã có thực tiễn, còn nếu bạn thuộc lớp người mới bắt đầu, hãy cứ làm những công việc đơn giản, thô sơ để có thể hiểu được gốc rễ của vấn đề.

Nhiệm vụ đã được đề ra, xin hẹn bài sau giải quyết