前端效率高不高，看你js库选的好不好

虽然面试中底层原理避免不了，不过大部分人的真实前端开发工作中，没有太多涉及原理底层的东西，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节点比较