jQueryプラグインを複数のファイルに分割する方法

StackOverflow https://stackoverflow.com/questions/1010089

  •  06-07-2019
  •  | 
  •  

質問

私は小さなCMSをjQuery AJAXプラグインとして作成していますが、それは決して過度に長いわけではありません（現在約500行）。 ;サブクラス＆quot;：

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

上記の例では、classOneのコードを1つのファイルに、classTwoを別のファイルに、myCMS＆quot; baseclass＆quot;を配置します。第三に。このようなものを使用してこれを達成することは可能ですか（各「サブクラス」ファイル内）？ 

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

どうもありがとう、

JS

役に立ちましたか？

解決

「プラグイン」に追加したいプライベートスコープ/関心の分離。これは、すべてが1つのファイルに組み込まれるのか複数のファイルに組み込まれるのかに関係なく、プラグインベースのWebアプリケーションのメンテナンスと長期的な拡張性にとって重要です。

メソッドを直接アタッチするか、jQuery.fn.fooメソッドのプロトタイプに追加することにより、プライベートスコープを作成し、既存のjQuery.fnメソッドを拡張できます

(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.extend（）を使用できます。この場合、実際には「速記」です。上記の最初のメソッドとして、コンストラクターインスタンスにメソッドを追加します。オブジェクトに追加するものはすべてカプセル化する必要があります（通常、これは匿名オブジェクトになります）：

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

「クラス」がある場合の設計の観点から同じクロージャー変数を頻繁に取得する必要がある場合、それらはおそらく同じ関数スコープ/クロージャーの一部であるか、それらのクロージャー変数のゲッターとセッターを公開する必要があります（おそらく、_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);

ハッカーになりたい場合、別のスコープから閉じられた変数を取得する必要がある場合は、.call（）または.apply（）を使用して、独自のスコープでこれらの新しいメソッドを実行することで実行できると思います他のスコープ。これがどのように機能するかのサンプルをいくつか作成しようとすることはできますが、このようなシナリオでスコープ解決がどのように機能するかについて独自の調査を行うことをお勧めします。

「借りる」ことができると信じています。元の「プラグイン」のスコープwith（$ .fn.myCMS）{}構文を使用してメソッドを作成しますが、自分でやったことがないので、それについてだけ読んでください。

他のヒント

jQuery uiコードも参照すると役立ちます。たとえば、progressbarプラグインには、ui.core、ui.widget、ui.progressbarの3つのファイルが必要です。 jQuery UIソースバンドルをダウンロードし、demosディレクトリの下にあるプログレスバーの例を見てください。 （簡略化されたバージョンはどこにもホストされていませんでしたが、ソースバンドルには簡略化された例があります）

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top