2

私は jQuery プラグインに取り組んでおり、同じ名前空間内のメソッド間で関数と変数を共有することに少し混乱しています。私は次のことがうまくいくことを知っています：

    (function($){

    var k = 0;
    var sharedFunction = function(){
                //...
                }

    var methods = {

    init : function() { 
      return this.each(function() {
          sharedFunction();
        });
    },

     method2 : function() { 
      return this.each(function() {
          sharedFunction();
        });
    }
  };

$.fn.myPlugin = function(method) {
    // Method calling logic
    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 exist here');
    }    
  };

})(jQuery);

しかし、これを行うためのより良い方法があるかどうか疑問に思っています。変数「k」と関数「sharedFunction」が技術的にグローバルではないことは理解していますが（プラグインの外部から直接アクセスできないという点で）、これはせいぜい洗練されていないようです。

$.data がオプションであることは知っていますが、プラグイン内の複数のメソッドからアクセスする必要がある変数と関数が大量にある場合、これは途方もない混乱になる可能性があるようです。

任意の洞察をいただければ幸いです。ありがとう！

4

1 に答える 1

1

Javascript で (ほぼ間違いなく) より一般的な落とし穴の 1 つは、{ }他の C スタイル言語のようにスコープを定義しないことです。関数はそうします。

それを念頭に置いて、変数をグローバルにすることを除けば、2 つの個別の関数間で変数を共有する方法が 2 つあります (私は一般的に使用します)。

共通関数内で関数を宣言する

これは、あなたが上で示しているものです。2 つの関数を別の関数 (スコープを定義する) 内で宣言しています。コンテナー関数の子レベルで宣言されたものはすべて、2 つの内部関数のスコープを含め、そのスコープ内のどこでも使用できます。

// this is a self-calling function
(function () {

    var foo;

    var f1 = function () {
        // foo will be accessible here
    },

    f2 = function () {
        // ... and foo is accessible here as well
    }

})();

正直なところ、これはまったく「洗練されていない」わけではなく、Javascript で関数スコープ以外のスコープを定義できない代わりに一般的に行われています。

名前空間共通メンバー

グローバルスコープでオブジェクトを定義し、それを変数/関数で拡張することができます. グローバル化する必要がありますが、 1 回だけにすることでフットプリントを最小限に抑えることができます。

window.app = {
    foo : 'bar'
};

(function () {

    var f1 = function () {
        // app.foo will be accessible here
    };

})();

(function () {

    var f2 = function () {
        // ... and here as well, even though we're 
        // in a totally different (parent) scope
    };

})();

を使用$().data()することは実行可能に見えるかもしれませんが、それには確かに用途がありますが、説明した機能を提供するために追加のオーバーヘッドを追加することはお勧めできません。少し慣れます）。

于 2012-10-03T19:00:44.833 に答える