メソッドでjQueryプラグインを作成するにはどうすればよいですか？

それを呼び出すオブジェクトに追加の関数/メソッドを提供するjQueryプラグインを作成しようとしています。私がオンラインで読んだ（過去2時間閲覧している）すべてのチュートリアルには、多くてもオプションの追加方法が含まれていますが、追加の機能は含まれていません。

これが私がやろうとしていることです：

// divのプラグインを呼び出して、divをメッセージコンテナにフォーマットします

$("#mydiv").messagePlugin();
$("#mydiv").messagePlugin().saySomething("hello");

またはそれらの線に沿って何か。要約すると次のとおりです。私はプラグインを呼び出し、次にそのプラグインに関連付けられた関数を呼び出します。私はこれを行う方法を見つけることができないようで、多くのプラグインがこれを行うのを見てきました。

ここに私がプラグインのためにこれまで持っているものがあります：

jQuery.fn.messagePlugin = function() {
  return this.each(function(){
    alert(this);
  });

  //i tried to do this, but it does not seem to work
  jQuery.fn.messagePlugin.saySomething = function(message){
    $(this).html(message);
  }
};

どうすればそのようなことを達成できますか？

ありがとうございました！

2013年11月18日更新：Hariの以下のコメントと賛成投票の正解を変更しました。

jQuery Plugin Authoringページ（http://docs.jquery.com/Plugins/Authoring）によると、jQuery とjQuery.fn名前空間を混乱させないことが最善です。彼らはこの方法を提案しています：

(function( $ ){

    var methods = {
        init : function(options) {

        },
        show : function( ) {    },// IS
        hide : function( ) {  },// GOOD
        update : function( content ) {  }// !!!
    };

    $.fn.tooltip = function(methodOrOptions) {
        if ( methods[methodOrOptions] ) {
            return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
            // Default to "init"
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  methodOrOptions + ' does not exist on jQuery.tooltip' );
        }    
    };


})( jQuery );

基本的には、関数を配列（ラッピング関数にスコープ指定）に格納し、渡されたパラメーターが文字列の場合はエントリを確認し、パラメーターがオブジェクト（またはnull）の場合はデフォルトのメソッド（ここでは「init」）に戻します。

次に、そのようなメソッドを呼び出すことができます...

$('div').tooltip(); // calls the init method
$('div').tooltip({  // calls the init method
  foo : 'bar'
});
$('div').tooltip('hide'); // calls the hide method
$('div').tooltip('update', 'This is the new tooltip content!'); // calls the update method

Javascriptの「引数」変数は、渡されたすべての引数の配列であるため、関数パラメーターの任意の長さで機能します。

追加のメソッドでプラグインを作成するために使用したパターンは次のとおりです。あなたはそれを次のように使うでしょう：

$('selector').myplugin( { key: 'value' } );

または、メソッドを直接呼び出すには、

$('selector').myplugin( 'mymethod1', 'argument' );

例：

;(function($) {

    $.fn.extend({
        myplugin: function(options,arg) {
            if (options && typeof(options) == 'object') {
                options = $.extend( {}, $.myplugin.defaults, options );
            }

            // this creates a plugin for each element in
            // the selector or runs the function once per
            // selector.  To have it do so for just the
            // first element (once), return false after
            // creating the plugin to stop the each iteration 
            this.each(function() {
                new $.myplugin(this, options, arg );
            });
            return;
        }
    });

    $.myplugin = function( elem, options, arg ) {

        if (options && typeof(options) == 'string') {
           if (options == 'mymethod1') {
               myplugin_method1( arg );
           }
           else if (options == 'mymethod2') {
               myplugin_method2( arg );
           }
           return;
        }

        ...normal plugin actions...

        function myplugin_method1(arg)
        {
            ...do method1 with this and arg
        }

        function myplugin_method2(arg)
        {
            ...do method2 with this and arg
        }

    };

    $.myplugin.defaults = {
       ...
    };

})(jQuery);

このアプローチについて：

