preface

Whether you’re a front-end developer or a back-end developer, code encapsulation is a must. The reason encapsulation is so important is because it’s easy to maintain and clean up your code later. Because it encourages people to encapsulate duplicate code.

example

When we do front-end development, we have to consider preventing Repeated Ajax submissions. If you do not do the project to prevent repeated submission you can refer to prevent repeated submission, write very simple, I believe you can see at a glance. Now let’s take Ajax as an example. If you haven’t wrapped Ajax in your development, I suggest you consider wrapping it twice. Because only then can we control the code. As shown in the figure:

/** * Ajax request * @data {* action:'Request path'@callback {Function} Callback {Function} callback {Function} Data) * @async {Boolean} Default async, pass value is synchronous * * */ var ajaxdata =function(data, callback, async) {
	return $.ajax({
		type: "post",
		url: data.action,
		data: data,
		async: async ? false : true// Async istrue, the synchronizationfalse
		dataType: "json",
		success: function(d) {
			if(! d.result) {if(d.login_error) { //data.msg=="User is not logged in or login is invalid"
					alert("Your account has been logged in elsewhere, you have been forced offline!");
					return;
				} else {
					alert(d.msg);
				}
			}
			callback(d.result, d);
		},
		error: function(xhr, type, exception) {
			callback('404', JSON.stringify(xhr)); }}); };Copy the code

Although the above code satisfies the session state loss log out, preventing double commits is not done. Take a look at the code below:

; (function(win) { var cache = {}; /** * get the absolute path * @url {String} request path ** /function getbasePath(url) {
		return 'http://127.0.0.1:8020/'+ url; }; /** * Ajax request * @data {* action:'Request path'*/ * page:1// parameter *} * @callback {Function} Request callback two parameters (state: state, data: data) * @async {Boolean} default async, pass value is synchronous * */ var ajaxdata =function(data, callback, async) {
		var old_data = data;
		if(cache[JSON.stringify(data)]) return; // Prevent cache[json.stringify (data)] = 1; var url = getbasePath(data.action);return $.ajax({
			type: "get",
			url: url,
			data: data,
			async: async ? false : true// Async istrue, the synchronizationfalse
			dataType: "json",
			success: function(d) {
				cache[JSON.stringify(old_data)] = 0;
				if(! d.result) {if(d.login_error) { //data.msg=="User is not logged in or login is invalid"
						alert("Your account has been logged in elsewhere, you have been forced offline!");
						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)); }}); }; // Mount window win. ajaxData = ajaxData; }(window));Copy the code

The above code satisfies

1. Prevent repeated submission 2. Obtain the relative path 3Copy the code

conclusion

From the above we can see the importance of code encapsulation, which is not only less code, but also code development on the middleware. Hopefully you found the above examples helpful.