当前位置:   article > 正文

前端效率高不高,看你js库选的好不好_lodash cookie

lodash cookie

虽然面试中底层原理避免不了,不过大部分人的真实前端开发工作中,没有太多涉及原理底层的东西,CTRL+C与CTRL+V的工作占了80%,剩下的一点的就要靠自己逻辑思维了。。。

前面我在算法篇里讲的第一个防抖节流函数,只是最简单版本,想要完整,其实也不容易,自己写又会有很多bug。。。

业务开发过程中,会经常用到日期格式化url参数转对象浏览器类型判断节流函数等常用函数,那么为啥不用成熟的开源js类库呢?这样会让自己减少很多工作量。

下面给大家安利俩款自己平时很喜欢用的js类库。

一,outils

地址:outils - npm

安装:npm install --save-dev outils

使用:const outils = require("outils");

// vue-methods里

// click2: outils.debounce(500, false, function() {

//   console.log("防抖");

// });

API文档

Array

  arrayEqual  判断两个数组是否相等

Class

  addClass  为元素添加class

  hasClass  判断元素是否有某个class

  removeClass  为元素移除class

Cookie

  getCookie  根据name读取Cookie

  removeCookie  根据name删除Cookie

  setCookie  添加Cookie

Device

  getExplore  获取浏览器类型和版本号

  getOS  获取操作系统类型

Dom

  getScrollTop  获取滚动条距顶部的距离

  offset  获取一个元素的距离文档(document)的位置,类似jQ中的offset()

  scrollTo  在${duration}时间内,滚动条平滑滚动到${to}指定位置

  setScrollTop  设置滚动条距顶部的距离

  windowResize  H5软键盘缩回、弹起回调

Function

  debounce  函数防抖

  throttle  函数节流

Keycode

  getKeyName  根据keycode获得键名

Object

  deepClone  深拷贝,支持常见类型

  isEmptyObject  判断Object是否为空

Random

  randomColor   随机生成颜色

  randomNum  生成指定范围随机数

Regexp

  isColor  判断是否为16进制颜色,rgb 或 rgba

  isEmail  判断是否为邮箱地址

  isIdCard  判断是否为身份证号

  isPhoneNum  判断是否为手机号

  isUrl  判断是否为URL地址

String

  digitUppercase  现金额转大写

Support

  isSupportWebP  判断浏览器是否支持webP格式图片

Time

  formatPassTime  格式化${startTime}距现在的已过时间

  formatRemainTime  格式化现在距${endTime}的剩余时间

  isLeapYear  判断是否为闰年

  isSameDay  判断是否为同一天

  timeLeft  计算${startTime - endTime}的剩余时间

  monthDays  获取指定日期月份的总天数

Url

  parseQueryString  url参数转对象

  stringfyQueryString  对象序列化

二,lodash

地址:Lodash 简介 | Lodash 中文文档 | Lodash 中文网

安装:npm i --save lodash

Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法 非常适用于:

  • 遍历 array、object 和 string
  • 对值进行操作和检测
  • 创建符合功能的函数

 贴几个最常用的函数:

_.unionWith(objects, others, _.isEqual);//复杂对象数组去重

_.throttle(updatePosition, 100)//节流

_.debounce(calculateLayout, 150)//防抖

_.cloneDeep(value)//深拷贝

_.isEmpty([1, 2, 3]);//检查 value 是否为一个空对象,集合,映射或者set。 判断的依据是除非是有枚举属性的对象,length 大于 0 的 arguments object, array, string 或类jquery选择器。

_.isEqual(value, other)//执行深比较来确定两者的值是否相等。
**注意: **这个方法支持比较 arrays, array buffers, booleans, date objects, error objects, maps, numbers, Object objects, regexes, sets, strings, symbols, 以及 typed arrays. Object 对象值比较自身的属性,不包括继承的和可枚举的属性。 支持函数和DOM节点比较

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/818238
推荐阅读
相关标签
  

闽ICP备14008679号