jQuery.fn.messagePlugin = function(){
    var selectedObjects = this;
    return {
             saySomething : function(message){
                              $(selectedObjects).each(function(){
                                $(this).html(message);
                              });
                              return selectedObjects; // Preserve the jQuery chainability 
                            },
             anotherAction : function(){
                               //...
                               return selectedObjects;
                             }
           };
}
// Usage:
$('p').messagePlugin().saySomething('I am a Paragraph').css('color', 'red');

選択されたオブジェクトはmessagePluginクロージャーに格納され、その関数はプラグインに関連付けられた関数を含むオブジェクトを返します。各関数では、現在選択されているオブジェクトに対して必要なアクションを実行できます。

ここでコードをテストして遊ぶことができます。

編集：コードを更新して、jQuery連鎖性の力を維持します。

現在選択されている答えの問題は、あなたがやっていることのようにセレクターのすべての要素に対してカスタムプラグインの新しいインスタンスを実際に作成していないことです...実際には単一のインスタンスを作成して渡すだけですセレクター自体をスコープとして使用します。

詳細については、このフィドルをご覧ください。

代わりに、jQuery.eachを使用してセレクターをループし、セレクターのすべての要素に対してカスタムプラグインの新しいインスタンスをインスタンス化する必要があります。

方法は次のとおりです。

(function($) {

    var CustomPlugin = function($el, options) {

        this._defaults = {
            randomizer: Math.random()
        };

        this._options = $.extend(true, {}, this._defaults, options);

        this.options = function(options) {
            return (options) ?
                $.extend(true, this._options, options) :
                this._options;
        };

        this.move = function() {
            $el.css('margin-left', this._options.randomizer * 100);
        };

    };

    $.fn.customPlugin = function(methodOrOptions) {

        var method = (typeof methodOrOptions === 'string') ? methodOrOptions : undefined;

        if (method) {
            var customPlugins = [];

            function getCustomPlugin() {
                var $el          = $(this);
                var customPlugin = $el.data('customPlugin');

                customPlugins.push(customPlugin);
            }

            this.each(getCustomPlugin);

            var args    = (arguments.length > 1) ? Array.prototype.slice.call(arguments, 1) : undefined;
            var results = [];

            function applyMethod(index) {
                var customPlugin = customPlugins[index];

                if (!customPlugin) {
                    console.warn('$.customPlugin not instantiated yet');
                    console.info(this);
                    results.push(undefined);
                    return;
                }

                if (typeof customPlugin[method] === 'function') {
                    var result = customPlugin[method].apply(customPlugin, args);
                    results.push(result);
                } else {
                    console.warn('Method \'' + method + '\' not defined in $.customPlugin');
                }
            }

            this.each(applyMethod);

            return (results.length > 1) ? results : results[0];
        } else {
            var options = (typeof methodOrOptions === 'object') ? methodOrOptions : undefined;

            function init() {
                var $el          = $(this);
                var customPlugin = new CustomPlugin($el, options);

                $el.data('customPlugin', customPlugin);
            }

            return this.each(init);
        }

    };

})(jQuery);

そして働くフィドル。

最初のフィドルでは、すべてのdivが常に正確に同じピクセル数だけ右に移動されることに気付くでしょう。これは、セレクターのすべての要素に対して1つのオプションオブジェクトしか存在しないためです。

上記の手法を使用すると、2番目のフィドルでは各divが整列せず、ランダムに移動します（ランダマイザーは89行目で常に1に設定されているため、最初のdivを除きます）。これは、セレクターのすべての要素に対して新しいカスタムプラグインインスタンスを適切にインスタンス化しているためです。すべての要素には独自のオプションオブジェクトがあり、セレクターではなく、カスタムプラグイン自体のインスタンスに保存されます。

つまり、最初のフィドルのように、DOMの特定の要素でインスタンス化されたカスタムプラグインのメソッドに新しいjQueryセレクターからアクセスでき、それらを強制的にキャッシュする必要はありません。

たとえば、これは2番目のフィドルの手法を使用してすべてのオプションオブジェクトの配列を返します。最初はundefinedを返します。

