解析 URL Params 为对象

  1. let url = 'http://www.domain.com/?user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&enabled';
  2. parseParam(url)
  3. /* 结果
  4. { user: 'anonymous',
  5. id: [ 123, 456 ], // 重复出现的 key 要组装成数组,能被转成数字的就转成数字类型
  6. city: '北京', // 中文需解码
  7. enabled: true, // 未指定值得 key 约定为 true
  8. }
  9. */
  10. function parseParam(url) {
  11. const paramsStr = /.+\?(.+)$/.exec(url)[1]; // 将 ? 后面的字符串取出来
  12. const paramsArr = paramsStr.split('&'); // 将字符串以 & 分割后存到数组中
  13. let paramsObj = {};
  14. // 将 params 存到对象中
  15. paramsArr.forEach(param => {
  16. if (/=/.test(param)) { // 处理有 value 的参数
  17. let [key, val] = param.split('='); // 分割 key 和 value
  18. val = decodeURIComponent(val); // 解码
  19. val = /^\d+$/.test(val) ? parseFloat(val) : val; // 判断是否转为数字
  20.  
  21. if (paramsObj.hasOwnProperty(key)) { // 如果对象有 key,则添加一个值
  22. paramsObj[key] = [].concat(paramsObj[key], val);
  23. } else { // 如果对象没有这个 key,创建 key 并设置值
  24. paramsObj[key] = val;
  25. }
  26. } else { // 处理没有 value 的参数
  27. paramsObj[param] = true;
  28. }
  29. })
  30.  
  31. return paramsObj;
  32. }
  33. const getUrlKey = function (name) {
  34. return (
  35. decodeURIComponent(
  36. (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
  37. location.href
  38. ) || [, ""])[1].replace(/\+/g, "%20")
  39. ) || null
  40. )
  41. }
  1.  
  1. /**
  2. * 封装检验数据类型
  3. */
  1. const isType = type => target => `[object ${type}]` === Object.prototype.toString.call(target)
  2. const isArray = isType('Array')
  3. console.log(isArray(''))
  1. /**
  2. * 存储localStorage
  3. */
  4. export const setStore = (name, content) => {
  5. if (!name) return
  6. if (typeof content !== 'string') {
  7. content = JSON.stringify(content)
  8. }
  9. window.localStorage.setItem(name, content)
  10. }
  11.  
  12. /**
  13. * 获取localStorage
  14. */
  15. export const getStore = name => {
  16. if (!name) return
  17. return window.localStorage.getItem(name)
  18. }
  19.  
  20. /**
  21. * 删除localStorage
  22. */
  23. export const removeStore = name => {
  24. if (!name) return
  25. window.localStorage.removeItem(name)
  26. }
  27.  
  28. /**
  29. * 设置cookie
  30. */
  31. export const setCookie = (key, value, day) => {
  32. const date = new Date()
  33. date.setDate(date.getDate() + day)
  34. document.cookie = key + '=' + value + ';expires=' + date + ';path=/'
  35. }
  36.  
  37. /**
  38. * 获取cookie
  39. */
  40. export const getCookie = cname => {
  41. const name = cname + '='
  42. const ca = document.cookie.split(';')
  43. for (let i = 0; i < ca.length; i++) {
  44. let c = ca[i]
  45. while (c.charAt(0) === ' ') c = c.substring(1)
  46. if (c.indexOf(name) !== -1) return c.substring(name.length, c.length)
  47. }
  48. return ''
  49. }
  50.  
  51. /**
  52. * 删除cookie
  53. */
  54. export const delCookie = name => {
  55. const exp = new Date()
  56. exp.setTime(exp.getTime() - 1)
  57. const cval = getCookie(name)
  58. if (cval != null) {
  59. document.cookie = name + '=' + cval + ';expires=' + exp.toGMTString() + ';path=/'
  60. }
  61. }
  62.  
  63. /**
  64. * 获取url参数
  65. */
  66. export const getUrlId = name => {
  67. const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
  68. const r = window.location.search.substr(1).match(reg)
  69. if (r != null) return unescape(r[2])
  70. return null
  71. }

