覆盖 jQuery 插件的 init 函数

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>