$('div').customPlugin();
$('div').customPlugin('options'); // would return an array of all options objects

これは、最初のフィドルでオプションオブジェクトにアクセスする方法であり、それらの配列ではなく、単一のオブジェクトのみを返します。

var divs = $('div').customPlugin();
divs.customPlugin('options'); // would return a single options object

$('div').customPlugin('options');
// would return undefined, since it's not a cached selector

現在選択されている回答からではなく、上記の手法を使用することをお勧めします。

jQueryはWidget Factoryの導入により、これを大幅に容易にしました。

例：

$.widget( "myNamespace.myPlugin", {

    options: {
        // Default options
    },

    _create: function() {
        // Initialization logic here
    },

    // Create a public method.
    myPublicMethod: function( argument ) {
        // ...
    },

    // Create a private method.
    _myPrivateMethod: function( argument ) {
        // ...
    }

});

初期化：

$('#my-element').myPlugin();
$('#my-element').myPlugin( {defaultValue:10} );

メソッド呼び出し：

$('#my-element').myPlugin('myPublicMethod', 20);

（これがjQuery UIライブラリの構築方法です。）

より簡単な方法は、入れ子関数を使用することです。次に、それらをオブジェクト指向の方法でチェーンできます。例：

jQuery.fn.MyPlugin = function()
{
  var _this = this;
  var a = 1;

  jQuery.fn.MyPlugin.DoSomething = function()
  {
    var b = a;
    var c = 2;

    jQuery.fn.MyPlugin.DoSomething.DoEvenMore = function()
    {
      var d = a;
      var e = c;
      var f = 3;
      return _this;
    };

    return _this;
  };

  return this;
};

そして、それを呼び出す方法は次のとおりです：

var pluginContainer = $("#divSomeContainer");
pluginContainer.MyPlugin();
pluginContainer.MyPlugin.DoSomething();
pluginContainer.MyPlugin.DoSomething.DoEvenMore();

注意してください。ネストされた関数は、作成されるまで呼び出せません。したがって、これを行うことはできません：

var pluginContainer = $("#divSomeContainer");
pluginContainer.MyPlugin();
pluginContainer.MyPlugin.DoSomething.DoEvenMore();
pluginContainer.MyPlugin.DoSomething();

DoEvenMore関数は、DoSomething関数がまだ実行されておらず、DoEvenMore関数の作成に必要なため、存在しません。ほとんどのjQueryプラグインでは、ここで示したように、実際には2つではなく1つのレベルのネストされた関数しかありません。
ネストされた関数を作成するときは、親関数の他のコードが実行される前に、親関数の先頭でこれらの関数を定義することを確認してください。

最後に、「this」メンバーは「_this」という変数に格納されていることに注意してください。ネストされた関数の場合、呼び出し元のクライアントでインスタンスへの参照が必要な場合は、「_ this」を返す必要があります。ネストされた関数で単に「this」を返すことはできません。これは、jQueryインスタンスではなく、関数への参照を返すためです。jQuery参照を返すと、戻り時に組み込みのjQueryメソッドをチェーンできます。

jQuery Plugin Boilerplateから入手しました

jQueryプラグインのボイラープレートにも記載されています。

// jQuery Plugin Boilerplate
// A boilerplate for jumpstarting jQuery plugins development
// version 1.1, May 14th, 2011
// by Stefan Gabos

