SangLT WebLog

Bài viết này sẽ giới thiệu sơ lược cách hoạt động của một jQuery plugin và sau bài này có thể tạo ra được plugin cho jQuery phù hợp với chuẩn của cộng đồng và hoàn toàn có thể public cho cộng đồng sử dụng.
Yêu cầu: Hiểu biết cách hoạt động của javascript

Chain Pattern:

Chain Pattern: http://en.wikipedia.org/wiki/Chain-of-responsibility_pattern. Đây là một pattern trong thiết kế phần mềm. Yêu cầu đặt ra là các hàm xử lý sau khi tính toán xong thì kết quả return về chính các tham số được nhận vào. Làm điều này tốt thì chúng ta có thể sử dụng và gọi các hàm xử lý liên tiếp nhau và mã nguồn sẽ dễ đọc hiểu hơn.

Giới thiệu cách hoạt động của jQuery plugin

jQuery là một bộ thư viện Javascript sử dụng rất tốt Chain Pattern. Ví dụ là để gọi 2 hàm show() và hide() thay vì cách dùng truyền thống là:
$(document).show();
$(document).hide();
thì với jQuery chúng ta có thêm cách sử dụng như sau:
$(document).show().hide();
Đây chính là cách sử dụng dựa vào Chain Pattern, và đây cũng là nguyên tắc cơ bản khi viết một plugin cho jQuery. Phải đảm bảo plugin của chúng ta thỏa mãn yêu cầu này để những người sử dụng plugin của chúng ta có thể linh hoạt trong việc sử dụng.

Cách hoạt động của jQuery plugin

jQuery lưu các hàm có thể gọi trực tiếp từ selector trong jQuery.fn. Như ví dụ trên thì show và hide là 2 hàm nằm trong jQuery.fn. Khi viết plugin chúng ta cũng tạo các hàm xử lý của chúng ta và gắn vào cho jQuery.fn - Nhớ là phải đảm bảo yêu cầu ở trên (Chain Pattern).

Mã nguồn mẫu:

Để thỏa mãn 2 yêu cầu ở trên ta sẽ có cách viết plugin như sau (Đây chỉ là một trong nhiều cách viết - và đa số các plugin hiện tại đều viết theo cách này):
(function ($) {
  $.extend($.fn, {
    myPlugin: function () {
      return this.each(function () {
        // Ma nguon cua chung ta tai day
      })
    }
  })
})(jQuery);
myPlugin là tên mà chúng ta người sử dụng sẽ gọi khi muốn xài plugin của chúng ta. Sau đó plugin của chúng ta sẽ được chạy khi được gọi bằng $(selector).myPlugin();

Giải thích:

• Đầu tiên là chúng ta bỏ toàn bộ mã nguồn của plugin vào trong một Anonymous function:
  (function ($) {
})(jQuery);
  Điều này bảo đảm cho việc những ai sử dụng plugin của chúng ta hoàn toàn có thể tạo ra các hàm khác trùng tên mà không bị xung đột với các hàm đã có của chúng ta. Và giá trị của các biến, hàm... của chúng ta tạo ra chỉ tồn tại trong phạm vi của hàm này. Ở đây chúng ta cũng làm luôn một việc là đặt shorthand cho tên jQuery thành $. Nghĩa là thay vì sử dụng jQuery.fn chúng ta có thể sử dụng $.fn mà không sợ bị xung đột với các biến $ ở ngoài hàm này.
• Tiếp theo chúng ta sử dụng hàm $.extend để thêm hàm của chúng ta vào cho đối tượng $.fn như đã nói ở trên (Lưu giữ các plugin)
  $.extend($.fn, {
});
  Như vậy là chúng ta sẽ thêm vào cho $.fn những plugin do chúng ta tạo ra.
• Và đây là mã nguồn chính của plugin:
     myPlugin: function () {
    }
  Có nghĩa là chúng ta đặt tên plugin của chúng ta là myPlugin, người sử dụng muốn xài plugin của chúng ta thì phải dùng hàm myPlugin(). Nội dung của hàm này là:
  return this.each(function () {
  // Ma nguon cua chung ta tai day
})
  Đầu tiên chúng ta trả về kết quả là các tham số được nhận. Sử dụng this.each để bảo đảm không bỏ xót các tham số (jQuery có thể tương tác với nhiều đối tượng cùng lúc). Sau đó là các xử lý logic của plugin.

Ví dụ minh họa:

• Ta có mã HTML:
  <span id="example1">Ví dụ 1</span>
<p id="example2">Ví dụ 2</p>
• Yêu cầu: Viết một plugin thực hiện nhiệm vụ là đổi màu nền của element thành đỏ và khi được click chuột thì alert nội dung của element đó.
• Thực hiện: Dựa vào mã nguồn mẫu trên ta sẽ có kết quả như sau:

Ví dụ 1

Ví dụ 2

Mã nguồn của ví dụ trên:
<span id="example1">Ví dụ 1</span>
<p id="example2">Ví dụ 2</p>
<script type="text/javascript">
(function ($) {
  $.extend($.fn, {
    example: function () {
      return this.each(function () {
        // This o day chinh la doi tuong chung ta can xu ly
        $(this)
        // css la ham thay doi thuoc tinh CSS cua doi tuong
        .css('background', 'red')
        // click la ham gan su kien click cho doi tuong
        .click(function () {
          alert($(this).html());
        })
      })
    }
  })
})(jQuery);
$(document).ready(function () {
  $('#example1, #example2').example();
});
</script>