2009-06-17 15 views
7

jQuery AJAXプラグインとして小さなCMSを作成していますが、これは決して長すぎませんが(現在は約500行ですが)、分割することができたらうれしいです個別のファイル、各「サブクラス」の一つに:上記の例で複数のファイルにjQueryプラグインを分割する方法

(function($) { 
    $.fn.myCMS = function() { 
     this.classOne = function() { 
     ... 
     } 
     this.classTwo = function() { 
     ... 
     } 
    } 
})(jQuery); 

、私は1つのファイルにclassOneのためのコードを配置したいと思い、classTwo別では第三中myCMS「基底クラス」。このようなもの(これは "サブクラス"ファイルのそれぞれ)でこれを達成することは可能ですか?

$.extend(myCMS,classOne = function() { 
... 
}) 

多くのおかげで、あなたが関心のプライベートスコープ/分離と "プラグイン" に追加する

JS

答えて

6

。これは、すべてが1つのファイルまたは複数のファイルに組み込まれるかどうかにかかわらず、プラグインベースのWebアプリケーションのメンテナンスと長期的な拡張性にとって重要になります。

あなたはプライベートスコープを作成し、あなたがjQuery.extend()を使用することができますメソッドを直接取り付けることによって、またはjQuery.fn.fooメソッドのプロトタイプ

(function ($) { 

    // instance method attached to the constructor function 
    $.fn.myCMS.classOne = function() { 

    }; 

    // or "shared" method attached to prototype 
    $.fn.myCMS.prototype.classOne = function() { 

    }; 

})(jQuery); 

に追加することで、既存のjQuery.fn方法を拡張することができ、この場合は実際は、上記の最初のメソッドとしてコンストラクタインスタンスにメソッドを追加するための「省略形」です。あなたが頻繁に彼らと同じclosured変数で取得する必要があり、「クラス」を持っている場合は、設計の観点から

$.extend($.fn.myCMS,{ classOne: function() { } }); 

:あなたは、オブジェクト(通常、これは匿名のオブジェクトになります)に追加しているものは何でもカプセル化しなければなりませんおそらく同じ関数のスコープ/クロージャの一部でなければならないか、あるいはそれらのクロージャ付き変数のgetterとsetterを公開する必要があります(おそらくコードでのみ使用されることを示す_foo規則を使用)。

(function ($) { 

    var foo = "foo!"; 

    // combined getter/setter 
    // could also check arguments.length 
    $.fn.myCMS._foo = function (value) { 
      if (typeof(value) != "undefined") { 
       foo = value; 
      } else { 
       return foo; 
      } 
    }; 

)(jQuery); 

あなたがハッカーになりたいとあなたは別の範囲からclosured変数で取得する必要がある場合、私はあなたがは.callを(使用して、独自のスコープを持つこれらの新しいメソッドを実行することで、そうすることができると信じて)または.apply ()を他のスコープから削除します。どのように動作するかのサンプルをまとめてみることもできますが、これらのシナリオでスコープ解決がどのように機能するかについて独自の調査を行うとよいでしょう。

私はあなたがwith($ .fn.myCMS){}構造を使って元の "プラグイン"メソッドからスコープを "借りる"ことができると信じていますが、私はそれをしなかったので100%私自身、それについて読むだけです。

1

これは、jQueryのUiコードを見るのに役立ちます。たとえば、progressbarプラグインには、ui.core、ui.widget、およびui.progressbarという3つのファイルが必要です。 jQuery UIソースバンドルをダウンロードして、demosディレクトリのprogressbarの例を見てください。 (私は単純化されたバージョンがどこにでもホストされているのを見つけることができませんでしたが、ソースバンドルには例が簡略化されています)

関連する問題