Hướng Dẫn Viết JQuery Plugin - Coder Khủng

Rất nhiều lập trình viên có thể sử dụng JQuery rất thành thạo, nhưng dường như ít người tiếp cận JQuery theo hướng viết các plugin. Bài viết này hướng dẫn bạn viết một JQuery Plugin có tên Fullpage Menu

Hướng dẫn này dành cho người chưa có kiến thức về Jquery. Tuy nhiên lập trình viên có kiến thức cơ bản về Javascript và JQuery sẽ nắm được các nội dung một cách dễ dàng hơn.

1. Cơ bản về JQuery

JQuery là một Javascript Framework miễn phí được cộng đồng lập trình web sử dụng rộng rãi. Trang chủ của JQuery tại: http://jquery.com/

Những người tạo ra JQuery cũng tạo ra thêm các thư viện thứ cấp rất hữu ích khác như JQuery UI, JQuery Mobile.

Có thể hiểu đơn giản về cách thức làm việc với JQuery như sau: JQuery cung cấp một tập hợp các selector cho phép duyệt qua các phần tử trong DOM một cách linh hoạt và trả về một đối tượng JQuery (jQuery Object).

Đối tượng jQuery được trả về đó mang chính phần tử DOM nó đã lấy được và có các phương thức giúp ta thực hiện các thao tác với phần tử đó một cách dễ dàng.

Ví dụ, để lấy về phần tử DOM có id=”myNode” ta thực hiện:

var domNode = $("#myNode")

domNode giờ là một đối tượng jQuery mang phần tử có id là myNode, domNode cũng gồm các phương thức để cho phép ta thao tác trên chính phần tử DOM này.

Ví dụ sau thiết lập thuộc tính màu nền là màu đỏ cho phần tử qua phương thức .css()

domNode.css('background', '#f00');

Nếu domNode là biến bao gồm một tập hợp các phần tử thì các phương thức của nó có tác dụng lên tất cả các phần tử ấy. Đây là ý tưởng hay cho phép ta viết mã javascript một cách dễ dàng và nhanh chóng.

Điều tuyệt vời nữa mà lập trình viên nào cũng nồng nhiệt đón nhận, đó là tính đa tương thích trình duyệt đã được jQuery giải quyết một cách hoàn hảo. Tại thời điểm mình viết hướng dẫn này, jQuery thực thi giống nhau trên: IE 6.0+, Firefox, Opera, Safari 5.1+, Chrome, IOS 6.0+, Android 4.0+. jQuery hỗ trợ CSS phiên bản 1 tới 3 và kích thước khoảng 90KB.

2. Viết Plugin cho JQuery

JQuery hỗ trợ để lập trình viên thêm các phương thức vào thư viện JQuery một cách dễ dàng. Thực hiện việc này bằng cách viết các Plugin.

Trong bài viết này, ta sẽ đi tạo ra một Plugin có tên fpmenu (Fullpage Menu). Bạn có thể xem trước demo sản phẩm mà ta sẽ tạo ra.

Menu kiểu fullpage như bạn vừa thấy trong demo phù hợp cho các website cho các thiết bị di động.

2.1. Khai báo một plugin

Để khai báo plugin fpmenu, ta sử dụng đối tượng fn của thư viện JQuery như sau:

