代码封装的zhong要性

前言

无论你是前端开发者还是后端开发者，代码封装是开发者必须掌握的一部分。为什么说封装如此重要，因为你后期维护很方便、后期整理代码很方便。因为提倡大家把重复的代码封装起来。

例子

我们做前端开发的时候，防止ajax重复提交是我们必须考虑的。如果你做项目的时候没有防止重复提交您可以参考防止重复提交，写的很简单，相信你能够一目了然。现在我们就拿ajax 进行举例。如果你们平时开发没有对ajax进行封装，我建议你们还是考虑一下，进行二次封装。因为只有这样，我们才能掌握代码的主动权。如图所示：

这是没有封装时的流程。 如下图是封装过后的流程

从图中可以看到，封装过后的代码起到了一个中间件的作用，我们能够在这个中间件中做相应的操作。 比如：一天经理说，如果请求接口的时候用户会话状态丢失 后端会返回给你login_error参数。如果你没有进行封装，是不是你要把所有的$.ajax都要改一遍，而且耗工时还有可能遗漏。如果我们封装了ajaxdata函数，直接在这个函数内判断就可以了。可以参考下边代码：

/**
 * ajax请求
 * @data {
 * 	action:'请求路径',
 *      page:1//参数
 * }//请求路径与参数
 * @callback {Function} 请求回调 两个参数（state：状态，data：数据）
 * @async {Boolean} 默认异步，传值为同步 
 * 
 * */
var ajaxdata = function(data, callback, async) {
	return $.ajax({
		type: "post",
		url: data.action,
		data: data,
		async: async ? false : true, //异步为true，同步false
		dataType: "json",
		success: function(d) {
			if(!d.result) {
				if(d.login_error) { //data.msg=="用户未登录或者登录失效"
					alert("您的帐号在别处登陆，您已被迫下线!");
					return;
				} else {
					alert(d.msg);
				}
			}
			callback(d.result, d);
		},
		error: function(xhr, type, exception) {
			callback('-404', JSON.stringify(xhr));
		}
	});
};	

虽然上边代码满足了会话状态丢失退出登录，但是防止重复提交没有做。看下边这一版代码：

;(function(win) {
	var cache = {}; //用于防止重复提交
	/**
	 * 获取绝对路径
	 * @url {String} 请求路径
	 * */
	function getbasePath(url) {
		return 'http://127.0.0.1:8020/' + url;
	};
	/**
	 * ajax请求
	 * @data {
	 * 	action:'请求路径',
	 *      page:1//参数
	 * }
	 * @callback {Function} 请求回调 两个参数（state：状态，data：数据）
	 * @async {Boolean} 默认异步，传值为同步 
	 * */
	var ajaxdata = function(data, callback, async) {
		var old_data = data;
		if(cache[JSON.stringify(data)]) return;
		//防止重复提交
		cache[JSON.stringify(data)] = 1;
		var url = getbasePath(data.action);
		return $.ajax({
			type: "get",
			url: url,
			data: data,
			async: async ? false : true, //异步为true，同步false
			dataType: "json",
			success: function(d) {
				cache[JSON.stringify(old_data)] = 0;
				if(!d.result) {
					if(d.login_error) { //data.msg=="用户未登录或者登录失效"
						alert("您的帐号在别处登陆，您已被迫下线!");
						return;
					} else {
						alert(d.msg);
					}
				}
				callback(d.result, d);
			},
			error: function(xhr, type, exception) {
				cache[JSON.stringify(old_data)] = 0;
				callback('-404', JSON.stringify(xhr));
			}
		});
	};
	//挂载window
	win.ajaxdata = ajaxdata;
}(window));

以上代码满足

1. 防止重复提交
2. 获取相对路径
3. 能够及时获取到登录状态进行反馈

总结

可以从上面看出代码封装的重要性，它不仅仅是代码变少，还可以做中间件在上面对代码进行开发。希望上边的例子对您有所帮助。