使用面向对象的方式书写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])
			}
		}
	}

总结：

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