52.[前端开发-JS实战框架应用]Day03-AJAX-插件开发-备课项目实战-Lodash

发布于：2025-05-01 ⋅ 阅读:(16) ⋅ 点赞:(0)

常用JavaScript库

1 认识前端工具库

前端工具类库

2 Lodash vs underscore

underscore库 VS Lodash库

Lodash库 的安装

手写精简版的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)

Lodash库字符串、数组

String

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script src="./libs/lodash-4.17.21.js"></script>
  <script>
    // 1.将字符串转成 驼峰命名
    console.log( _.camelCase(' foo bar  ')  )
    console.log( _.camelCase('--foo-bar--')  )

    console.log( _.capitalize('foo bar') )

    console.log(_.endsWith('logo.jpeg', '.png') )
    console.log(_.padStart('9', 2, '0'))   // 1 -> 01
    
    
  </script>
</body>
</html>

number

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script src="./libs/lodash-4.17.21.js"></script>
  <script>
    // 1.获取随机数
    console.log( _.random(5)  )  // 0-5
    console.log( _.random(5, 10)  )  // 5 - 10

  </script>
</body>
</html>

array

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script src="./libs/lodash-4.17.21.js"></script>
  <script>
    var obj = {}
    var colors = ['red', 'red', obj, obj,  'green', 'blue', ['orange', 'pink'] ]

    // 1.数组去重
    // console.log( _.uniq(colors) )

    // 2.扁平化
    // console.log( _.flatten(colors) )

    // 2.去除数组中假的值
    console.log( _.compact( [1, 2, {}, '', 0, null, undefined, false, 'red'] ) )
    
    
  </script>
</body>
</html>

Lodash库对象、集合、函数

object

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script src="./libs/lodash-4.17.21.js"></script>
  <script>
    var user = {
      name: 'liujun',
      age: '17',
      height: '1.66',
      friends: [
        'Evan',
        'John',
        'Mark',
        'Jack',
        'David'
      ]
    }

    
    // console.log( _.pick(user, ['name', 'friends']) )
    // console.log( _.omit(user, ['name', 'friends']) )

    // console.log( _.clone(user) )
    console.log( _.cloneDeep(user) )  // 深拷贝

    
  </script>
</body>
</html>

3 Day.js vs Mement

Moment.js库 VS Day.js库

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <!-- 
    window.dayjs = 工厂函数
   -->
  <script src="./libs/dayjs.js"></script>
  <script>
    // console.log("%O", dayjs)
    console.log("%O", dayjs()) // 创建 dayjs 对象
    console.log(dayjs().format()) // 拿到当前的时间
    
  </script>

</body>
</html>

Day.js库安装

手写DAY.js

;(function (g){
  
  // browser -> window 全局对象
  // node -> global 全局对象

  // globalThis -> ES11
  g = typeof globalThis !== 'undefined' ? globalThis : g || self

  // 构造函数
  function Dayjs() {
    var date = new Date()
    this.$Y = date.getFullYear()
    this.$M = date.getMonth()
    this.$D = date.getDate()
  }

  // 原型上的方法
  Dayjs.prototype.format = function() {
    return `${this.$Y}-${ (this.$M + 1) }-${this.$D}`
  }

  // 学习原型的上的方法
  // ......原型的方法
  // ......原型的方法
  // ......原型的方法
  // ......原型的方法
  // ......原型的方法
  // ......原型的方法
  // ......原型的方法
  
  // 工厂函数
  function dayjs() {
    return new Dayjs()
  }

  dayjs.prototype = Dayjs.prototype

  // 统一导出
  g.dayjs = dayjs
})(this)

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script src="./libs/dayjs.js"></script>
  <script >

    // 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())


  </script>
</body>
</html>

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

实践操作

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script src="./libs/dayjs.js"></script>
  <script>
    // 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") )

  </script>
</body>
</html>

时间解析

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script src="./libs/dayjs.js"></script>
  <script>
    // 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") )

  </script>
</body>
</html>

插件使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <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>
</body>
</html>

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布