Bây giờ chúng ta đã xem xét việc sử dụng các plugin jQuery, bạn cũng nên hiểu cách xây dựng chúng. Chúng tôi đã đề cập ngắn gọn đến thực tế là bạn có thể mở rộng đối tượng jQuery gốc nếu bạn muốn. Giống như:
$.myFunction = function() ( console.log("I am a function on the jQuery object."); ); // call it $.myFunction();Nhưng bản thân nó không đặc biệt hữu ích. Để tạo một phương thức mới cho jQuery mà bạn có thể gọi trên một tập hợp các phần tử, bạn sẽ cần thực hiện như sau:
$.fn.myMethod = function() ( // I'm a new method ));Điều này giống hệt như cách sử dụng .prototype trên jQuery và đối với những người tò mò, bạn có thể đọc thêm về điều đó tại đây. Làm theo cách đó có nghĩa là chúng ta sẽ có thể sử dụng phương thức mới đó trên một tập hợp các phần tử. Giống:
$("li").myMethod();Bạn có thể làm bất cứ điều gì bạn muốn trong phương pháp đó, nhưng để trở thành một công dân xây dựng plugin jQuery tốt, bạn nên trả lại cùng một tập hợp các phần tử từ plugin.
$.fn.myMethod = function() ( // Do some stuff return this; ));Bằng cách đó, nó sẽ hoạt động với chuỗi. Nếu bạn không làm điều đó và ai đó đã thử một cái gì đó như:
$ (“Li”). MyMethod (). Show ();
Điều đó sẽ thất bại, bởi vì .show()về cơ bản sẽ không được gọi gì cả. Thông thường, các plugin jQuery được tạo kiểu để lặp lại từng phần tử để bạn có quyền truy cập trực tiếp vào từng phần tử riêng lẻ trong tập hợp để làm những việc bạn cần.
Một việc tốt khác cần làm là bọc một plugin trong Biểu thức hàm được gọi ngay lập tức và chuyển jQuery làm tham số cho nó. Bằng cách đó, bạn có thể sử dụng $ bên trong mã plugin của mình một cách an toàn hơn. Đó là bởi vì trong một số trường hợp, $ viết tắt cho jQuery không khả dụng (ví dụ: người dùng đã sử dụng jQuery trong “chế độ tương thích”).
Với cả hai điều cuối cùng đó, cấu trúc plugin sẽ trở thành:
(function($) ( $.fn.myMethod = function() ( return this.each(function() ( // do things )); ); ))(jQuery)Trong video truyền hình, chúng tôi đã kết thúc việc xây dựng một plugin đơn giản để thêm một mũi tên vào cuối bất kỳ phần tử nào.
Xem Pen rwasH của Chris Coyier (@chriscoyier) trên CodePen
Tất nhiên, nó có thể phức tạp hơn khi tham vọng làm được nhiều việc hơn của bạn.
