一. 认识前端工具库

---

• jQuery是一个快速、小型且功能丰富的JavaScript 库，它使HTML文档遍历和操作、事件处理、动画和AJAX 之类的事情变得更加简单。当时jQuery库不但简化了代码，而且提供出色的跨浏览器支持，其极大的提高了Web 开发人员的工作效率。 除了jQuery之外，其实还有许多库和框架可供JavaScript开发人员使用。下图是前端开发常用的工具库：

• Axios: vue部分涉及
• lodash: undersocre的分支版本，重写
• Moment: 处理时间日期的工具库，官方公告不推荐使用了
• date-fns: 处理时间日期格式化的工具库，国内用的不多
• RxJS: 响应式的js库，用的不多
• Day.js: 处理时间日期格式化的工具库，用的比较多
• jQuery: 简化dom操作、事件处理、动画和ajax的工具库，提供跨浏览器兼容
• D3: 做复杂动画交互的库
• Immer: 数据不可变的js库
• underscore: 用的越来越少
• luxon
• Ramda
• stdlib

二. Lodash vs underscore

---

1.underscore库 VS Lodash库

• Lodash 和Underscore 都是非常实用JavaScript工具库，它们都提供了非常多的函数来对数字、字符串、数组、对象等操作，这些函数不但可以简化JavaScript编写，而且可以极大的提高我们的开发效率。这些库非常适合如下操作:

  • 迭代数组、对象和字符串
  • 操作和测试值
  • 创建复合函数

• Lodash是Underscore的一个分支，仍然遵循Underscore的API， 但在底层已完全重写过。对于字符串、数组、对象等Lodash提供了跨环境迭代的支持

• Lodash还添加了许多Underscore没有提供的特性和功能，例如：提供AMD支持、深度克隆、深度合并、更好的性能、大型数组和对象迭代的优化等，如今的Lodash足以成为Underscore替代

• Lodash从第4个版本开始放弃对IE9以下的支持

  

  • 精简版lodash

      ;(function(g) {
        function Lodash() { }
        // 添加类方法
        Lodash.VERSION = '1.0.0'
        Lodash.join = function(arr, separater) {
          // todo ......
          return arr.join(separater)
        }
        Lodash.debounce = function() {}
        Lodash.throttle = function() {}
        Lodash.random = function() {}
        Lodash.endsWith = function() {}
        Lodash.clone = function() {}
        Lodash.cloneDeep = function() {}
        Lodash.merge = function() {}
        g._ = Lodash
      })(window)

2.Lodash库的安装

• 方式一：CDN

  • https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js

• 方式二：官网下载源码引入

    <script src="./libs/lodash-4.17.21.js"></script>

3.Lodash库字符串、数组

• 字符串(String)
  • _.camelCase(string) - 转换字符串为驼峰写法
  • _.capitalize(string) - 转换字符串首字母为大写，剩下为小写
  • _.endsWith(string, target) - 检查字符串是否以给定的target字符串结尾
  • _padStart(str, length,char) - 如字符串长度小于length则在左侧填充字符。 如果超出length长度则截断超出的部分
  • _.trim(string, chars) - 从字符串中移除前面和后面的空格或指定的字符
• 数组(Array)
  • _.first(arr, level) - 获取array中的第一个元素
  • _.last(arr, [n=1]) - 获取array中的最后一个元素
  • _.uniq(arr) - 创建一个去重后的array数组副本。返回新的去重后的数组
  • _.compact(arr) - 创建一个新数组，包含原数组中所有的非假值元素。返回过滤掉假值的新数组
  • _.flatten(arr) - 减少一级array嵌套深度。返回新数组

4.Lodash库对象、集合、函数

• 对象
  • _.pick(object, [props]): 从object中选中的属性来创建一个对象。返回新对象
  • _.omit(object, [props]): 反向版_.pick, 删除object对象的属性。返回新对象
  • _.clone( value) - 支持拷贝 arrays、 booleans、 date 、map、 numbers， Object 对象, sets, strings, symbols等等。arguments对象的可枚举属性会拷贝为普通对象。（注：也叫浅拷贝） 返回拷贝后的值
  • _.cloneDeep(value) - 这个方法类似_.clone，但它会递归拷贝 value。（注：也叫深拷贝）。返回拷贝后的值
• 集合(Array|Object)
  • _.sample(): 从collection（集合）中获得一个随机元素。返回随机元素
  • _.orderBy: 给数组排序，默认是升序asc
  • _.each() / _.forEach() - 遍历(集合)中的每个元素
  • _.filter() - 返回一个新的过滤后的数组
• 函数
  • _.curry() - 返回新的柯里化（curry）函数
  • _.debounce() - 返回新的 debounced（防抖动）函数
  • _.throttle() - 返回节流的函数

