2

時々、同じ変数を作成しなければならない状況に遭遇し、オブジェクト リテラルの内部でまったく同じ種類の情報を何度.on()も取得する必要があります。より良い方法になりましょう、ここにいます。

注: jQueryや通常のグローバル変数について話しているわけではありません。私は、オブジェクト リテラルのクロージャ内で維持されるものについて話しています。.data()window.

もちろん、これらの変数のいくつかはリアルタイムで変化します。.on()

適例：

$(document).on({
    focusin: function () {
        var placeHolder = $(this).attr('data-title'),
            status      = $(this).attr('data-status');
        // etc etc
    },
    focusout: function () {
        var placeHolder = $(this).attr('data-title'),
            status      = $(this).attr('data-status');
        // etc etc
    },
    mouseenter: function () {
        // same variables
    },
    mouseleave: function () { }
}, '.selector');

変数をどこかに保存して、各イベントで取得する方法はありますか? それらは動的である必要があります

$(document).on({
     // Basially:

     // var placeHolder; etc
     // each event gets these values

     focusin: function () {
         // now here I can simply use them
         if (placeHolder === 'blahblah') {} 
         // etc
     }
}, '.selector');
4

7 に答える 7

1

いくつかの方法があります：

  1. 上記のJSONを返す独自の関数を作成します。プロパティをループして、作業が重複しないようにすることができます。

  2. これらの変数を返す関数（例：JSONとして）を作成して、毎回1​​つの関数を呼び出すだけで済みます。

  3. これらの変数をグローバルプロパティとして設定し、必要に応じて参照する関数を記述します。

于 2012-11-14T18:54:27.727 に答える
1

イベントデータを使用して、いくつかの静的変数をイベントに渡したり、「動的」変数を渡すためのメソッドごとのトリックを作成したりできます。

$(document).on({
    focusin: function(e) {
        var attrs = e.data.getAttributes($(this)),
            var1 = e.data.var1;

        var placeHolder = attrs.title,
            status = attrs.status;
        // ...
    },
    focusout: function(e) {
        var attrs = e.data.getAttributes($(this)),
            var1 = e.data.var1;

        var placeHolder = attrs.title,
            status = attrs.status;
        // ...
    },
    // ...
}, ".selector", {
    // static variables
    var1: "some static value",

    // dynamic "variables"
    getAttributes: function($this) {
        return {
            title: $this.data("title"),
            status: $this.data("status")
        };
    }
});

デモ: http://jsfiddle.net/LHPLJ/

于 2012-11-14T18:57:04.987 に答える
1

それを抽出するためのヘルパー関数を単純に追加してみませんか?

var getData = function(elm) {
    return { 
      placeHolder : $(elm).attr('data-title'),
      status : $(elm).attr('data-status');
  };
};


$(document).on({
  focusin: function () {
    var data = getData (this);
    // do stuff with data.status etc.
  },
  //repeat...
于 2012-11-14T19:23:43.213 に答える
0

常に同じ要素をターゲットにしている場合（つまり、クラスを持つ単一の要素があるselector場合）、イベントがトリガーされる異なる時間の間でそれらの変数の値が変化しない場合は、それらを同じスコープに格納できます。ハンドラーは次のように定義されています。

var placeHolder = $('.selector').attr('data-title'),
    status      = $('.selector').attr('data-status');

$(document).on({
    focusin: function () {
        // etc etc
    },
    focusout: function () {
        // etc etc
    },
    mouseenter: function () {
        // same variables
    },
    mouseleave: function () { }
}, '.selector');

それらの変数と同じスコープで宣言された関数は、それらにアクセスできます。

于 2012-11-14T18:54:28.070 に答える
0

あなたはそれをほぼ正しく行っていますが、それを行うための最良の方法はこれです：

$(document).on({
    focusin: function () {
        var el = $(this), //cache the jQ object
            placeHolder = el.data('title'),
            status = el.data('status');
        // etc etc
    }
}, '.selector');

データはこの目的のために作成されました。再利用可能なアイテムを作成しようとする心配はありません。オブジェクトを使用してイベントを委任している場合、それはおそらく要素が常にページ上にあるとは限らないためです。その場合、個々のイベント内の変数を取得する必要があります。

最後に、必要のないときに最適化しようとしないでください。

于 2012-11-14T19:14:56.317 に答える
0

変数がグローバルにならないように、すべてを関数スコープにラップすることをお勧めします。これらの属性が変更されない場合は、次のようにすることができます。

(function(sel){
    var placeHolder = $(sel).attr('data-title'),
        status      = $(sel).attr('data-status');

    $(document).on({
        focusin: function () {
            // etc etc
        },
        focusout: function () {
            // etc etc
        },
        mouseenter: function () {
            // same variables
        },
        mouseleave: function () { }
    }, sel);
})('.selector');

それ以外の場合は、これを行うことができます (最新のブラウザーでは、IE9+)

(function(sel){
    var obj = {};
    Object.defineProperty(obj, 'placeHolder', {
        get:function(){return $(sel).attr('data-title');}
    });
    Object.defineProperty(obj, 'status', {
        get:function(){return $(sel).attr('data-status');}
    });

    $(document).on({
        focusin: function () {
            console.log(obj.placeHolder, obj.status);
            //etc etc
        },
        focusout: function () {
            // etc etc
        },
        mouseenter: function () {
            // same variables
        },
        mouseleave: function () { }
    }, sel);
})('.selector');
于 2012-11-14T18:58:43.567 に答える
-1

それらをウィンドウオブジェクトに保存して、グローバルにすることができます。

window.yourVariable = "whatever";

これはあなたが望むことをしますが、確かに最もきれいな方法ではありません。可能であれば、目的のデータをオブジェクト自体に保存することを検討できます。$(element).data("key", "value")

于 2012-11-14T18:52:50.693 に答える