Bây giờ chúng ta đã hiểu những điều cơ bản về phát triển plugin, chúng ta có thể tìm hiểu sâu hơn một chút. Bởi vì cuối cùng plugin là một chức năng, nó cung cấp cho chúng ta phạm vi mà chúng ta cần tổ chức. Bạn có nhớ khi chúng ta sắp xếp ngôi nhà của mình khi chúng ta học về luyện mẫu không? Chúng ta có thể sử dụng một số khái niệm tương tự trong một plugin.
Nhưng trước tiên, tôi nghĩ rằng kiến trúc plugin jQuery có thể được hưởng lợi từ một số mã soạn sẵn. Có lẽ bạn đã quen với HTML5 Boilerplate cung cấp một loạt các giá trị mặc định thông minh. Một bảng soạn sẵn jQuery Plugin cũng giống như vậy. Tiết kiệm một số thao tác nhập và giúp bạn đi trên con đường phát triển thông minh.
Tôi đã xem qua một dự án có tên là jQuery Boilerplate theo nghĩa đen mà tôi đoán là tốt. Nhưng tôi chưa tìm hiểu kỹ về vấn đề đó. Thay vào đó, tôi khá thích Starter của Doug Neiner. Bạn cung cấp tên, một số giá trị mặc định và một số lựa chọn và nó sẽ tạo ra cấu trúc bảng soạn sẵn đó cho bạn.
Chúng tôi quyết định tạo một thanh trượt có tên lodgeSlider với thông số tốc độ đơn giản và kết thúc bằng mã này:
(function($)( $.lodgeSlider = function(el, options)( // To avoid scope issues, use 'base' instead of 'this' // to reference this class from internal events and functions. var base = this; // Access to jQuery and DOM versions of element base.$el = $(el); base.el = el; // Add a reverse reference to the DOM object base.$el.data("lodgeSlider", base); base.init = function()( base.options = $.extend((),$.lodgeSlider.defaultOptions, options); // Put your initialization code here ); // Sample Function, Uncomment to use // base.functionName = function(paramaters)( // // ); // Run initializer base.init(); ); $.lodgeSlider.defaultOptions = ( speed: 300 ); $.fn.lodgeSlider = function(options)( return this.each(function()( (new $.lodgeSlider(this, options)); )); ); ))(jQuery);Rất nhiều trong số đó sẽ trông quen thuộc. Có một IIFE bao bọc plugin để đảm bảo an toàn. Có một hàm được tạo từ đối tượng jQuery. Có một hàm init được gọi ngay lập tức. Có một phương thức được tạo từ đối tượng jQuery trả về một đối tượng jQuery. Có những biến được tạo tham chiếu bộ nhớ đệm mà chúng tôi có thể sẽ sử dụng lại. Chủ yếu là những thứ chúng ta đã thấy trước đây.
Có lẽ hai điều mới. Một là đối tượng tùy chọn trong đó. Bạn có thể thấy giá trị 300 được mã hóa cứng. Nhưng cũng thấy dòng với $.extend(). Đó là một hàm jQuery để kết hợp hai đối tượng thành một với một đối tượng được ưu tiên hơn đối tượng kia. Khi chúng tôi gọi plugin, có lẽ như thế này:
$("#slider-1").lodgeslider();Chúng tôi không có tùy chọn nào và đối tượng trống đó được kết hợp với đối tượng mã hóa cứng của chúng tôi và các giá trị mặc định có sẵn bên trong plugin. Nhưng chúng ta cũng có thể gọi nó như thế này:
$("#slider-1").lodgeslider(( speed: 500 ));Chúng tôi đang chuyển một đối tượng làm tham số ở đó. Đối tượng đó được kết hợp với đối tượng mã hóa cứng của chúng tôi, được ưu tiên hơn và giá trị chúng tôi đã chuyển trở thành giá trị có sẵn trong plugin. Tuyệt đấy.
Điều mới khác là một chút kỳ lạ với .data(). Chúng tôi đã tạo biến cơ sở để tham chiếu chính hàm, biến này được tạo mới cho mọi phần tử mà plugin được gọi. Ví dụ: giả sử chúng tôi đã gọi plugin trên $(".slider")- có thể có hai phần tử trên trang có tên lớp là slider. Mỗi vòng lặp chạy và hai phiên bản của hàm lodgeSlider được tạo. Trong mỗi cái, chúng tôi đính kèm một tham chiếu đến nó với chính phần tử. Bằng cách đó, chúng ta có thể gọi các phương thức plugin nội bộ từ bất kỳ tham chiếu nào chúng ta có về phần tử đó.
Giống như có thể:
$(".the-first-slider").data("lodgeSlider").changeSlide(2);Just kinda cung cấp cho chúng tôi một cách hay để sử dụng các phương thức plugin nếu chúng tôi cần.
Chúng tôi đã không tiến xa lắm trong cuộc phiêu lưu xây dựng plugin này:
Xem Bút tạo thanh trượt từ Scratch của Chris Coyier (@chriscoyier) trên CodePen
Thành thật mà nói, thế giới có lẽ không cần một plugin trượt khác. Tuy nhiên, bạn có thể thấy chúng phức tạp như thế nào. Đây chỉ là một vài ý tưởng:
- Có thể có các chức năng gọi lại (hoặc các sự kiện tùy chỉnh) cho trước và sau khi thay đổi trang chiếu, sau khi thanh trượt được thiết lập, sau khi nó được chia nhỏ, v.v.
- Chiều rộng có thể dựa trên phần trăm và được tính toán lại khi cửa sổ trình duyệt thay đổi.
- Điều hướng có thể được xây dựng động thay vì được yêu cầu trong đánh dấu.
- ID và #hash hrefs cũng có thể được tạo động.
- Các sự kiện chạm như vuốt có thể được thêm vào để làm cho thanh trượt thân thiện với cảm ứng hơn (các chấm nhỏ không thân thiện với cảm ứng).
Bạn càng làm nhiều việc đó, kích thước của plugin càng lớn. Đó là lý do tại sao việc tạo ra sự cân bằng giữa các tính năng, tính thực tế, hiệu suất và kích thước là rất khó khăn và ở đó có rất nhiều plugin khác nhau cuối cùng làm được điều tương tự.