三. Day.js vs Mement

---

1.Moment.js库 vs Day.js库

• Moment库，官网的描述：
  • Moment 是一个JavaScript库，可以帮助我们快速处理时间和日期，已在数百万的项目中使用
  • Moment对浏览器的兼容性比较好，例如，在Internet Explorer 8+版本运行良好
  • 现在比较多人反对使用 Moment是因为它的包大小。Moment 不适用于“tree-shaking”算法，因此往往会增加Web应用程序包的大小。如果需要国际化或时区支持，Moment 可以变得相当大
  • Moment团队也希望我们在未来的新项目中不要使用Moment。而推荐使用其它的替代品。例如：Day.js
• Day.js库，官网的描述：
  • Day.js 是 Moment的缩小版。Day.js 拥有与 Moment相同的 API，并将其文件大小减少了 97%
  • Moment完整压缩文件的大小为 67+Kb，Day.js 压缩文件只有 2Kb
  • Day.js所有的API操作都将返回一个新的Day.js对象，这种设计能避免bug产生，减少调试时间
  • Day.js 对国际化支持良好。国际化需手动加载，多国语言默认是不会被打包到Day.js中的

2.Day.js库安装

• 方式一：CDN

  • https://unpkg.com/dayjs@1.8.21/dayjs.min.js

• 方式二：下载源码引入

  

3.Day.js获取、设置、操作时间

• 获取(Get) + 设置(Set)

  • .year()、.month、.date() - 获取年、月、日
  • .hour()、.minute()、.second() - 获取时、分、秒
  • .day() - 获取星期几
  • .format() - 格式化日期

• 操作日期和时间

  • .add(numbers , unit) - 添加时间
  • .subtract(numbers , unit) - 减去时间
  • .startOf(unit) - 时间的开始
    • 例如：获取今年的第一天零时零分零秒

  

      // 1.拿到Dayjs的对象
      var day = dayjs()
      // 获取时间
      console.log(day.year(), (day.month() + 1), day.date(), day.hour(), day.minute(), day.second())
      // 2.设置时间
      var day = dayjs()
                .year(2021)
                .month(5)
                .date(1)
      console.log(day.year(), (day.month() + 1), day.date(), day.hour(), day.minute(), day.second())
  
      // 1.增加一天
      var day = dayjs() // dayjs 对象
                .add(1, 'year') // 增加一年
                .add(2, 'month') // 增加2个月
                .add(-1, 'month') // 减去一个月
                .subtract(1, 'year')  // 减去一年
                .subtract(1, 'month')
                .subtract(1, 'day') 
                .startOf('year')  // 一年的开始 2022-01-01 00:00:00
                .startOf('month')  
                .startOf('day') 
  
      // 时间的格式化
      console.log( day.format("YYYY-MM-DD HH:mm:ss") )

4.Day.js解析、国际化、插件

• 解析时间

  • dayjs(毫秒|秒) - 时间戳（毫秒和秒)
  • dayjs('2022-06-15') - ISO 8601格式的字符串
  • dayjs(new Date()) - 接收日期对象

      // 1.解析一个字符串(ISO 8601)类型的时间
      // YYYY-MM-DD HH:mm:ss
      // YYYY-MM-DD
      // YYYY/MM/DD
      var day = dayjs('2021-2-2 12:00:10') // dayjs 对象
      // 2.解析时间戳(毫秒)
      var day = dayjs(1656206934331) // dayjs 对象
      // 3.解析时间戳(秒)
      var day = dayjs.unix( 1656206934 ) // dayjs 对象
      // 4.解析Date对象
      var day = dayjs(new Date('2022-10-1')) // dayjs 对象 
      // 时间的格式化
      console.log( day.format("YYYY/MM/DD HH/mm/ss") )

• Day.js的插件应用

  • .fromNow() - 从现在开始的时间（需要依赖：relativeTime 插件）
  • relativeTime插件：
    • https://cdn.jsdelivr.net/npm/dayjs@1.11.3/plugin/relativeTime.js

    <script src="./libs/dayjs.js"></script>
    <!-- 会在 Dayjs 的原型上添加: fromNow .... -->
    <script src="./libs/dayjs.relative-time.min.js"></script>
    <!-- 
      给给dayjs的全局变量 Ls 添加了一个中文支持
     -->
    <script src="./libs/dayjs.zh-cn.min.js"></script>
    <script>
      // 1.安装插件
      dayjs.extend(dayjs_plugin_relativeTime)
      // 2.切换使用中文
      dayjs.locale('zh-cn')
      // 1. 1小时   5分钟   2天前
      var day = dayjs(1656206934331) // dayjs 对象
      console.log(day.fromNow())
    </script>