// remember to change every instance of "pluginName" to the name of your plugin!
(function($) {

    // here we go!
    $.pluginName = function(element, options) {

    // plugin's default options
    // this is private property and is accessible only from inside the plugin
    var defaults = {

        foo: 'bar',

        // if your plugin is event-driven, you may provide callback capabilities
        // for its events. execute these functions before or after events of your
        // plugin, so that users may customize those particular events without
        // changing the plugin's code
        onFoo: function() {}

    }

    // to avoid confusions, use "plugin" to reference the
    // current instance of the object
    var plugin = this;

    // this will hold the merged default, and user-provided options
    // plugin's properties will be available through this object like:
    // plugin.settings.propertyName from inside the plugin or
    // element.data('pluginName').settings.propertyName from outside the plugin,
    // where "element" is the element the plugin is attached to;
    plugin.settings = {}

    var $element = $(element), // reference to the jQuery version of DOM element
    element = element; // reference to the actual DOM element

    // the "constructor" method that gets called when the object is created
    plugin.init = function() {

    // the plugin's final properties are the merged default and
    // user-provided options (if any)
    plugin.settings = $.extend({}, defaults, options);

    // code goes here

   }

   // public methods
   // these methods can be called like:
   // plugin.methodName(arg1, arg2, ... argn) from inside the plugin or
   // element.data('pluginName').publicMethod(arg1, arg2, ... argn) from outside
   // the plugin, where "element" is the element the plugin is attached to;

   // a public method. for demonstration purposes only - remove it!
   plugin.foo_public_method = function() {

   // code goes here

    }

     // private methods
     // these methods can be called only from inside the plugin like:
     // methodName(arg1, arg2, ... argn)

     // a private method. for demonstration purposes only - remove it!
     var foo_private_method = function() {

        // code goes here

     }

     // fire up the plugin!
     // call the "constructor" method
     plugin.init();

     }

     // add the plugin to the jQuery.fn object
     $.fn.pluginName = function(options) {

        // iterate through the DOM elements we are attaching the plugin to
        return this.each(function() {

          // if plugin has not already been attached to the element
          if (undefined == $(this).data('pluginName')) {

              // create a new instance of the plugin
              // pass the DOM element and the user-provided options as arguments
              var plugin = new $.pluginName(this, options);

              // in the jQuery version of the element
              // store a reference to the plugin object
              // you can later access the plugin and its methods and properties like
              // element.data('pluginName').publicMethod(arg1, arg2, ... argn) or
              // element.data('pluginName').settings.propertyName
              $(this).data('pluginName', plugin);

           }

        });

    }

})(jQuery);

遅すぎますが、誰かを助けることができるかもしれません。

同じような状況で、いくつかのメソッドでjQueryプラグインを作成し、いくつかの記事といくつかのタイヤを読んだ後、jQueryプラグインのボイラープレート（https://github.com/acanimal/jQuery-Plugin-Boilerplate）を作成しました。

さらに、タグを管理するプラグイン（https://github.com/acanimal/tagger.js）を開発し、jQueryプラグイン（http：// acuriousanimal。 com / blog / 2013/01/15 / things-i-learned-creating-a-jquery-plugin-part-i /）。

できるよ：

(function($) {
  var YourPlugin = function(element, option) {
    var defaults = {
      //default value
    }

    this.option = $.extend({}, defaults, option);
    this.$element = $(element);
    this.init();
  }

  YourPlugin.prototype = {
    init: function() { },
    show: function() { },
    //another functions
  }

  $.fn.yourPlugin = function(option) {
    var arg = arguments,
        options = typeof option == 'object' && option;;
    return this.each(function() {
      var $this = $(this),
          data = $this.data('yourPlugin');

      if (!data) $this.data('yourPlugin', (data = new YourPlugin(this, options)));
      if (typeof option === 'string') {
        if (arg.length > 1) {
          data[option].apply(data, Array.prototype.slice.call(arg, 1));
        } else {
          data[option]();
        }
      }
    });
  };
});

このようにして、プラグインオブジェクトは要素のデータ値として格納されます。

//Initialization without option
$('#myId').yourPlugin();

//Initialization with option
$('#myId').yourPlugin({
  // your option
});

// call show method
$('#myId').yourPlugin('show');

トリガーの使用についてはどうですか？誰かがそれらを使用して何か欠点を知っていますか？利点は、すべての内部変数がトリガーを介してアクセス可能であり、コードが非常に簡単なことです。

jsfiddleを参照してください。

使用例

<div id="mydiv">This is the message container...</div>

<script>
    var mp = $("#mydiv").messagePlugin();

    // the plugin returns the element it is called on
    mp.trigger("messagePlugin.saySomething", "hello");

    // so defining the mp variable is not needed...
    $("#mydiv").trigger("messagePlugin.repeatLastMessage");
