jQueryプラグインのパブリック関数

Question

私はjQueryプラグインのアーキテクチャが大好きですが、プラグインインスタンスへの参照を保持してプロパティやプロパティにアクセスしたいときは、メソッドは後で私のコードで。

編集：私は、私はそれらを使用できるように、後で

はのケースを取ることができます、私が本当にやろうとしていますが、プラグイン内で使用されるメソッドとプロパティへの参照を保持していることを明確にしたいですAJAX読み込みアイコンより伝統的なOOP環境では、私が行うことができます：

var myIcon = new AJAXIcon(); 
myIcon.start(); 
//some stuff 
myIcon.stop(); 

私のオブジェクトのメソッドとプロパティは、後で使用するために変数に保存されます。今、私はjQueryプラグインで同じ機能を持つようにしたい場合は、私は多少このように私のメインのコードからそれを呼び出します。慣例により

$("#myId").ajaxIcon() 

、私のプラグインが可能私のプラグインに渡された元のjQueryオブジェクトを返す必要があります私がそれを行うと、プラグインインスタンスのメソッドやプロパティにアクセスする能力が失われてしまいます。

さて、私はあなたが、元のjQueryオブジェクトを返すの慣習を壊すことなく、ややしかし

$.fn.ajaxIcon = function(options) { 
    return this.each(function() { 
     //do some stuff 
    } 
} 

$.fn.ajaxIcon.stop = function() { 
    //stop stuff 
} 

の線に沿って、私のプラグインでパブリック関数を宣言することができることを知って、私は保持することはできません私が参照したいプラグインの特定のインスタンスへの参照。

私はこのような何かをできるようにしたいと思います：

var myIcon = $("myId").ajaxIcon(); //myIcon = a reference to the ajaxIcon 
myIcon.start(); 
//some stuff 
myIcon.stop(); 

任意の考えを？

Answer 1

に答えあなたの公開方法のうち、

var myPlugin = $('#id').myPlugin(); 

myPlugin.bar(); 

これはこのから得たvery helpful article（2009年5月）のtrulyevil.comから、this article（2007年10月）のlearningjquery.comの拡張機能です。

Answer 2

これを達成しようとしているほとんどのjQueryプラグインは、匿名スコープを使用し、そのインスタンスに固有の関数と変数を参照するためにクロージャを使用します。たとえば、次のパターンを使用します。

;(function ($) { 
    // your code 
})(jQuery); 

モジュールの最初と最後の間で、必要な機能を宣言できます。グローバルな名前空間を汚染することはなく、閉鎖によってローカル変数へのアクセスを保持することができ、多くの問題を解決することができます。また、$.data機能を使用することを恐れないでください。

Answer 3

は、私はあなたがこのような何かを探しているものを達成できると思います：

var myIcon = $("myId").ajaxIcon(); //myIcon = a reference to the ajaxIcon 
$.ajaxIcon.start(myIcon);//some stuff 
$.ajaxIcon.stop(myIcon); 

は、しかし、それをテストしていない - 私はその気圧を行うことができ、環境へのアクセス権を持っていない

プラグインコード：

Answer 4

[OK]を、私はこれを行う方法を考え出し

$.ajaxIcon.init = function(element, options) { 
    //your initialization code 

    this.start = function() { 
     //start code 
    } 

    this.stop = function() { 
     //stop code 
    } 
} 

$.fn.ajaxIcon = function(options) { 
    this.each(function() { 
     //This is where the magic happens 
     jQuery(this).data('ajaxIcon', new jQuery.ajaxIcon.init(this, opts)); 
    }); 

return this; 
} 

次に、あなたのコード内のどこかにそれを使用する：

(function($){ 

$.fn.myPlugin = function(options) { 
    // support multiple elements 
    if (this.length > 1){ 
     this.each(function() { $(this).myPlugin(options) }); 
     return this; 
    } 

    // private variables 
    var pOne = ''; 
    var pTwo = ''; 
    // ... 

    // private methods 
    var foo = function() { 
     // do something ... 
    } 
    // ... 

    // public methods   
    this.initialize = function() { 
     // do something ... 
     return this; 
    }; 

    this.bar = function() { 
     // do something ... 
    }; 
    return this.initialize(); 
} 
})(jQuery); 

その後、あなたはいずれにもアクセスすることができます

var myIcon = $("#myId").ajaxIcon.data('ajaxIcon') 
// myIcon: a reference to the 'init' object specific to this plugin instance 
myIcon.start(); 
myIcon.stop(); 

出来上がりは、次のような何かを行う場合は自分の質問:)