Detailed example analysis of url object management in js

This article mainly introduces the relevant knowledge and usage of url object management in js. Friends in need can follow the editor to learn together. Hope it helps everyone.

1. Problem description

url is an indispensable value that needs to be dealt with in the web writing process, whether it is in page jumps, ajax request data or other framework plug-ins The url provided.
For many programmers, they often encounter situations where they need to change the url (mainly the parameters contained in it) in js. The method most people use is direct splicing.
This method It is better than simplicity, but there are also many shortcomings, such as:

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

Get all the information from a complete URL It is also a troublesome thing to include parameters and pure addresses for the next step of comparison;

2. Solution ideas

Based on the above problems, my solution strategy is to The URL is managed object-wise, and the URL pure address and URL parameters are placed in each attribute of an object.
Every time the URL is changed, you can first analyze it into the object format, then change some of the parameters, and then Establish it as a new url method.
You may feel that it is a bit unnecessary when you start building it like this, but it will be very convenient when dealing with some more complex situations.

3. Demonstration code

First provide a method for analyzing and constructing URLs (you can consider encapsulating it into a method, and 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 only for display A relatively simple situation may not be fully reflected in 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 used It is very flexible.

Of course, when actually used, for the sake of safety, when generating a new URL, a new object will usually be created first instead of modifying the original object.

4. Areas for improvement

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 in this method. It is no longer applicable.

You can also optimize the method and convert the method into a method suitable for parsing and reconstruction of path parameters, which is another story later.

Related recommendations:

Object-oriented programming in JavaScript

h5 New features of PHP5: More object-oriented PHP

JavaScript introductory tutorial (12) js object programming_basic knowledge

The above is the detailed content of Detailed example analysis of url object management in js. For more information, please follow other related articles on the PHP Chinese website!