扩展 jQuery 插件的最佳方式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2050985/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Best Way to Extend a jQuery Plugin
提问by justkt
I'm a fairly new jQuery user looking to extend an existing jQuery plugin that does about 75% of what I need. I've tried to do my homework on this. I've checked out the following questions on stackoverflow:
我是一个相当新的 jQuery 用户，希望扩展一个现有的 jQuery 插件，该插件可以完成我需要的大约 75% 的功能。我试着做我的功课。我已经检查了有关stackoverflow的以下问题：
I've read upon the extend method. However, all of thise homework has left me confused. I'm working with the fullcalendarplugin and need to modify some of the behavior as well as add new event hooks. Am I stuck with doing this in the plugin closure itself? Am I missing something obvious?
我已经阅读了扩展方法。然而，所有这些作业让我感到困惑。我正在使用fullcalendar插件，需要修改一些行为以及添加新的事件挂钩。我是否坚持在插件关闭本身中执行此操作？我错过了一些明显的东西吗？
Ideally we would be able to separate our code from the plugin code to allow for a possible upgrade. Any help would be greatly appreciated, especially pointers on where I'm missing some information or opinions on whether the solutions already presented in other Stack Overflow questions make sense. To me they contradict each other and I'm still left confused.
理想情况下，我们能够将我们的代码与插件代码分开，以便进行可能的升级。任何帮助将不胜感激，尤其是关于我在其他 Stack Overflow 问题中已经提出的解决方案是否有意义的一些信息或意见的指示。对我来说，它们相互矛盾，我仍然感到困惑。
回答by Jared Scott
I just had the same problem trying to extend jquery UI plugins, and here is the solution I found (found it through jquery.ui.widget.js):
我在尝试扩展 jquery UI 插件时遇到了同样的问题，这是我找到的解决方案（通过 jquery.ui.widget.js 找到）：
(function($) {
/**
* Namespace: the namespace the plugin is located under
* pluginName: the name of the plugin
*/
var extensionMethods = {
/*
* retrieve the id of the element
* this is some context within the existing plugin
*/
showId: function(){
return this.element[0].id;
}
};
$.extend(true, $[ Namespace ][ pluginName ].prototype, extensionMethods);
})(jQuery);
hope this helps, please ask if you have any questions.
希望这对您有所帮助，如果您有任何问题，请询问。
回答by nepjua
I had the same issue and came here, then Jared Scott's answer inspired me.
我遇到了同样的问题并来到这里，然后 Jared Scott 的回答启发了我。
(function($) {
var fullCalendarOrg = $.fn.fullCalendar;
$.fn.fullCalendar = function(options) {
if(typeof options === "object") {
options = $.extend(true, options, {
// locale
isRTL: false,
firstDay: 1,
// some more options
});
}
var args = Array.prototype.slice.call(arguments,0);
return fullCalendarOrg.apply(this, args);
}
})(jQuery);
回答by prodigitalson
Ive found that with a lot of plugins the methods are protected/private (ie in the closures scope). If yo need to modify the functionality of the methods/functions then your out of luck unless youre willing to fork it. Now if you dont need to change any of these methods/functions then you can use $.extend($.fn.pluginName, {/*your methods/properties*/};
我发现很多插件的方法都是受保护/私有的（即在闭包范围内）。如果您需要修改方法/函数的功能，那么除非您愿意分叉，否则您很不走运。现在，如果您不需要更改任何这些方法/功能，那么您可以使用$.extend($.fn.pluginName, {/*your methods/properties*/};
Another thing ive ended up doing before is simply using the plugin as a property of my plugin instead of trying to extend it.
我之前最终做的另一件事是简单地将插件用作我的插件的属性，而不是尝试扩展它。
What it all really comes down to is how the plugin you want to extend is coded.
真正归结为您想要扩展的插件是如何编码的。
回答by Praveen Prasad
$.fn.APluginName=function(param1,param2)
{
return this.each(function()
{
//access element like
// var elm=$(this);
});
}
// sample plugin
$.fn.DoubleWidth=function()
{
return this.each(function()
{
var _doublWidth=$(this).width() * 2;
$(this).width(_doubleWidth);
});
}
//
//
<div style="width:200px" id='div!'>some text</div>
// using custom plugin
// 使用自定义插件
$('#div1').DoubleWidth();
/// above written type of utils usually work of dom elements /////////////// custom utils
/// 上面写的 utils 类型通常适用于 dom 元素 /////////////// 自定义 utils
(function($){
var _someLocalVar;
$.Afunction=function(param1,param2) {
// do something
}
})(jquery);
// access above util as
// 访问上面的 util as
$.Afunction();
// this type of utils usually extend javascript
// 这种类型的工具通常会扩展 javascript
回答by hvdd
My approach in rewriting jQuery plugins has been to move methods and variables that need to be accessed to the options block and call the 'extend'
我重写 jQuery 插件的方法是将需要访问的方法和变量移动到选项块并调用“扩展”
// in the plugin js file
$.jCal = function (target, opt) {
opt = $.extend({
someFunctionWeWantToExpose: function() {
// 'this' refers to 'opt', which is where are our required members can be found
}
}
// do all sorts of things here to initialize
return opt; // the plugin initialisation returns an extended options object
}
////// elsewhere /////
var calendar = $("#cal1").jCal();
calendar.someFunctionWeWantToExpose();
回答by marcini
Example similar to Jared Scott`s answer, but making a copy of original object prototype gives the ability to call parent method:
示例类似于 Jared Scott 的回答，但制作原始对象原型的副本可以调用父方法：
(function($) {
var original = $.extend(true, {}, $.cg.combogrid.prototype);
var extension = {
_renderHeader: function(ul, colModel) {
original._renderHeader.apply(this, arguments);
//do something else here...
}
};
$.extend(true, $.cg.combogrid.prototype, extension);
})(jQuery);
回答by Max
jQuery Widget can be extended using jQuery Widget Factory.
jQuery Widget 可以使用 jQuery Widget Factory 进行扩展。
(function ($) {
"use strict";
define([
"jquery",
"widget"
], function ($, widget) {
$.widget("custom.yourWidget", $.fn.fullCalendar, {
yourFunction: function () {
// your code here
}
});
return $.custom.yourWidget;
});
}(jQuery));
Check out jQuery Documentation to learn more:
Widget Factory API
Extending Widgets with the Widget Factory
查看 jQuery 文档以了解更多信息：
Widget Factory API
Extending Widgets with the Widget Factory