</script>

プラグイン

jQuery.fn.messagePlugin = function() {

    return this.each(function() {

        var lastmessage,
            $this = $(this);

        $this.on('messagePlugin.saySomething', function(e, message) {
            lastmessage = message;
            saySomething(message);
        });

        $this.on('messagePlugin.repeatLastMessage', function(e) {
            repeatLastMessage();
        });

        function saySomething(message) {
            $this.html("<p>" + message + "</p>");
        }

        function repeatLastMessage() {
            $this.append('<p>Last message was: ' + lastmessage + '</p>');
        }

    });

}

ここで、引数付きの単純なプラグインを作成する手順を提案します。

(function($) {
  $.fn.myFirstPlugin = function(options) {
    // Default params
    var params = $.extend({
      text     : 'Default Title',
      fontsize : 10,
    }, options);
    return $(this).text(params.text);
  }
}(jQuery));

$('.cls-title').myFirstPlugin({ text : 'Argument Title' });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="cls-title"></h1>

ここでは、呼び出されるデフォルトオブジェクトを追加paramsし、extend関数を使用してオプションのデフォルト値を設定しています。したがって、空の引数を渡した場合は、デフォルト値が設定され、そうでない場合は設定されます。

続きを読む： JQueryプラグインの作成方法

これを試してください：

$.fn.extend({
"calendar":function(){
    console.log(this);
    var methods = {
            "add":function(){console.log("add"); return this;},
            "init":function(){console.log("init"); return this;},
            "sample":function(){console.log("sample"); return this;}
    };

    methods.init(); // you can call any method inside
    return methods;
}}); 
$.fn.calendar() // caller or 
$.fn.calendar().sample().add().sample() ......; // call methods

これが私の必要最低限​​のバージョンです。以前に投稿したものと同様に、次のように呼び出します。

$('#myDiv').MessagePlugin({ yourSettings: 'here' })
           .MessagePlugin('saySomething','Hello World!');

-またはインスタンスに直接アクセスします@ plugin_MessagePlugin

$elem = $('#myDiv').MessagePlugin();
var instance = $elem.data('plugin_MessagePlugin');
instance.saySomething('Hello World!');

MessagePlugin.js

;(function($){

    function MessagePlugin(element,settings){ // The Plugin
        this.$elem = element;
        this._settings = settings;
        this.settings = $.extend(this._default,settings);
    }

    MessagePlugin.prototype = { // The Plugin prototype
        _default: {
            message: 'Generic message'
        },
        initialize: function(){},
        saySomething: function(message){
            message = message || this._default.message;
            return this.$elem.html(message);
        }
    };

    $.fn.MessagePlugin = function(settings){ // The Plugin call

        var instance = this.data('plugin_MessagePlugin'); // Get instance

        if(instance===undefined){ // Do instantiate if undefined
            settings = settings || {};
            this.data('plugin_MessagePlugin',new MessagePlugin(this,settings));
            return this;
        }

        if($.isFunction(MessagePlugin.prototype[settings])){ // Call method if argument is name of method
            var args = Array.prototype.slice.call(arguments); // Get the arguments as Array
            args.shift(); // Remove first argument (name of method)
            return MessagePlugin.prototype[settings].apply(instance, args); // Call the method
        }

        // Do error handling

        return this;
    }

})(jQuery);

以下のプラグイン構造が利用jQuery-はdata()-method（jQueryの-chainabilityを維持しながら）、内部プラグインメソッド/ -settingsにパブリックインターフェイスを提供します。

