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