7

いくつかのプロパティとメソッドを持つオブジェクトがあるとします。

var Form = {
    name: 'sign-up',

    show: function() {...},
    hide: function() {...},
    validate: function() {...},
    updateCurrency: function() {...},
    handleCheckBox: function() {...}
}

ここで、次のようにフォームで特定のイベントが発生したときに、さまざまなメソッドを呼び出したいと思います。

$('#country-select').bind('change', function() {
    Form.updateCurrency();
});

$("input[type='checkbox']").bind('change', function() {
    Form.handleCheckBox();
});

私にはこれらのイベントリスナーがたくさんいますが、率直に言って、それらはそのように1つずつ醜くリストされており、関連するオブジェクトに直接結び付けられていません。オブジェクトリテラル内にそれらをカプセル化するよりエレガントな方法はありますFormか？ベストプラクティスはありますか？

4

3 に答える 3

6

私は@gillesc答えが好きです、それは正しい軌道に乗っています。しかし、私たちはもっとうまくやれると思います。

答えの主な問題@gillescは、物事の動的な側面（たとえば、イベントハンドラー）が欠落していることです。また、醜いコールバック関数を定義する必要があります。

だからここにあなたがあなたの問題を解決するべきだと私が思う方法があります。

// Test object
var testObj = {
    // Our event handlers. 
    // Notice how we must only define the callback function name here. 
    // Not the function itself. The callback function must be defined in testObj.
    handlers: {
        '#form submit': 'onSubmit'
    },
    // Method that will register all handlers to some selector
    registerHandlers: function() {
        var that = this;
        // Go through the handlers list.
        $.each(this.handlers, function(k, v) {
            // Parsing the event to two different parts. 
            // 1. trigger event
            // 2. selector
            var split = k.split(" "),
                el = split[0],
                trigger = split[1];

            // Delegating the trigger to selector
            $(document).delegate(el, trigger, that[v]);
        });
    },
    // Our actual callback function
    onSubmit: function(evt) {
        evt.preventDefault();
        alert("submit");
    }
};

それはすべてどのように機能しますか？簡単だ！を呼び出す必要がありますtestObj.registerHandlers()。

JSFiddleデモ

于 2012-04-25T20:57:59.040 に答える
3

マークアップをより適切に整理し、イベントハンドラーメソッドに一致する要素にクラスを追加して、ハンドラーのリストを簡単に作成し、それらを反復処理してターゲット要素にバインドできるようにします。

Var Form = {
    ....,
    handlers: {
        country: function() {},
        checkbox: function() {}
    }
};

$.each(FORMS.handlers, function(k, v) {
    $('.' + k).on('change', v);
});


<select class="country">....</select>
<input class="checkbox" type="checkbox" />

次に、拡張するクラスとハンドラーを追加するだけです。

于 2012-04-25T09:05:02.123 に答える
0

まず、関数をより多くの関数でラップする必要はありません。あなたはただできません：

$('#country-select').bind('change', Form.updateCurrency);
$("input[type='checkbox']").bind('change', Form.handleCheckBox);
于 2012-04-25T09:52:44.657 に答える