English 中文(简体)
Best Way to Extend a jQuery Plugin
原标题:

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:

I ve read up on the extend method. However, all of thise homework has left me confused. I m working with the fullcalendar plugin 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?

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.

最佳回答

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


(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.

问题回答

I had the same issue and came here, then Jared Scott s answer inspired me.

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

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*/};

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.

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

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

// access above util as

$.Afunction();

// this type of utils usually extend javascript

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

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

Example similar to Jared Scott`s answer, but making a copy of original object prototype gives the ability to call parent method:

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

jQuery Widget can be extended using 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 - ScrollTo and Serial Scroll not working together

I have tested the scrollTo() plugin, but I need a way to stop the scrolling animation, so I am looking at serialScroll(). Here is what I used with scrollTo: $( #scroller ).scrollTo( 1000px , 3000); ...

jQuery deconstructors for plugins?

I m using the Galleria plugin inside an Accordion plugin to display images in a super cool way. A problem occurs, however, when I open up a new tab (in the accordion) then come back to the gallery tab....

XPCOM Security issues

I m developing a Firefox plugin using XPCOM, I ve not yet read all the docs, but as far as I can see, A plugin is simply a DLL that provides services via a XPCOM interface and interacts with the ...

Ruby on Rails plugin development process

I m considering developing aspects of a website as Rails plugins for reuse. My question is about the development process. Since each of these plugins will provide a "slice" of functionality, should ...

help mongrel wont start

I have decided to switch from Restful authentication to authlogic.. so what I did was delete every file and folder that got installed when I downloaded the plugin.. now when I try to "ruby script/...

Basic MEF workflow/usage

I m looking to a framework which will allow me to have a simple plugin system in my .NET application. It seems MEF is the framework which Microsoft is endorsing, and will become part of .NET 4 (it ...

RubyCAS-Client question: Rails

I ve installed RubyCAS-Client version 2.1.0 as a plugin within a rails app. It s working, but I d like to remove the ?ticket= in the url. Is this possible?

java plugin cache and dynamic IP host

I m trying to use Amazon S3 and Amazon Cloudfront CDN to deliver the jar files of my applet application. I m seeing several cache misses of my jars by the java plugin. This is a show-stopper for me, ...

热门标签