@mk/url
浏览器端和Node原生模块都提供了处理url地址的API,Node的url处理器非常强大,但是无法在浏览器端使用,而浏览器端location对象只提供了对当前url的解析,而@mk/url旨在对任意给定的url解析和改造.
@mk/cli接口提供babel处理过的cjs和es6模块输出 github
url对象解析
const mk = require('mk_url')
const url = 'https://www.baidu.com:1000/s?ie=UTF-8&wd=hashchange%E5%AF%BC%E8%87%B4jssdk%E5%A4%B1%E6%95%88#aaa/bbb?name=jack'
// 解析url:
mk.parse.url(url)
{
href: 'https://www.baidu.com:1000/',
origin: 'https://www.baidu.com:1000',
protocol: 'https',
host: 'www.baidu.com:1000',
hostname: 'www.baidu.com',
port: '1000',
pathname: '/s',
search: { ie: 'UTF-8', wd: 'hashchange导致jssdk失效' },
hash: { pathname: 'aaa/bbb', search: { name: 'jack' } }
}
// 解析saerch:
mk.parse.search(url)
{ ie: 'UTF-8', wd: 'hashchange导致jssdk失效' }
// 解析hash:
mk.parse.hash(url)
{ pathname: 'aaa/bbb', search: { name: 'jack' } }
url的search增删改
表单查询时,经常会有刷新页面会记录上次查询条件的需求,这时候就可以应用search的增删改功能,生成带当前查询参数的url,pushState到history中,不会刷新页面,当用户在此刷新页面时候,从search中取之前的查询条件
const mk = require('mk_url')
const url = 'https://www.baidu.com:1000/s?ie=UTF-8&wd=hashchange%E5%AF%BC%E8%87%B4jssdk%E5%A4%B1%E6%95%88'
// 增加参数,相同则修改
mk.search.add(url,{name: 'jim'})
'https://www.baidu.com:1000/s?ie=UTF-8&wd=hashchange%E5%AF%BC%E8%87%B4jssdk%E5%A4%B1%E6%95%88&name=jim'
// 删除参数
mk.search.remove(url,['wd'])
'https://www.baidu.com:1000:1000/s?ie=UTF-8'
// 清除参数
mk.search.clear(url)
'https://www.baidu.com:1000:1000/s'