【进阶篇】JavaScript工具库的封装

简介: 【进阶篇】JavaScript工具库的封装

解析 URL Params 为对象

let url = 'http://www.domain.com/?user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&enabled';

parseParam(url)

/* 结果

{ user: 'anonymous',

 id: [ 123, 456 ], // 重复出现的 key 要组装成数组,能被转成数字的就转成数字类型

 city: '北京', // 中文需解码

 enabled: true, // 未指定值得 key 约定为 true

}

*/

function parseParam(url) {

 const paramsStr = /.+\?(.+)$/.exec(url)[1]; // 将 ? 后面的字符串取出来

 const paramsArr = paramsStr.split('&'); // 将字符串以 & 分割后存到数组中

 let paramsObj = {};

 // 将 params 存到对象中

 paramsArr.forEach(param => {

   if (/=/.test(param)) { // 处理有 value 的参数

     let [key, val] = param.split('='); // 分割 key 和 value

     val = decodeURIComponent(val); // 解码

     val = /^\d+$/.test(val) ? parseFloat(val) : val; // 判断是否转为数字

     if (paramsObj.hasOwnProperty(key)) { // 如果对象有 key,则添加一个值

       paramsObj[key] = [].concat(paramsObj[key], val);

     } else { // 如果对象没有这个 key,创建 key 并设置值

       paramsObj[key] = val;

     }

   } else { // 处理没有 value 的参数

     paramsObj[param] = true;

   }

 })

 return paramsObj;

}

const getUrlKey = function (name) {

 return (

   decodeURIComponent(

     (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(

       location.href

     ) || [, ""])[1].replace(/\+/g, "%20")

   ) || null

 )

}



/**

* 封装检验数据类型

*/


const isType = type => target => `[object ${type}]` ===              Object.prototype.toString.call(target)

 const isArray = isType('Array')

 console.log(isArray(''))


/**

* 存储localStorage

*/

export const setStore = (name, content) => {

   if (!name) return

   if (typeof content !== 'string') {

       content = JSON.stringify(content)

   }

   window.localStorage.setItem(name, content)

}

/**

* 获取localStorage

*/

export const getStore = name => {

   if (!name) return

   return window.localStorage.getItem(name)

}

/**

* 删除localStorage

*/

export const removeStore = name => {

   if (!name) return

   window.localStorage.removeItem(name)

}

/**

* 设置cookie

*/

export const setCookie = (key, value, day) => {

   const date = new Date()

   date.setDate(date.getDate() + day)

   document.cookie = key + '=' + value + ';expires=' + date + ';path=/'

}

/**

* 获取cookie

*/

export const getCookie = cname => {

   const name = cname + '='

   const ca = document.cookie.split(';')

   for (let i = 0; i < ca.length; i++) {

       let c = ca[i]

       while (c.charAt(0) === ' ') c = c.substring(1)

       if (c.indexOf(name) !== -1) return c.substring(name.length, c.length)

   }

   return ''

}

/**

* 删除cookie

*/

export const delCookie = name => {

   const exp = new Date()

   exp.setTime(exp.getTime() - 1)

   const cval = getCookie(name)

   if (cval != null) {

       document.cookie = name + '=' + cval + ';expires=' + exp.toGMTString() + ';path=/'

   }

}

/**

* 获取url参数

*/

export const getUrlId = name => {

   const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')

   const r = window.location.search.substr(1).match(reg)

   if (r != null) return unescape(r[2])

   return null

}


目录
相关文章
|
29天前
|
移动开发 JavaScript 前端开发
一些处理浏览器兼容性问题的JavaScript库
这些库在处理浏览器兼容性问题方面都有着各自的特点和优势,可以根据具体的需求和项目情况选择合适的库来使用,从而提高代码的兼容性和稳定性,为用户提供更好的体验。同时,随着浏览器技术的不断发展,还需要持续关注和学习新的兼容性解决方案。
104 48
|
22天前
|
JavaScript
如何使用内存快照分析工具来分析Node.js应用的内存问题?
需要注意的是,不同的内存快照分析工具可能具有不同的功能和操作方式,在使用时需要根据具体工具的说明和特点进行灵活运用。
39 3
|
28天前
|
JavaScript 前端开发
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
|
28天前
|
CDN
如何在项目中使用Moment.js库?
如何在项目中使用Moment.js库?
|
29天前
|
JavaScript 前端开发
如何在不影响性能的前提下使用JavaScript库来实现复杂的动画效果?
如何在不影响性能的前提下使用JavaScript库来实现复杂的动画效果?
|
29天前
|
算法 开发者
Moment.js库是如何处理不同浏览器的时间戳格式差异的?
总的来说,Moment.js 通过一系列的技术手段和策略,有效地处理了不同浏览器的时间戳格式差异,为开发者提供了一个稳定、可靠且易于使用的时间处理工具。
34 1
|
1月前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
246 9
|
1月前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
87 10
|
1月前
|
JavaScript 前端开发 搜索推荐
Moment.js、Day.js、Miment,日期时间库怎么选?
【10月更文挑战第29天】如果你需要一个功能强大、插件丰富的日期时间库,并且对性能要求不是特别苛刻,Moment.js是一个不错的选择;如果你追求极致的轻量级和高性能,那么Day.js可能更适合你;而如果你有一些特定的日期时间处理需求,并且希望在性能和功能之间取得平衡,Miment也是可以考虑的。
|
1月前
|
存储 JavaScript 前端开发
decimal.js库的安装和使用方法
【10月更文挑战第24天】decimal.js 是一个非常实用的高精度计算库,通过合理的安装和使用,可以在 JavaScript 中实现精确的数值计算和处理。你可以根据具体的需求和项目情况,灵活运用该库来解决数字精度丢失的问题。