Ghi đè chức năng trong plugin jQuery

Question

Tôi có một plugin jQuery hiện có, bây giờ tôi muốn mở rộng nó. Hãy xem xét plugin được đề cập dưới đây:

$.fn.x = function(option) { 
     var def = { 
      a: 1, 
      b: 2 
     }; 

     option = $.extend(def, option); 
     function abc() { 
      //do something 
     } 
     function def() { 
      //do something 
     } 
    }; 

Bây giờ ở trên là plugin tôi nhận được từ đâu đó. Tôi cần phải có hành vi tùy chỉnh cho phương pháp abc, nói

function abc() { 
       //do something else 
      } 

Tôi không muốn thay đổi các plugin hiện tại, bạn có thể cho tôi biết làm thế nào tôi có thể đạt được như vậy bằng cách mở rộng tương tự hoặc bằng cách cắm tùy chỉnh của riêng tôi ?

EDIT: Tôi cố gắng này quá với phương pháp đề cập dưới đây:

 (function($) { 
     $.fn.x = function(option) { 
      var defaults = { 
       a: 1, 
       b: 2 
      }; 

      option = $.extend(def, option); 
      function abc() { 
       //do something 
       console.log('Base method called'); 
      } 
      function def() { 
       //do something 
       abc(); 
      } 
      def(); 
     }; 
    })(jQuery); 

    (function() { 
     var x = $.fn.x; 
     $.fn.x.abc = function() { 
      console.log('Overidden method called'); 
      //_x.abc(); 
     }; 
    })(); 


    $('<div/>').x(); 

Nhưng tôi vẫn nhận "phương pháp cơ bản được gọi là" như giao diện điều khiển đầu ra.

Answer 1

Tuyến đường tốt nhất có thể khác nhau, nhưng điều mà tôi đã làm trong quá khứ là tự bọc phần mở rộng! Điều này hoạt động tốt nhất khi bạn đang cố gắng hoạt động trên thứ gì đó mà plugin thực hiện mà không sửa đổi mã cơ bản của nó.

(function($){ 
    $.fn.extendedPlugin = function(options) { 

     var defaults = { 
      //... 
     }; 
     var options = $.extend(defaults, options); 

     //Here you can create your extended functions, just like a base plugin. 

     return this.each(function() { 
      //Execute your normal plugin 
      $(this).basePlugin(options); 

      //Here you can put your additional logic, define additional events, etc 
      $(this).find('#something').click(function() { 
       //... 
      }); 
     }); 
    }; 
})(jQuery); 

Tôi biết điều này không quá cụ thể (khó mà không có kịch bản cụ thể), nhưng hy vọng nó sẽ giúp bạn bắt đầu đi đúng hướng!

Answer 2

Đây là như tôi nhận được. Nhưng khi tôi uncomment _x.abc.apply(this, arguments);, nó bị mắc kẹt trong một vòng lặp đệ quy.

Đây là jsfiddle nếu ai đó muốn chơi với và sửa chữa nó: http://jsfiddle.net/TLAx8/

// PLUGIN DEFINITION 

(function($){ 
    $.fn.x = function(option) { 
     var def = { 
      a: 1, 
      b: 2 
     }; 

     option = $.extend(def, option); 
     function abc() { 
      console.log('Plugin method called'); 
     } 
     function def() { 
      //do something 
     } 
    }; 
})(jQuery); 


// OVERRIDING THE PLUGIN METHOD 

(function(){ 
    var _x = $.fn.x; 
    $.fn.x.abc = function() { 
     console.log('Overidden method called'); 
     //_x.abc.apply(this, arguments); 
    } 
})(); 


// INVOKING THE METHOD 

(function() { 
    $.fn.x.abc(); 
});