Javascript 常用JS库

226 阅读2分钟

Javascript 常用JS库

underscore.js库 和 Lodash.js库

这两个库呐,都是实现的是对数字、字符串、数组、对象进行的操作的 JavaScript 库

  • 实现的是迭代数组,对象或者字符串
  • 操作和测试值
  • 创建复合函数
  • Lodash 就是 underscore 的一个分支,只是对 underscore 库的再次封装优化,对于字符串,数组或者对象的操作
  • 我们的 Lodash 可以实现支持跨环境迭代的支持
  • 同时 Lodash 在 underscore 还为我们提供了 AMD 支持,深度克隆,深度合并,更好的性能。大型数组和对象迭代的优化

image-20241129180114147.png

image-20241129180312299.png

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 中文官网

image-20241129184912044.png