このjQueryプラグインパターンにメソッドを追加するにはどうすればよいですか？

Question

私はプロジェクトのために働いているプラ​​グインのための基礎として、次のコードを使用している - それは、見出し「軽量スタート」の下にここにありスマッシングマガジンの記事からです：

http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/

これまでのところ私の目的ではうまくいきましたが、記事の残りの部分は接して、jQuery UIウィジェットが必要と思われるjQuery UIウィジェットについて、私が本当に使いたくないものについて話しています。

/*! 
* jQuery lightweight plugin boilerplate 
* Original author: @ajpiano 
* Further changes, comments: @addyosmani 
* Licensed under the MIT license 
*/ 

// the semi-colon before the function invocation is a safety 
// net against concatenated scripts and/or other plugins 
// that are not closed properly. 
;(function ($, window, document, undefined) { 

    // undefined is used here as the undefined global 
    // variable in ECMAScript 3 and is mutable (i.e. it can 
    // be changed by someone else). undefined isn't really 
    // being passed in so we can ensure that its value is 
    // truly undefined. In ES5, undefined can no longer be 
    // modified. 

    // window and document are passed through as local 
    // variables rather than as globals, because this (slightly) 
    // quickens the resolution process and can be more 
    // efficiently minified (especially when both are 
    // regularly referenced in your plugin). 

    // Create the defaults once 
    var pluginName = 'defaultPluginName', 
     defaults = { 
      propertyName: "value" 
     }; 

    // The actual plugin constructor 
    function Plugin(element, options) { 
     this.element = element; 

     // jQuery has an extend method that merges the 
     // contents of two or more objects, storing the 
     // result in the first object. The first object 
     // is generally empty because we don't want to alter 
     // the default options for future instances of the plugin 
     this.options = $.extend({}, defaults, options) ; 

     this._defaults = defaults; 
     this._name = pluginName; 

     this.init(); 
    } 

    Plugin.prototype.init = function() { 
     // Place initialization logic here 
     // You already have access to the DOM element and 
     // the options via the instance, e.g. this.element 
     // and this.options 
    }; 

    // A really lightweight plugin wrapper around the constructor, 
    // preventing against multiple instantiations 
    $.fn[pluginName] = function (options) { 
     return this.each(function() { 
      if (!$.data(this, 'plugin_' + pluginName)) { 
       $.data(this, 'plugin_' + pluginName, 
       new Plugin(this, options)); 
      } 
     }); 
    } 

})(jQuery, window, document); 

これにメソッドを追加する必要がありますが、これを行う方法はわかりません。

このメソッドは、プラグインがページ上に作成しているインスタンスが、コンソールを介してメソッドを呼び出してプロパティを動的に変更できるようにする必要があります（最終的には、 、コンソールは今のところ良いです）。

これを可能にするために上記のコードを修正するにはどうすればよいですか？それとも、私は間違った木を吠えるのですか？

私は恐れている時に、複雑なJavaScriptは暗い場所で少し失われてしまいますが、できる限りベストプラクティスとしてやりたいと思っています。

Answer 1

jQueryのドキュメントを強くすることにより、プラグインのメソッドを呼び出すことをお勧めしますメインプラグインメソッドに文字列を渡します。これは、プラグインのメソッドによって、$.fn名前空間が煩雑になるのを防ぐためです。ですから、このような何か：あなたのパターンでは

$.fn.yourPlugin = function(options) { 
    if (typeof options === "string") { 
     //Call method referred to by 'options' 
    } else { 
     //Setup plugin as usual 
    } 
}; 

を、あなたはすでにあなたのメソッドを定義するのに最適な場所を持っている：Plugin.prototype。

Plugin.prototype.changeColor = function(color) { 
    $(this.element).css("color", color); 
} 

お知らせ$(this.element)の使用：たとえば、changeColorメソッドを追加します。

this.element = element; 

したがって実際のDOM要素ではなく、jQueryオブジェクト、必要であるその：Pluginコンストラクタに、プロパティelementが定義され、そしてプラグインが適用された要素は、それに割り当てられているためですjQueryを呼び出す

これでメソッドがあるので、呼び出すためのメカニズムを追加する必要があります。jQueryのドキュメントからの提言を以下に示します。

$.fn[pluginName] = function (options) { 
    return this.each(function() { 
     if (typeof options === "string") { 
      var args = Array.prototype.slice.call(arguments, 1), 
       plugin = $.data(this, 'plugin_' + pluginName); 
      plugin[options].apply(plugin, args); 
     } else if (!$.data(this, 'plugin_' + pluginName)) { 
      $.data(this, 'plugin_' + pluginName, 
      new Plugin(this, options)); 
     } 
    }); 
}; 

あなたは、このようなchangeColorメソッドを呼び出すことができます。

$("#example").defaultPluginName("changeColour", "red");​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

ここfiddle with a working exampleです。プラグインが呼び出し元の要素で実際にインスタンス化されていることを確認するために、メソッド呼び出しコードの周りにいくつかのチェックを追加することができます。

Answer 2

使用

Plugin.prototype.reset = function() { 

}; 
Plugin.prototype.destroy = function() { 

}; 

のように。あなたは

Answer 3

をしたいの代わりにあなたが理解するのは難しい定型で始まるように、最高のスタートが起源であるとして多くのオプションを追加します。

http://docs.jquery.com/Plugins/Authoring