t-comm

# 引入

import {
  resolveUrlParams,
  formatUrlParams,
  extendUrlParams,
  removeUrlParams,
  keepUrlParams,
  filterUrlParams,
  getQueryObj,
  composeUrlQuery,
  encodeUrlParam,
  decodeUrlParam,
  getUrlPara
} from 't-comm';

// or

import {
  resolveUrlParams,
  formatUrlParams,
  extendUrlParams,
  removeUrlParams,
  keepUrlParams,
  filterUrlParams,
  getQueryObj,
  composeUrlQuery,
  encodeUrlParam,
  decodeUrlParam,
  getUrlPara
} from 't-comm/lib/url/index';

# resolveUrlParams([url], [key])

描述：

提取链接参数，兼容hash模式和history模式，以及拼接异常情况

参数：

参数名 类型 默认值 描述
[url] string "''"

地址

[key] string "''"

可选，若不为空，则提取返回该key对应的参数值

返回:

地址参数对象，或者是指定参数值

示例

const url = 'https://igame.qq.com?name=mike&age=18#/index?from=china&home=china'
const params = resolveUrlParams(url); // { from: 'china', home: 'china', name: 'mike', age: 18 }
const paramsAge =  resolveUrlParams(url, 'age'); // 18

# formatUrlParams(url, keepParamsObj, [forceHistoryMode])

描述：

根据传入的参数，移除原来的所有参数，根据传入的 keepParamsObj 进行重新拼接地址，以 hash 模式返回

参数：

参数名 类型 描述
url string

地址

keepParamsObj object

参数对象

[forceHistoryMode] boolean

是否强制 history 模式

返回:

只有传入参数的地址

示例

const url1 = formatUrlParams('http://www.test.com?a=1&b=2&c=3', { e: 5 }); // http://www.test.com/#/?e=5
const url2 = formatUrlParams('http://www.test.com?a=1&b=2&c=3#/detail?d=4', { f: 5 }); // http://www.test.com/#/detail?f=5

# extendUrlParams(url, extParamsObj, [forceHistoryMode])

描述：

拼接额外参数

参数：

参数名 类型 描述
url string

地址

extParamsObj object

待添加的参数对象

[forceHistoryMode] boolean

是否强制 history 模式

返回:

重新拼接的地址

示例

const url1 = extendUrlParams('http://www.test.com?a=1&b=2&c=3#/detail?d=4', { e: 5 }); // 'http://www.test.com/#/detail?a=1&b=2&c=3&d=4&e=5'

# removeUrlParams(url, removeKeyArr)

描述：

移除参数

参数：

参数名 类型 描述
url string

地址

removeKeyArr string

待移除的参数名集合

返回:

重新拼接的地址

示例

const url = removeUrlParams('http://www.test.com/#/detail?a=1&b=2&c=3', ['a', 'b']); // 'http://www.test.com/#/detail?c=3'
const url2 = removeUrlParams('http://www.test.com?d=4&f=6#/detail?a=1&b=2&c=3', ['a', 'd']); // 'http://www.test.com/#/detail?b=2&c=3&f=6'

# keepUrlParams(url, keepKeyArr, [forceHistoryMode])

描述：

除保留参数外，一律移除

参数：

参数名 类型 描述
url string

地址

keepKeyArr string

待保留的参数名集合

[forceHistoryMode] boolean

是否强制 history 模式

返回:

重新拼接的地址

示例

const url = keepUrlParams('http://www.test.com?a=1&b=2&c=3#/detail?d=4', ['a', 'd']); // 'http://www.test.com/#/detail?a=1&d=4'

# filterUrlParams([params])

描述：

根据地址长度，进行过滤地址参数，允许指定保留特定参数

参数：

参数名 类型 默认值 描述
[params] object { limit: 1024 }

参数

params.url number

待过滤地址，默认当前页面地址

params.limit number

参数长度限制

params.keepKey array

指定保留的参数，比如业务参数、框架参数（登录态、统计上报等）

# getQueryObj(url)

描述：

url参数变对象

参数：

参数名 类型 描述
url string

输入URL

返回: Object

search对象

示例

const res = getQueryObj('https://igame.qq.com?name=mike&age=18&feel=cold&from=China');

console.log(res);
{
  name: 'mike',
  age: '18',
  feel: "cold",
  from: 'China',
}

# composeUrlQuery(url, queryObj)

描述：

组装url参数，将search参数添加在后面

参数：

参数名 类型 描述
url string

输入URL

queryObj Object

search对象

返回: string

组装后的url

示例

composeUrlQuery('https://baidu.com', {
  name: 'mike',
  feel: 'cold',
  age: '18',
  from: 'test',
});
// https://baidu.com?name=mike&feel=cold&age=18&from=test

composeUrlQuery('https://baidu.com?gender=male', {
  name: 'mike',
  feel: 'cold',
  age: '18',
  from: 'test',
});
// https://baidu.com?gender=male&name=mike&feel=cold&age=18&from=test

# encodeUrlParam(obj)

描述：

将对象字符串化

参数：

参数名 类型 描述
obj object

输入对象

返回: string

字符串

示例

encodeUrlParam({a: 1})

// '%7B%22a%22%3A1%7D'

# decodeUrlParam(obj)

描述：

将字符串解码，与encodeUrlParam相对

参数：

参数名 类型 描述
obj string

输入字符串

返回: object

对象

示例

decodeUrlParam('%7B%22a%22%3A1%7D')

// { a: 1 }

描述：

获取 Url 参数

参数：

参数名 类型 描述
paraName string

参数 key

search string

url search 部分

返回:

paraValue

示例

getUrlPara('gender', '?gender=male&name=mike&feel=cold&age=18&from=test')
// male

getUrlPara('age', '?gender=male&name=mike&feel=cold&age=18&from=test')
// 18
Last Updated: 2024/10/11 07:54:02

← v-console →