使用面向对象的方式书写jQuery业务代码

因为公司还有还有一些老项目使用的是前后端不分离的形式，不得不采用jQuery作为技术栈进行前端开发。考虑到函数排序很随性可能导致后期维护麻烦的情况，按照知乎小爝Live所推荐的方式做了一次改版，感觉还行，特来分享。

整体页面结构如下

    ;(function (global, $, doc) {
        ‘use strict’;
        var Application = function () {
            this.a = 1,
            this.b = 2,
            this.eventsMap = {
                “click #btnOne”: “funcOne”,
                “click #btnTwo”: “funcTwo”
            }
            this.initEvent();
        };
        Application.prototype = {
            constructor: ‘Application’,
            funcOne: function () {
                console.log(‘You are clicked btn one!’);
            },
            funcTwo: function () {
                console.log(‘You are clicked btn two!’);
            }
        };
        global.Application = Application;
        $(function () {
            new Application()
        });
    })(this, jQuery, jQuery(document));

我们在每个页面下，创建一个匿名函数，传入当前上下文、jQuery对象 以及 document 元素。在一开始，在onload完成后，创建一个当前页面的业务处理对象，有点像接口的感觉。然后依次设定私有变量，当前页面的事件映射和初始化函数，并将所有函数绑定到原型上，方便使用。

关于 eventsMap 对象的使用, 需要对其中的所有事件进行一次性全部绑定。所以初始化函数执行时应该有函数映射的初始化。函数如下：

initEventsMap: function (maps) {
    var matchExp = /^(\w+)\s*(.*)$/;
    for (var keys in constMap) {
        if (maps.hasOwnProperty(keys)) {
            var matchResult = keys.match(matchExp);
            doc.on(matchResult[1], matchResult[2], this[maps[keys]].bind(this))
            // 原型为 document.on(event, element, function)
        }
    }
}

至此，我们已经可以愉快地写函数代码了。当需要增加绑定事件时，只需要在eventsMap中注册事件即可。按照这种统一初始化绑定的思路，你还可以对选择器进行简化。

    this.selectMap = {
        “idELement”: ‘#element’,
        “classElement”: “.head .page-title”
    }

    initSelector (maps) {
        for(var keys in maps) {
            if (maps.hasOwnProperty(keys)) {
                this[keys] = $(maps[keys])
            }
        }
    }

总结：

该框架通过事件与地图的映射关系，统一对事件进行绑定，更直观的查看元素，方便定位事件位置。同时，结构清晰的代码、统一的入口更符合高内聚、低耦合的软件设计原则，有不足和地方欢迎探讨。