(function($, window, undefined) { 
  const defaults = {
    elementId   : null,
    shape       : "square",
    color       : "aqua",
    borderWidth : "10px",
    borderColor : "DarkGray"
  };

  $.fn.myPlugin = function(options) {
    // settings, e.g.:  
    var settings = $.extend({}, defaults, options);

    // private methods, e.g.:
    var setBorder = function(color, width) {        
      settings.borderColor = color;
      settings.borderWidth = width;          
      drawShape();
    };

    var drawShape = function() {         
      $('#' + settings.elementId).attr('class', settings.shape + " " + "center"); 
      $('#' + settings.elementId).css({
        'background-color': settings.color,
        'border': settings.borderWidth + ' solid ' + settings.borderColor      
      });
      $('#' + settings.elementId).html(settings.color + " " + settings.shape);            
    };

    return this.each(function() { // jQuery chainability     
      // set stuff on ini, e.g.:
      settings.elementId = $(this).attr('id'); 
      drawShape();

      // PUBLIC INTERFACE 
      // gives us stuff like: 
      //
      //    $("#...").data('myPlugin').myPublicPluginMethod();
      //
      var myPlugin = {
        element: $(this),
        // access private plugin methods, e.g.: 
        setBorder: function(color, width) {        
          setBorder(color, width);
          return this.element; // To ensure jQuery chainability 
        },
        // access plugin settings, e.g.: 
        color: function() {
          return settings.color;
        },        
        // access setting "shape" 
        shape: function() {
          return settings.shape;
        },     
        // inspect settings 
        inspectSettings: function() {
          msg = "inspecting settings for element '" + settings.elementId + "':";   
          msg += "\n--- shape: '" + settings.shape + "'";
          msg += "\n--- color: '" + settings.color + "'";
          msg += "\n--- border: '" + settings.borderWidth + ' solid ' + settings.borderColor + "'";
          return msg;
        },               
        // do stuff on element, e.g.:  
        change: function(shape, color) {        
          settings.shape = shape;
          settings.color = color;
          drawShape();   
          return this.element; // To ensure jQuery chainability 
        }
      };
      $(this).data("myPlugin", myPlugin);
    }); // return this.each 
  }; // myPlugin
}(jQuery));

これで、内部のplugin-methodsを呼び出して、次の構文を使用してプラグインデータまたは関連要素にアクセスまたは変更できます。

$("#...").data('myPlugin').myPublicPluginMethod(); 

myPublicPluginMethod()jQuery-chainabilityの実装の内部から現在の要素（this）を返す限り、次のように機能します。

$("#...").data('myPlugin').myPublicPluginMethod().css("color", "red").html("...."); 

いくつかの例を示します（詳細については、このフィドルを確認してください）。

// initialize plugin on elements, e.g.:
$("#shape1").myPlugin({shape: 'square', color: 'blue', borderColor: 'SteelBlue'});
$("#shape2").myPlugin({shape: 'rectangle', color: 'red', borderColor: '#ff4d4d'});
$("#shape3").myPlugin({shape: 'circle', color: 'green', borderColor: 'LimeGreen'});

// calling plugin methods to read element specific plugin settings:
console.log($("#shape1").data('myPlugin').inspectSettings());    
console.log($("#shape2").data('myPlugin').inspectSettings());    
console.log($("#shape3").data('myPlugin').inspectSettings());      

// calling plugin methods to modify elements, e.g.:
// (OMG! And they are chainable too!) 
$("#shape1").data('myPlugin').change("circle", "green").fadeOut(2000).fadeIn(2000);      
$("#shape1").data('myPlugin').setBorder('LimeGreen', '30px');

$("#shape2").data('myPlugin').change("rectangle", "red"); 
$("#shape2").data('myPlugin').setBorder('#ff4d4d', '40px').css({
  'width': '350px',
  'font-size': '2em' 
}).slideUp(2000).slideDown(2000);              

$("#shape3").data('myPlugin').change("square", "blue").fadeOut(2000).fadeIn(2000);   
$("#shape3").data('myPlugin').setBorder('SteelBlue', '30px');

// etc. ...     

これは実際にはを使用して「素敵な」方法で機能させることができdefinePropertyます。「いい」とは()、プラグインの名前空間を取得するために使用したり、文字列で関数名を渡したりする必要がないことを意味します。

互換性nit： defineProperty IE8以下などの古いブラウザでは機能しません。 警告：機能し $.fn.color.blue.apply(foo, args)ませんfoo.color.blue.apply(foo, args)。を使用する必要があります。

function $_color(color)
{
    return this.css('color', color);
}