jQuery.fn.fpmenu = function(params) { //code here };

Hoặc cách ngắn gọn hơn là dùng $ thay cho jQuery như sau:

$.fn.fpmenu = function(params) { //code here };

Tuy nhiên, sử dụng JQuery sẽ giúp ta tránh sự xung đột (conflict) trong trường hợp có sử dụng chung với các Javascript Framework khác cũng dùng $ (như Mootool chẳng hạn).

Nếu vẫn muốn dùng $ mà không gây xung đột với các Javascript Framework khác, ta có thể dùng kĩ thuật IIFE của Javascript để biến $ thành một alias của JQuery như sau:

(function($) { $.fn.fpmenu = function(params) { //code here }; })(jQuery);

Bây giờ thì $ giống như một biến cục bộ trong namespace jQuery, các Javascript Framework khác có thể sử dụng $ như một biến toàn cục mà không gây ra conflict.

2.2. Thêm vào các tham số

Với plugin đang xây dựng, ta muốn cho phép người dùng chọn được loại hiệu ứng (đóng và mở menu) và khoảng thời gian thực hiện hiệu ứng. Ta cần thêm vào 2 tham số lần lượt là animEffect và animSpeed. Có thể thực hiện điều này rất dễ dàng như sau:

(function($) { $.fn.fpmenu = function(animEffect, animSpeed) { //code here }; })(jQuery);

Khi viết xong plugin này, bạn sẽ dùng nó bằng cách gọi kiểu như sau:

//hiệu ứng swing và thời gian thực hiện là 500 milisecond $('#myMenu').fpmenu('swing',500);

Tuy nhiên, cách này hoàn toàn không thích hợp cho sự thay đổi của plugin. Biết đâu rằng sau một thời gian, ta lại muốn thêm một vài tham số khác – có thể lắm chứ. Như thế chẳng lẽ lại phải sửa lại phần định nghĩa?

Có cách khác hay hơn cho việc định nghĩa tham số cho phương thức trong plugin của ta. Đó là ở đây, thay vì liệt kê nhiều tham số ta chỉ cần đặt vào một đối tượng JSON như sau:

(function($) { $.fn.fpmenu = function(paramObject) { //code here }; })(jQuery);

Bây giờ thì bạn sẽ dùng nó bằng cách gọi kiểu như sau:

//hiệu ứng swing và thời gian thực hiện là 500 milisecond $('#myMenu').fpmenu({animEffect :'swing', animSpeed :500});

Tuy nhiên, ta còn muốn hơn thế. Đó là nếu người dùng không truyền vào bất kì tham số nào, ta vẫn có thể thực thi plugin với tham số mang các giá trị mặc định. Bạn có thể dùng phương thức extend() của JQuery như sau:

(function($) { $.fn.fpmenu = function(param) { //phương thức $.extend(a,b) thực hiện trộn gộp đối tượng b với đối tượng a và trả về đối tượng trộn gộp đó param = $.extend({animEffect :'swing', animSpeed :500},param); }; })(jQuery);

2.3. Trả kết quả về cho lời gọi phương thức

Thực tế bạn không bắt buộc phải trả về kết quả khi viết JQuery Plugin. Tuy nhiên để hỗ trợ thực hiện dãy nhiều phương thức liên tiếp. Chúng ta sẽ trả về chính đối tượng như sau:

(function($) { $.fn.fpmenu = function(param) { param = $.extend({animEffect :'swing', animSpeed :500},param); //trả về chính đối tượng hiện thời return this; }; })(jQuery);

2.4. Hoàn thiện plugin fpmenu

Như vậy là ta đã đi qua các nội dung chính hướng dẫn bạn viết một Plugin cho JQuery gồm có:

• Cách khai báo plugin
• Khai báo tham số và xử lý tham số
• Trả kết quả về cho lời gọi phương thức

Sau đây là mã nguồn đầy đủ của Plugin fpmenu. Phần code cũng khá ngắn gọn, bạn hãy đọc các ghi chú trong mã nguồn để hiểu kĩ hơn từng bước thực hiện.

(function($){ $.fn.fpmenu = function(param){ //xử lý tham số mặc định param = $.extend( { //các lớp của icon đóng - mở menu. Dùng font awesome btnClasses: 'fa fa-list-ul', btnCloseClasses: 'fa fa-times', //hiệu ứng và thời gian thực hiện hiệu ứng animEffect:'swing', animSpeed:500 },param); //mặc định ẩn menu this.each(function(idx,el){ $(el).addClass('fpmenu fp-hide').height($(window).height()); }); //hiển thị nút đóng - mở menu $('<i class="fp-btn '+param.btnClasses+'"></i>').appendTo('body'); //thuộc tính cờ cho biết menu đang đóng hay mở Object.defineProperty(this,'isOpen',{value: false,writable: true}); //xử lý sự kiện người dùng nhấn đóng - mở menu var _self = this; $('i.fp-btn').click(function(e){ e.preventDefault(); if(!$(_self).is(':animated')){ if(_self.isOpen){ $(_self).animate({opacity:0},param.animSpeed,param.animEffect,function(){ $(this).addClass('fp-hide'); $('i.fp-btn').removeClass(param.btnCloseClasses).addClass(param.btnClasses); }); }else{ $(_self).removeClass('fp-hide') .animate({opacity:1},param.animSpeed,param.animEffect,function(){ $('i.fp-btn').removeClass(param.btnClasses).addClass(param.btnCloseClasses); }); } _self.isOpen = !_self.isOpen; } }); return this; } })(jQuery);

Ngoài mã Javascript như trên, thực tế ta đã kết hợp dùng thêm các thành phần:

• Mã CSS tạo định dạng cho menu
• Fort Awesome để tạo các icon
• JQuery UI để cho phép người dùng chọn hiệu ứng

Mã nguồn đầy đủ của Plugin này trên GitHub gồm cả phần demo cho bạn tại đây.

3. Lời kết

Nhiều lập trình viên vẫn có thói quen viết mã tuần tự sử dụng JQuery để đáp ứng công việc cụ thể trước mắt của mình. Cách viết mã như thế có một nhược điểm là mã đã viết không dùng lại được, dẫn đến tình trạng là nhiều khi bạn phải viết đi viết lại mã nhiều lần. Thay vào đó nếu bạn viết các Plugin sẽ giúp bạn tiết kiệm được nhiều thời gian.

Bạn hãy dành thời gian tạo ra một Plugin thật sự có ích, điều đó sẽ làm cho bạn hiểu và yêu thích viết mã với JQuery hơn.