How to implement object-based management of URLs in js

This article mainly introduces the relevant knowledge and usage of url object management in js. Friends in need can learn together.

1. Problem description

url is an indispensable value that needs to be dealt with in the web writing process, whether it is jumping from page to page. In the transfer, it is still ajax request data or the url provided by other framework plug-ins.
For many programmers, js often encounters the need to change the url (mainly the parameters contained in it). Most people use The method is to directly splice.
This method is better than simplicity, but it also has many shortcomings, such as:

There are always potential dangers in the security of the URL formed by splicing;

Obtaining the parameters and pure address contained in a complete URL for the next step of comparison is also a troublesome matter;

2. Solution idea

Based on the above problems, my solution strategy is to objectify the url, and put the pure url address and url parameters into each attribute of an object.
Each time the url is To change, you can first analyze it into the object format, then change some of the parameters, and then construct it into a new url method.
When you start building it like this, you may feel that it is a bit unnecessary, but when dealing with some more complex situations , will be very convenient.

3. Demonstration code

First provides a method to analyze and construct the url (you can consider encapsulating it into a method , the method name can be more complicated to avoid duplication):

/**
 * 数据处理-解析url为一个对象
 */
function parseUrl(strUrl){
	var arrUrlPart=strUrl.split('?');
	var strUrl=arrUrlPart[0];
	var mUrl={
		url:strUrl
	};
	if(arrUrlPart.length===2){
		var strParam=arrUrlPart[1];
		var arrParamPart=strParam.split('&');
		for(i in arrParamPart){
			var strParamPart=arrParamPart[i];
			var arrParamKy=strParamPart.split('=');
			var strKey=arrParamKy[0];
			var strValue=decodeURIComponent(arrParamKy[1]);
			mUrl[strKey]=strValue;
		}
	}
	return mUrl;
}
/**
 * 数据处理-构成/组建url(字符串)
 */
function concatUrl(mUrl){
	var strUrl=mUrl.url;
	var strParam='';
	for(strKey in mUrl){
		if(strKey==='url'||mUrl[strKey]===null)
			continue;
		strParam+=(strKey+'='+encodeURIComponent(mUrl[strKey])+'&');//注入避免
	}
	if(strParam!==''){
		strParam=('?'+strParam.substring(0,strParam.length-1));
	}
	return strUrl+strParam;
}

The following are usage examples. Of course, they only show relatively simple situations and may not fully reflect the power of url object management:

var strUrl1='www.example.com/admin/product/main?group_code=test_group&p_code=shangpin1';
var mUrl1=parseUrl(strUrl1);
console.log(mUrl1.p_code);
mUrl1.p_code='shangpin2';
var strUrl2=concatUrl(mUrl1);
console.log(strUrl2);
mUrl1.group_code=null;
mUrl1.user_name='用?&=户';
var strUrl3=concatUrl(mUrl1);
console.log(strUrl3);
var mUrl3=parseUrl(strUrl3);
console.log(mUrl3.user_name);

The printed result is:

shangpin1
www.example.com/admin/product/main?group_code=test_group&p_code=shangpin2
www.example.com/admin/product/main?p_code=shangpin2&user_name=%E7%94%A8%3F%26%3D%E6%88%B7
用?&=户

In the above cases, especially case 3, it can be said that the URL conversion function is very flexible.

Of course, when actually using it, for safety For the sake of safety, when generating a new URL, a new object is usually created first instead of modifying the original object.

4. Areas to be improved

The above situation applies to non-path parameters. When using path parameters, such as:

www.example.com/admin/product/list/1

This 1 is used as a parameter, which is not applicable in this method.

The method can also be optimized and transformed into an analysis and reconstruction method suitable for path parameters, which is another story later.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

The problem of off-canvas sliding beyond the part in the mui framework

Using better-scroll in vue2.0 How to realize mobile terminal sliding

Using cli mui in Vue related area scrolling issues

Comparison of the use of express and koa (detailed tutorial)

Online paid courses in vue (detailed tutorial)

The above is the detailed content of How to implement object-based management of URLs in js. For more information, please follow other related articles on the PHP Chinese website!