携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第16天，点击查看活动详情

名称：useQueryParams

处理URL请求后参数截取和转换

设计来源：

之前项目中大量模块传递参数，大部分都是路由的query提取或者直接location.search，需要写一堆代码，设计这个hooks，目的是简化代码，简单、简单

import { queryHelper } from "@basic-utils";
import { ref } from "vue";
const query = queryHelper.queryFormat(location.search);
const mid = ref();
mid.value = query?.matchid;

这个还算好的，有专门的工具函数来进行location.search解析

封装后的结果：

import { useHistory, useQueryParams } from "@hooks";
useQueryParams('bankId')

设计实践：

import { queryHelper } from "@basic-utils";

const useQueryParams = (key) => {
  const query = queryHelper.queryFormat(location.search)
  return key ? query[key] : query
};

export default useQueryParams

这块其实就是把平常使用的一堆代码汇聚到一起，如果传入参数，按照参数key进行取值，如果不传入，直接返回所有的参数对象。

下来我们继续深入挖掘，来看看basic-utils中的queryHelper是实现的，先上代码，在核心讲解

query.js


/**
 * 处理location.search的方法,将字符串转换成json
 * @param {string} search
 */
export function queryFormat(search = '') {
  let params = {};
  if (search === '') {
    return params;
  }
  if (typeof search === 'string') {
    search = search.indexOf('?') < 0 ? search : search.substr(search.indexOf('?') + 1);
    let a = search.split('&');
    let b = a.map((v) => v.split('='));
    b.map((v) => (params[v[0]] = v[1]));
  }
  return params;
}

/**
 * @desc 对象转化为&连接符拼接
 */
export function objectToQuery(params) {
  let url = '';
  for (var i in params) {
    if (params[i]) {
      url += `${i}=${params[i]}&`;
    }
  }
  return url.substr(0, url.length - 1);
}

function comparisonPahtname(pathname1, pathname2) {
  if (!pathname1 || !pathname2) {
    return false;
  }
  if (pathname1 === pathname2) {
    return true;
  }
  const arr1 = pathname1.split('/');
  const arr2 = pathname2.split('/');
  if (arr1.length !== arr2.length) {
    return false;
  }

  return arr1.every((v, i) => {
    if (v === arr2[i]) {
      return true;
    }
    if (arr2[i].includes(':')) {
      return true;
    }
    return false;
  });
}

export default {
  comparisonPahtname,
  queryFormat,
  objectToQuery,
};

API：

comparisonPahtname 判断2个path是否相等
queryFormat 对URL后的参数字符串转换成JSON
objectToQuery 对象转化为&连接符拼接

核心解读

comparisonPahtname，对2个path进行了多重判断
1、字符串
2、分割后数组长度判断
3、数组内每项进行判断，如果目标项中包含：就视为正常

queryFormat
参数后缀获取使用 location.search，对其进行了解析，？号和&进行查找和分割，遍历组装到对象返回。

封装完毕，本次比较简单，但是主要目的还是方便开发使用....

业务层-封装hooks之useQueryParams