function $_color_blue()
{
    return this.css('color', 'blue');
}

Object.defineProperty($.fn, 'color',
{
    enumerable: true,
    get: function()
    {
        var self = this;

        var ret = function() { return $_color.apply(self, arguments); }
        ret.blue = function() { return $_color_blue.apply(self, arguments); }

        return ret;
    }
});

$('#foo').color('#f00');
$('#bar').color.blue();

JSFiddleリンク

jquery標準によると、次のようにプラグインを作成できます。

(function($) {

    //methods starts here....
    var methods = {
        init : function(method,options) {
             this.loadKeywords.settings = $.extend({}, this.loadKeywords.defaults, options);
             methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
             $loadkeywordbase=$(this);
        },
        show : function() {
            //your code here.................
        },
        getData : function() {
           //your code here.................
        }

    } // do not put semi colon here otherwise it will not work in ie7
    //end of methods

    //main plugin function starts here...
    $.fn.loadKeywords = function(options,method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(
                    arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not ecw-Keywords');
        }
    };
    $.fn.loadKeywords.defaults = {
            keyName:     'Messages',
            Options:     '1',
            callback: '',
    };
    $.fn.loadKeywords.settings = {};
    //end of plugin keyword function.

})(jQuery);

このプラグインを呼び出すには？

1.$('your element').loadKeywords('show',{'callback':callbackdata,'keyName':'myKey'}); // show() will be called

参照：リンク

これはあなたを助けるかもしれないと思います...

(function ( $ ) {
  
    $.fn.highlight = function( options ) {
  
        // This is the easiest way to have default options.
        var settings = $.extend({
            // These are the defaults.
            color: "#000",
            backgroundColor: "yellow"
        }, options );
  
        // Highlight the collection based on the settings variable.
        return this.css({
            color: settings.color,
            backgroundColor: settings.backgroundColor
        });
  
    };
  
}( jQuery ));

上記の例では、単純なjquery ハイライトプラグインを作成しました。基本からアドバンスまでの独自のjQueryプラグインを作成する方法について説明した記事を共有しました。ぜひチェックしてみてください ... http://mycodingtricks.com/jquery/how-to-create-your-own-jquery-plugin/

以下は、デバッグ用の警告メソッドを持つ小さなプラグインです。このコードをjquery.debug.jsファイルに保存します：JS：

jQuery.fn.warning = function() {
   return this.each(function() {
      alert('Tag Name:"' + $(this).prop("tagName") + '".');
   });
};

HTML：

<html>
   <head>
      <title>The jQuery Example</title>

      <script type = "text/javascript" 
         src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

      <script src = "jquery.debug.js" type = "text/javascript"></script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").warning();
            $("p").warning();
         });
      </script> 
   </head>

   <body>
      <p>This is paragraph</p>
      <div>This is division</div>
   </body>

</html>

ここに私がそれをする方法があります：

(function ( $ ) {

$.fn.gridview = function( options ) {

    ..........
    ..........


    var factory = new htmlFactory();
    factory.header(...);

    ........

};

}( jQuery ));


var htmlFactory = function(){

    //header
     this.header = function(object){
       console.log(object);
  }
 }

あなたがしたことは基本的に新しいメソッドでjQuery.fn.messagePluginオブジェクトを拡張することです。これは便利ですが、あなたの場合はそうではありません。

あなたがしなければならないのは、この手法を使用することです

function methodA(args){ this // refers to object... }
function saySomething(message){ this.html(message);  to first function }

jQuery.fn.messagePlugin = function(opts) {
  if(opts=='methodA') methodA.call(this);
  if(opts=='saySomething') saySomething.call(this, arguments[0]); // arguments is an array of passed parameters
  return this.each(function(){
    alert(this);
  });

};

しかし、あなたがやりたいことは達成できます。つまり、$（ "＃mydiv"）。messagePlugin（）。saySomething（ "hello"）;を実行する方法があるということです。彼がluginについて書き始めた私の友人と、ここでそれらを機能のchainfで拡張する方法は、彼のブログへのリンクです