@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'