首页 文章

扩展jQuery插件的最佳方式

提问于
浏览 次
75

我是一个相当新的jQuery用户，希望扩展现有的jQuery插件，它可以满足我所需要的75％ . 我试着做这个功课 . 我在stackoverflow上检查了以下问题：

我在extend方法上有read up . 然而，所有这些功课让我感到困惑 . 我正在使用fullcalendar插件，需要修改一些行为以及添加新的事件挂钩 . 我是否坚持在插件封闭本身中这样做？我错过了一些明显的东西吗

理想情况下，我们可以将代码与插件代码分开，以便进行可能的升级 . 任何帮助都将非常感激，特别是关于我在哪里错过了一些关于其他Stack Overflow问题中已经提出的解决方案是否有意义的信息或意见的指示 . 对我来说，他们互相矛盾，我仍然感到困惑 .

jquery plugins fullcalendar extend

7 回答

  • 84
    $.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>

    //使用自定义插件

    $('#div1').DoubleWidth();

    ///上面写的utils类型通常是dom元素的工作/////////////// custom utils

    (function($){
  var _someLocalVar;
  $.Afunction=function(param1,param2) {
    // do something
  }
})(jquery);

    //访问上面的util as

    $.Afunction();

    //这种类型的工具通常会扩展javascript

    回复于
  • 1

    我在尝试扩展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);

    希望这有帮助，请询问您是否有任何疑问 .

    回复于
  • 3

    我有同样的问题来到这里，然后贾里德斯科特的回答激发了我的灵感 .

    (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);
    回复于
  • 1

    我发现有很多插件的方法都是受保护/私有的（即在闭包范围内） . 如果你需要修改方法/功能的功能，那么除非你愿意分叉，否则你的运气不好 . 现在如果您不需要更改任何这些方法/函数，那么您可以使用 $.extend($.fn.pluginName, {/*your methods/properties*/};

    我之前做的另一件事就是使用插件作为我的插件的属性，而不是尝试扩展它 .

    它真正归结为你想要扩展的插件是如何编码的 .

    回复于
  • 17

    我重写jQuery插件的方法是将需要访问的方法和变量移动到选项块并调用'extend'

    // 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();
    回复于
  • 2

    示例类似于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);
    回复于
  • 0

    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));

    查看jQuery文档以了解更多信息：
    Widget Factory API
    Extending Widgets with the Widget Factory

    回复于

相关问题