52.[前端开发-JS实战框架应用]Day03-AJAX-插件开发-备课项目实战-Lodash
常用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-5console.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 -> ES11g = 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>