如何设计含有大量事件、绑定的代码结构

在项目中，经常会遇到页面中有大量通过“钩子”绑定的事件，为了方便使用jQuery：

javascript$('.j_submitForm').on('click', function() {
    // XXX
});
$('.j_buyBtn').on('click', function() {
    // XXX
});
$('.j_callTopbar').on('click', function() {
    // XXX
});
$('.j_closeDialog').on('click', function() {
    // XXX
});

这样写出来的代码虽然能按照预期设计返回结果，但是代码结构组织上并不优雅，而且实际项目中，团队多人维护代码，每次新的需求进入要求增量开发，又导致单个函数非常臃肿庞大，如何组织这种针对页面的JS文件。

有尝试过把事件和函数本体拆分，类似这样：

javascriptvar Page = function() {
    var root = this;
    $('.j_submitForm').on('click', root.submitForm)
    $('.j_buyBtn').on('click', root.buyBtn)
    $('.j_callTopbar').on('click', root.callTopbar)
    $('.j_closeDialog').on('click', root.closeDialog)
}

Page.prototype =  {
    submitForm : function() {
        // 所有的细节实现都在这里，不再细化
    },
    buyBtn : function() {},
    callTopbar : function() {},
    closeDialog : function() {}
}

或者按照功能点拆分：

javascriptvar Form = function() {
    // xxx
}
Form.prototype = {
    _submit: function() {
        // 秉承一个函数做一件事的思想
    },
    buyForm: function() {},
    submitForm: function() {}
}

var Dialog = function() {
    // xxx
}
Dialog.prototype = {}

$(document).ready(function() {
    $('.j_submitForm').on('click', function() {
        // 只做逻辑处理
        var formObj = new Form();
        if(formObj.isSuccess) {
            formObj.submit();
            // 更多细节...
        }
    });
});

但是实际上强制沿用（套用）一种设计模式会导致代码读起来很牵强，你在具体项目中是采用什么样的方式设计、组织代码？

javascript

阅读 7.3k

4 个回答

得票最新