Sử dụng jQuery.sub() trong jQuery

Bài này chúng ta sẽ tìm hiểu làm thế nào? tạo một bản sao mới của jQuery có properties và method có thể thay đổi mà không ảnh hưởng đến các đối tượng jQuery gốc.

Có hai trường hợp sử dụng cụ thể mà jQuery.sub () đã được tạo ra. Việc đầu tiên là cung cấp một painless của các method overriding mà không phá huỷ hoàn toàn các method ban đầu và một được dùng để giúp đóng gói và namespacing cơ bản cho các plugin jQuery.

Lưu ý rằng jQuery.sub () không tìm cách làm bất kỳ loại phân lập - đó không phải là ý định của của nó. Tất cả các method trên phiên bản sub'd của jQuery sẽ vẫn chỉ cho jQuery bản gốc (sự kiện ràng buộc và vẫn sẽ được kích hoạt thông qua các jQuery chính, dữ liệu sẽ được liên kết với các phần tử thông qua các jQuery chính, Ajax truy vấn và các sự kiện sẽ chạy qua chính jQuery, vv.)

Lưu ý rằng nếu bạn đang muốn sử dụng plugin này để phát triển mạnh mẽ trước tiên bạn nên xem xét sử dụng một cái gì đó giống như các nhà máy sản xuất phụ tùng jQuery UI trong đó quản lý cả hai trạng thái và method plugin phụ. Một số ví dụ của việc sử dụng các nhà máy sản xuất phụ tùng để xây dựng một plugin.

Các trường hợp sử dụng cụ thể của method này có thể được mô tả tốt nhất thông qua một số ví dụ.

Ví dụ: Thêm một method jQuery phụ để nó không phải là tiếp xúc bên ngoài:

(function(){

      var sub$ = jQuery.sub();

      sub$.fn.myCustomMethod = function(){

             return 'just for me';

      };

      sub$(document).ready(function() {

            sub$('body').myCustomMethod() // 'just for me'

      });

})();

typeof jQuery('body').myCustomMethod // undefined

Ví dụ: Ghi đè một số method jQuery để cung cấp các chức năng mới.

(function() {

      var myjQuery = jQuery.sub();

      myjQuery.fn.remove = function() {

           // New functionality: Trigger a remove event

           this.trigger("remove");

           // Be sure to call the original jQuery remove method

           return jQuery.fn.remove.apply( this, arguments );

     };

     myjQuery(function($) {

           $(".menu").click(function() {

                 $(this).find(".submenu").remove();

           });

           // A new remove event is now triggered from this copy of jQuery

           $(document).bind("remove", function(e) {

                 $(e.target).parent().hide();

           });

      });

})();

Ví dụ: Tạo một plugin trả về plugin method cụ thể.

(function() {

      // Create a new copy of jQuery using sub()

      var plugin = jQuery.sub();

      // Extend that copy with the new plugin methods

      plugin.fn.extend({

            open: function() {

                  return this.show();

            },

            close: function() {

                  return this.hide();

            }

      });

      // Add our plugin to the original jQuery

      jQuery.fn.myplugin = function() {

            this.addClass("plugin");

            // Make sure our plugin returns our special plugin version of jQuery

            return plugin( this );

      };

})();

$(document).ready(function() {

       // Call the plugin, open method now exists

       $('#main').myplugin().open();

       // Note: Calling just $("#main").open() won't work as open doesn't exist!

});

DangTrung.