Javascript 常用JS库
underscore.js库 和 Lodash.js库
这两个库呐,都是实现的是对数字、字符串、数组、对象进行的操作的 JavaScript 库
- 实现的是迭代数组,对象或者字符串
- 操作和测试值
- 创建复合函数
- Lodash 就是 underscore 的一个分支,只是对 underscore 库的再次封装优化,对于字符串,数组或者对象的操作
- 我们的 Lodash 可以实现支持跨环境迭代的支持
- 同时 Lodash 在 underscore 还为我们提供了 AMD 支持,深度克隆,深度合并,更好的性能。大型数组和对象迭代的优化
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>下面是 Lodash CDN 的导入方式
script src="下面的 url 连接"><script>
Lodash 的基本使用
- 引入了上面的CDN 之后,就实现了给我们的 window 添加了一个函数 lodash ,使用
_来简单的替代- 这个标识符添加到的是我们的 window 对象上的
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script> </head> <body> <script> console.log(`lodash 版本号为: ${_.VERSION}`) </script> </body> </html>
lodash 库的实现形式
// 开始实现手写我们的 lodash 的JS 模拟库
// 一般的话我们实现手写一个 JS 库的话,都是使用的是我们的 立即执行函数 IIFE
;(function(globalThis) {
// 先定义一个构造函数函数
function lodash() {
}
// 为我们的 lodash 添加类方法
lodash.VERSION = "1.0.0"
lodash.join = function(arr, sep) { return arr.join(sep) }
lodash.debounce = function(func, wait, immediate) {} // 防抖函数方法的添加
lodash.throttle = function(func, wait, immediate) {} // 节流函数方法的添加
lodash.random = function(min, max) {} // 随机数方法的添加
lodash.endsWith = function() {}
lodash.startsWith = function() {}
lodash.clone = function() {}
lodash.cloneDeep = function() {}
lodash.merge = function() {}
// 为我们的 window 对象添加全局标识符 _
globalThis._ = lodash
})(window)
Moment.js 库 和 Day.js 库
Moment.js 是一个用来实现快速的处理时间和日期的库
- 实现的是对浏览器的兼容性十分的好
- 但是现在不建议使用,因为其包的占用量十分的大
- 就是因为这个缺点的存在,所以说我们现在使用的 JS 库就是我们的 Day.js 库来进行处理我们的时间和日期
Day.js 库也是一个用来实现快熟处理时间和日期的库
- 这个库是 Moment.js 的一个缩小版,同时打包上线的时候大大减少打包体积
- Day.js 所有的 API 的操作都是会返回一个新的 Day.js 对象,这种设计大大减少了 bug 产生的可能性,减少了调试时间
- Day.js 对我们的支持国际化十分的良好
- Day.js 中文官网