web-dev-qa-db-ja.com

jQueryプラグインを拡張する最良の方法

私は、必要なことの約75％を実行する既存のjQueryプラグインを拡張しようとしている、かなり新しいjQueryユーザーです。私はこれについて宿題をしようとしました。 stackoverflowに関する次の質問を確認しました。

Extendメソッドについて read up をしました。しかし、この宿題のすべてが私を混乱させました。 fullcalendar プラグインを使用しており、いくつかの動作を変更するとともに、新しいイベントフックを追加する必要があります。プラグインのクロージャー自体でこれを行うことに固執していますか？明らかな何かが欠けていますか？

理想的には、プラグインコードからコードを分離して、可能なアップグレードを可能にすることができます。特に、他のStack Overflowの質問で既に提示されている解決策が意味をなすかどうかについて、いくつかの情報や意見が欠けている場所へのポインタがあれば、どんな助けでも大歓迎です。私には、彼らは互いに矛盾し、私はまだ混乱したままです。

jquerypluginsfullcalendarextend
76
justkt

私はjquery UIプラグインを拡張しようとして同じ問題を抱えていましたが、ここに私が見つけた解決策があります（jquery.ui.widget.jsで見つけました）：

 
（function（$）{
/** 
 *名前空間：プラグインが置かれている名前空間
 * pluginName：の名前プラグイン
 */
 var extensionMethods = {
 /*
 *要素のIDを取得します
 *これは既存のコンテキスト内のコンテキストですplugin 
 */
 showId：function（）{
 return this.element [0] .id; 
} 
}; 
 
 $ .extend（true、$ [Namespace] [pluginName] .prototype、extensionMethods）; 
 
 
}）（jQuery）;

これがお役に立てば幸いです。ご質問がある場合はお問い合わせください。

85
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);
17
nepjua

私は、多くのプラグインでメソッドが保護/プライベートであることがわかりました（つまり、クロージャーのスコープ内）。メソッド/関数の機能を変更する必要がある場合は、フォークしない限り運が悪い。これらのメソッド/関数を変更する必要がない場合は、$.extend($.fn.pluginName, {/*your methods/properties*/};

私が以前にやったもう一つのことは、プラグインを拡張しようとするのではなく、単にプラグインのプロパティとして使用することです。

結局のところ、拡張したいプラグインがどのようにコード化されているかということになります。

3
prodigitalson
$.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として上記にアクセス

$.Afunction();

//このタイプのユーティリティは通常javascriptを拡張します

2
Praveen Prasad

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

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

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
ウィジェットファクトリによるウィジェットの拡張

0
Max