Tạo Plugin cho jQuery

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. (tham khảo thêm phần jQuery.noConflict)
• 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>
<div id="example2">Ví dụ 2</div>

• 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

Nguồn: http://www.sanglt.com/Xay-dung-plugin-cho-jQuery 

Plugin có tham số

abc
abc
Source nguồn:

(function($){
  $.fn.extend({ 
   
   fnexample: function(options) {
   var defaults = {
    paddingLeft: 20,
    mouseOverColor : '#000000',
    mouseOutColor : '#ffffff'
   }

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

      return this.each(function() {
          var opts = options;   
          $(this).click(function () {
            alert(opts.paddingLeft);
            }).css('padding-left',opts.paddingLeft);
      });
     }
 });
 
})(jQuery);

Cách sử dụng:

$(document).ready(function () {
  $('#example3').fnexample();
  $('#example4').fnexample({paddingLeft:40});
});

Dòng 2 sử dụng tham số mặc định của hàm .fnexample đã được định nghĩa chính bên trong nó. Dòng 3 truyền tham số bên ngòai vào
Đọc thêm: các ví dụ này rất hay http://www.queness.com/post/112/a-really-simple-jquery-plugin-tutorial http://www.bennadel.com/blog/800-My-First-jQuery-Plugin.htm
Video hướng dẫn làm plugin trong 5 phút: