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>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/80918.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/80918.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/80918.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！