javascript - 如何组合相似的事件处理程序？

Question

我有两组几乎相同的事件处理程序。有没有办法将它们结合起来使代码更 DRY？

this.E.name 只是指向 DOM 元素的指针/引用。

请注意，我的 ID 与事件类型不同，因为可能的重复不适用。

    /*set 1
    */
    $(this.E.main).on("click", function () {
        Page.flip('main');
    });
    $(this.E.feed).on("click", function () {
        Page.flip('feed');
    });
    $(this.E.so_button).on("click", function () {
        Backbone.trigger('user_sign_out');
        Pane.flip();
        Page.flip();
        Storage.clear();
    });

    /* set 2
    */
    $(this.E.main_nav).on("click", function () {
        Page.flip('main');
    });
    $(this.E.feed_nav).on("click", function () {
        Page.flip('feed');
    });
    $(this.E.so_button_nav).on("click", function () {
        Backbone.trigger('user_sign_out');
        Pane.flip();
        Page.flip();
        Storage.clear();
    });

Answer 1

你可以更狡猾，只是遍历对象

var valid = ['main', 'feed', 'so_button']; // in case there are other props in object
$.each(this.E, function(key, value) {

    if ( valid.indexOf(key) !== -1 || valid.indexOf(key + '_nav') !== -1 ) {

        $(this.E[key]).on('click', function() {
            if ( key.indexOf('so_button') !== -1 ) {
                Backbone.trigger('user_sign_out');
                Pane.flip();
                Page.flip();
                Storage.clear();
            } else {
                Page.flip(key)
            }
        });

    }
});