js分解url参数（面向对象-极简主义法应用）

下面是关于“js分解url参数（面向对象-极简主义法应用）”的完整攻略。

1.什么是URL参数

URL参数是指在URL中传递的键值对，以“&”符号分隔。例如以下URL中的参数是name=Lucy和age=18

http://www.example.com?name=Lucy&age=18

2.为什么要分解URL参数

在Web应用程序中，处理URL参数是非常常见的操作。分解URL参数可以使开发人员可以轻松地将它们转换为JavaScript对象，以方便管理和处理。

3.如何分解URL参数

下面是一种面向对象-极简主义法应用的方法，通过在URL对象上使用一个名为parseParams的方法，来返回JSON格式的解析参数。以下是代码示例：

const URL  = {
  /* values of the URL */
  url: "",
  params: {},
  /* prototype of the methods */
  parseParams: function(){
    const paramMap = {};
    if (this.url.indexOf("?") === -1) return paramMap;
    const params = this.url.split("?")[1].split("&");
    params.forEach(param=>{
      const ps = param.split("=");
      paramMap[ps[0]] = ps[1];
    })
   return paramMap;
  }
}

然后，你可以先创建一个URL对象，并将URL和参数赋值，然后调用parseParams方法来分解URL参数。如下所示：

/* create a URL object */
let myUrl = Object.create(URL);
myUrl.url = "http://www.example.com?name=Lucy&age=18";
/* call the parseParams method */
myUrl.params = myUrl.parseParams();
console.log(myUrl.params);

你会得到以下输出结果：

{ name: "Lucy", age: "18" }

4.示例应用

示例1

可以将URL参数作为查询字符串传递到后端，以获得特定结果。以下是示例应用：

1. 我们有一个API用于查询学生信息，URL是：http://www.example.com/student
2. 我们打算使用以下查询参数来获得学生信息: name, major, grade。
3. 我们有一个HTML表单，其中有3个输入框，用户可以输入查询参数，例如：name=lucy，major=computer，grade=2019。
4. 将表单中的所有输入放入一个对象中，然后将对象转换为GET请求中的查询字符串。
5. 从后端服务器获得来自http://www.example.com/student?name=lucy&major=computer&grade=2019 的响应。

下面是JavaScript代码示例：

<!-- HTML表单 -->
<form>
    <input type="text" name="name">
    <input type="text" name="major">
    <input type="text" name="grade">
    <button type="button" onclick="queryStudent()">查询</button>
</form>

/* JavaScript代码 */
function queryStudent() {
    let params = {};
    const form = document.forms[0];
    for (let i = 0; i < form.length - 1; i++) {
        params[form[i].name] = form[i].value;
    }
    const paramString = Object.entries(params)
                        .map(e => e.join('='))
                        .join('&');
    const url = `http://www.example.com/student?${paramString}`;
    fetch(url,{
      method: "GET",
      headers:{
        "Content-Type":"application/json"
      }
    })
    .then(res => res.json())
    .then(data => {console.log(data)})
    .catch(err => console.log(err));
}

示例2

可以在JavaScript中使用解析函数来获取具体的URL参数值。以下是示例应用：

1. 我们有一个URL：http://www.example.com?name=lucy&major=computer&grade=2019。
2. 我们需要分解查询字符串，并获取name参数的值并将其打印。

下面是JavaScript示例：

/* 获取name参数的值 */
function getName(){
    const URL  = {
      /* values of the URL */
      url: "",
      params: {},
      /* prototype of the methods */
      parseParams: function(){
        const paramMap = {};
        if (this.url.indexOf("?") === -1) return paramMap;
        const params = this.url.split("?")[1].split("&");
        params.forEach(param=>{
          const ps = param.split("=");
          paramMap[ps[0]] = ps[1];
        })
       return paramMap;
      }
    }
    /* create a URL object */
    let myUrl = Object.create(URL);
    myUrl.url = "http://www.example.com?name=lucy&major=computer&grade=2019";
    /* call the parseParams method */
    myUrl.params = myUrl.parseParams();
    console.log(myUrl.params.name);
}

你将会得到以下输出结果：

lucy

以上是JS分解URL参数的完整攻略和两个示例应用。