JS基石之-----常用方法封装的js库的更多相关文章

  1. js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用)

    js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用) 一.总结 2.匿名函数作为参数传递 二.js进阶ajax函数封装 ajax1.js function ajax(ur ...

  2. JsQuick--个人封装的Js库

    JsQuick 该库为本人封装的Js库,尚未进行浏览器兼容 /** * 快速框架 版本:1.0.0 * 日期:2015.02.26 * 作者:简楚恩 */ /** * 快速获取控件类 */ var $ ...

  3. sChart.js:一个小型简单的图表库

    介绍 sChart.js 作为一个小型简单的图表库,没有过多的图表类型,只包含了柱状图.折线图.饼状图和环形图四种基本的图表.麻雀虽小,五脏俱全.sChart.js 基本可以满足这四种图表的需求.而它 ...

  4. Numeral.js – 格式化和操作数字的 JavaScript 库

    Numeral.js 是一个用于格式化和操作数字的 JavaScript 库.数字可以格式化为货币,百分比,时间,甚至是小数,千位,和缩写格式,功能十分强大.支持包括中文在内的17种语言. 您可能感兴 ...

  5. Vis.js – 基于浏览器的动态 JavaScript 可视化库

    Vis.js 是一个动态的,基于浏览器的可视化库.该库被设计为易于使用,能处理大量的动态数据.该库由以下几部分组成:一是数据集和数据视图,基于灵活的键/值数据集,可以添加,更新和删除项目,订阅数据集变 ...

  6. Gremlins.js – 模拟用户随机操作的 JS 测试库

    Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...

  7. Device.js——检测设备平台、操作系统的Javascript 库

    http://segmentfault.com/a/1190000000373735 Device.js 是一个可以让你检测设备的平台,操作系统和方向 JavaScript 库,它会自动在 <h ...

  8. 最简单的原生js和jquery插件封装

    最近在开发过程中用别人的插件有问题,所以研究了一下,怎么封装自己的插件. 如果是制作jquery插件的话.就将下面的extend方法换成  $.extend 方法,其他都一样. 总结一下实现原理: 将 ...

  9. Baffle.js – 用于实现文本模糊效果的 JavaScript 库

    Baffle.js 是一个 JavaScript 库,设计用来模糊和揭开DOM元素的文本. 这些元素可以是一个 CSS 选择器的形式.一个节点列表或者一个单节点. 你也可以传递一个选择对象给插件. 在 ...

随机推荐

  1. java+selenium元素定位和元素操作

    1.元素定位 ID定位元素: findElement(By.id(“”)); 通过元素的名称定位元素: findElement(By.name(“”)); 通过元素的html中的位置定位元素: fin ...

  2. 5 Ways AI is Transforming the Finance Industry

    https://marutitech.com/ways-ai-transforming-finance/ As global technology has evolved over the years ...

  3. JDOJ 1162 是否闰年

    1162: 是否闰年 https://neooj.com:8082/oldoj/problem.php?id=1162 题目描述 输入一个年份year,求year是否是闰年,如果是闰年输出L,否则输出 ...

  4. Web协议详解与抓包实战:HTTP1协议-如何用Chrome的Network面板分析HTTP报文(1)

    一.Chrome 抓包:Network 面板 1. Network 面板 • 控制器:控制面板的外观与功能 • 过滤器:过滤请求列表中显示的资源 • 按住 Command (Mac)或 Ctrl (W ...

  5. [LeetCode] 493. Reverse Pairs 翻转对

    Given an array nums, we call (i, j) an important reverse pair if i < j and nums[i] > 2*nums[j] ...

  6. [LeetCode] 435. Non-overlapping Intervals 非重叠区间

    Given a collection of intervals, find the minimum number of intervals you need to remove to make the ...

  7. Java-volatile底层实现原理

    一.volatile 代码 package jvm; public class VolatileVisibilityTest { private static boolean initFlag = f ...

  8. Nodejs操作MySQL数据库

    https://github.com/mysqljs/mysql   如何用nodejs操作MySql数据呢,其实写法还是简单的, 1.开始在你的node项目中 npm install mysql - ...

  9. Vue双向绑定原理(我尽量写的。简洁)

    先问自己两个问题: 1.app.message修改数据的时候,Vue内部是如何监听message数据发生改变的 使用Object.defineProperty ->监听对象属性的改变 2.当数据 ...

  10. 如何定时查询某线程的CPU执行时间

    #!/bin/bash pid=$(ps -T -p $(pgrep xxx) | grep xxx | gawk -F" " '{print $2}') if [ -z $pid ...