Переопределение функции инициализации плагинов jQuery

Question

Я хочу переопределить функцию инициализации плагина jquery, а также пользовательскую функцию (например, html) плагина. Но ничего не работает. Вот мой код

Заранее спасибо.

(function(jQuery) {
  jQuery.mainplugin = function(element, options) {
    var defaults = {};

    this.init = function() {
      this.settings = jQuery.extend({}, defaults, options);
      alert('main')
      // more code here
    };

    this.html = function() {
      // main code here 
    }

    this.init();
  };

  jQuery.fn.mainplugin = function(options) {
    return this.each(function() {
      if (undefined == jQuery(this).data('mainplugin')) {
        var plugin = new jQuery.mainplugin(this, options);
        jQuery(this).data('mainplugin', plugin);
      }
    });
  };
})(jQuery);

Вот мой код для переопределения:

$(document).ready(function($) {
  $.fn.mainplugin.init = function() {
    alert('override')
  }

  $.fn.mainplugin.html = function() {
    alert('override')
  }

  $(".is-wrapper").mainplugin();
});

Answer 1

Вместо «переопределения» функций передайте их плагину через объект options:

(function($) {
  $.mainplugin = function(element, options) {
    var settings = $.extend({
      init: null,
      html: null
    }, options);

    this.init = settings.init || function() {
      console.log('main')
    };

    this.html = settings.html || function() {
      console.log('html');
    }

    this.init();
  };

  $.fn.mainplugin = function(options) {
    return this.each(function() {
      if (undefined == $(this).data('mainplugin')) {
        var plugin = new $.mainplugin(this, options);
        $(this).data('mainplugin', plugin);
      }
    });
  };
})(jQuery);

$(document).ready(function($) {
  // plain
  $('.foo').mainplugin().data('mainplugin').html();

  // overridden
  $(".is-wrapper").mainplugin({
    init: function() {
      console.log('init override');
    },
    html: function() {
      console.log('html override');
    }
  }).data('mainplugin').html();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo"></div>
<div class="is-wrapper"></div>