77

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

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

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

4

7 に答える 7

85

jquery UIプラグインを拡張しようとして同じ問題が発生しました.これが私が見つけた解決策です(jquery.ui.widget.jsで見つけました):

(関数($) {
/**
 * 名前空間: プラグインが配置されている名前空間
 * pluginName: プラグインの名前
 */
    var extensionMethods = {
        /*
         * 要素の ID を取得する
         * これは既存のプラグイン内の一部のコンテキストです
         */
        showId: 関数(){
            this.element[0].id を返します。
        }
    };

    $.extend(true, $[ 名前空間 ][ プラグイン名 ].prototype, extensionMethods);


})(jQuery);

ご不明な点がございましたら、お問い合わせください。

于 2010-12-11T00:05:38.093 に答える
17

私は同じ問題を抱えてここに来ました.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);
于 2012-11-07T23:18:46.833 に答える
3 
$.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 要素で動作します /////////////// カスタム utils

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

// 上記の util as にアクセス

$.Afunction();

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

于 2010-01-12T17:58:10.140 に答える
3

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

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

要するに、拡張したいプラグインをどのようにコーディングするかです。

于 2010-01-12T18:16:40.707 に答える
1

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();
于 2013-06-06T14:16:16.410 に答える
1

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);
于 2016-02-03T09:21:17.217 に答える
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 のドキュメントを参照してください:
ウィジェット ファクトリ API ウィジェット ファクトリを使用
したウィジェットの拡張

于 2016-03-16T14:48:10.153 に答える