如何扩展Twitter Bootstrap插件

我正在挖掘Twitter的Bootstrap，现在想尝试添加一些function的插件，但我不知道如何做到这一点。 以模式插件为例（ http://twitter.github.com/bootstrap/javascript.html#modals ），我想添加一个新的function插件，可以被称为一个标准的插件方法。 最接近我认为我来了是用下面的代码，但是当我尝试访问时，所有我得到的是该函数不是对象的一部分。

有什么build议么？ 这是我所尝试的，似乎是最接近我需要做的事情：

$.extend($.fn.modal, { showFooterMessage: function (message) { alert("Hey"); } }); 

那么我想打电话给它，如下所示：

  $(this).closest(".modal").modal("showFooterMessage"); 

编辑：好的，我想通了如何做到这一点：

 (function ($) { var extensionMethods = { displayFooterMessage: function ($msg) { var args = arguments[0] var that = this; // do stuff here } } $.extend(true, $.fn.modal.Constructor.prototype, extensionMethods); })(jQuery); 

现有的Bootstrap插件的问题是，如果有人想扩展它们，新的方法都不能接受参数。 我试图“解决”这个是在插件函数调用中添加参数的接受。

 $.fn.modal = function (option) { var args = arguments[1] || {}; return this.each(function () { var $this = $(this) , data = $this.data('modal') , options = typeof option == 'object' && option if (!data) $this.data('modal', (data = new Modal(this, options))) if (typeof option == 'string') data[option](args) else data.show() }) // end each } // end $.fn.modal 

Answer 1

这是一个旧的线程，但我只是使用以下模式进行模式的一些自定义扩展：

 // save the original function object var _super = $.fn.modal; // add custom defaults $.extend( _super.defaults, { foo: 'bar', john: 'doe' }); // create a new constructor var Modal = function(element, options) { // do custom constructor stuff here // call the original constructor _super.Constructor.apply( this, arguments ); } // extend prototypes and add a super function Modal.prototype = $.extend({}, _super.Constructor.prototype, { constructor: Modal, _super: function() { var args = $.makeArray(arguments); _super.Constructor.prototype[args.shift()].apply(this, args); }, show: function() { // do custom method stuff // call the original method this._super('show'); } }); // override the old initialization with the new constructor $.fn.modal = $.extend(function(option) { var args = $.makeArray(arguments), option = args.shift(); return this.each(function() { var $this = $(this); var data = $this.data('modal'), options = $.extend({}, _super.defaults, $this.data(), typeof option == 'object' && option); if ( !data ) { $this.data('modal', (data = new Modal(this, options))); } if (typeof option == 'string') { data[option].apply( data, args ); } else if ( options.show ) { data.show.apply( data, args ); } }); }, $.fn.modal); 

这样你可以

1）添加您自己的默认选项

2）用自定义参数创build新的方法并访问原始（超）函数

3）在调用原始构造函数之前和/或之后，在构造函数中执行一些操作

Answer 2

为了logging，有一个简单的方法来覆盖或扩展现有的function：

 var _show = $.fn.modal.Constructor.prototype.show; $.fn.modal.Constructor.prototype.show = function() { _show.apply(this, arguments); //Do custom stuff here }; 

不包括自定义参数，但是使用上面的方法也很容易。 而不是使用apply和arguments ，在函数定义中指定原始参数和自定义参数，然后用原始参数调用原始的_show （或者其中的任何一个），最后用新的参数来做其他事情。

Answer 3

作为参考，我有一个类似的问题，所以我“扩展”了Typeahead插件 ，并在插件脚本本身中添加了我需要的function。

如果你不得不改变源代码，那么反正它不是一个扩展，所以我觉得把所有的修改放在一个地方比较容易。

Answer 4

对于任何希望使用Bootstrap 3来执行此操作的人来说。插件布局已经改变了所有的Bootstrap 3插件的默认选项被附加到插件构造函数：

 var _super = $.fn.modal; $.extend(_super.Constructor.DEFAULTS, { foo: 'bar', john: 'doe' }); 

Answer 5

对于David所接受的答案+1。 但是如果我可以简化一点，我会调整DEFAULTS延伸和$fn.modal如下所示：

 !function($) { 'use strict'; // save the original function object var _super = $.fn.modal; // create a new constructor var Modal = function(element, options) { // do custom constructor stuff here // call the original constructor _super.Constructor.apply( this, arguments ); } // add custom defaults Modal.DEFAULTS = $.extend( _super.defaults, { myCustomOption: true }); // extend prototypes and add a super function Modal.prototype = $.extend({}, _super.Constructor.prototype, { constructor: Modal, _super: function() { var args = $.makeArray(arguments); _super.Constructor.prototype[args.shift()].apply(this, args); }, show: function() { // do custom method stuff // call the original method this._super('show'); }, myCustomMethod: function() { alert('new feature!'); } }); // Copied exactly from Bootstrap 3 (as of Modal.VERSION = '3.3.5') // Notice: You can copy & paste it exactly, no differences! function Plugin(option, _relatedTarget) { return this.each(function () { var $this = $(this) var data = $this.data('bs.modal') var options = $.extend({}, Modal.DEFAULTS, $this.data(), typeof option == 'object' && option) if (!data) $this.data('bs.modal', (data = new Modal(this, options))) if (typeof option == 'string') data[option](_relatedTarget) else if (options.show) data.show(_relatedTarget) }) } // override the old initialization with the new constructor $.fn.modal = $.extend(Plugin, $.fn.modal); }(jQuery);