JS-实现的各类函数工具库
2022-04-12 本文已影响0人
coderhzc
一.函数的防抖:
<!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>
<p>
没有防抖: <input type="text" class="cur">
</p>
<p>
有防抖: <input type="text" class="debounce">
</p>
<script>
// 函数防抖和节流
// 函数防抖: 在开发当中 经常会遇到一些事件频繁的触发 比如说: 鼠标事件,scroll,resize,input 等等
// 在事件触发N秒后执行一次
// 不防抖
var input = document.querySelector(".cur")
input.addEventListener('keyup', function() {
console.log("拉取服务器的数据");
})
// 防抖函数 (闭包)
// 这个就就叫做闭包
var input1 = document.querySelector('.debounce');
function debounce(callBack, time) {
// 声明一个变量,统计延期个数
let timer;
return function() {
if (timer) clearInterval(timer)
timer = setTimeout(callBack, time)
}
}
// N秒后执行的函数
function handler() {
console.log(121321313);
}
// 绑定事件
input1.addEventListener('keyup', debounce(handler, 1000))
</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>
<!--
应用场景: 比如当你点击按钮按钮100次的时候,你只希望提交一次 那么就可以用一下的代码
-->
<body>
<button>单击按钮</button>
<script>
// 节流: 在N秒内函数执行一次
var btn = document.querySelector('button')
function throttle(callBack, time) {
// 锁头
var lock = true;
return function() {
if (lock) {
lock = false
setTimeout(() => {
lock = true
callBack()
}, time)
}
}
}
function handler() {
console.log("提交数据");
}
btn.addEventListener("click", throttle(handler, 1000))
</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>
/**
* forEach
* map
* filter
* reduce
* reduceRight
* every
* some
* deepClone
* **/
对象的深拷贝
const obj = {
name: "huzhenchu",
age: 28,
job: "前端开发",
say:function() {
console.log("我会说话");
},
info: {
field: ['JS', "CSS", "JavaScript"],
frameWork: ["React", "Vue", "Angular"],
student: [
{
name: "zhangsan",
age: 18
},
{
name: "lisi",
age: 20
},
]
},
hobby: ["pinao", "trenen"]
}
// 数组的拷贝
const obj = [
{
name: "zhangsan",
age: 18
},
{
name: "lisi",
age: 20
},
]
function deepClone(origin, target) {
var tar = target || {};
var toStr = Object.prototype.toString;
for (var k in origin) {
if (origin.hasOwnProperty(k)) {
if (typeof origin[k] === 'object' && origin[k] !== null) {
tar[k] = toStr.call(origin[k]) === '[object Array]' ? [] : {}
deepClone(origin[k], tar[k]); // 递归函数
} else {
tar[k] = origin[k];
}
}
}
return tar
}
var newObj = deepClone(obj)
console.log(newObj);
</script>
</body>
</html>
对象的实际截图:
image.png
数组的实际截图:
image.png
四. JS 获取当前时间格式化 和 倒计时
//时间案例
function getNewYear() {
var date = new Date();
var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六',]
var year = date.getFullYear(); //获取到的是当年的年份
var month = date.getMonth()+1; //获取到的是几月
var dates = date.getDate();// 获取到的的是几号
var day = date.getDay(); //获取到的是 星期几
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
h = h < 10 ? '0' + h : h;
m = m < 10 ? '0' + m : m;
s = s < 10 ? '0' + s : s;
return year + '年/' + month + '月/' + dates + '日/'+arr[day] +'现在时间：'+ h + ':' + m + ':' + s
}
console.log(getNewYear()) //获取到当前面的年月日
//倒计时案例
//核心思维 用结束时间的总秒数 - 现在的时间的总秒数 = 剩余时间的总秒数
function get(time) {
//求结束时间的总毫秒数
//Date.now() 这个是获取到现在的毫秒数 如果把用户输入的时间写在里面的话就会得到结束时间的毫秒数
var endTime = +new Date(time) //大的
// console.log(endTime);
//现在时间总的毫秒数 获取到当前的毫秒数
var newTime = +new Date() //小的
// console.log(newTime);
//3.求现在剩下的时间 已经转换为秒数了
var shengxia = (endTime - newTime) / 1000;
//4.转换为时分秒
//1.时
d = parseInt(shengxia / 60 / 60 / 24); //得到的是总的天数
d = d < 10 ? '0' + d : d;
h = parseInt(shengxia / 60 / 60 % 24); //计算小时
h = h < 10 ? '0' + h : h;
m = parseInt(shengxia / 60 % 60); //计算分钟
m = m < 10 ? '0' + m : m;
s = parseInt(shengxia % 60); //计算当前的秒数
d = s < 10 ? '0' + s : s;
return '剩余的时间' + d + '天 ' + h + '时' + m + '分' + s + ' 秒';
}
console.log(get('2019-9-3 08:08:08'))
//时分秒案例
function getTime() {
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
h = h < 10 ? '0' + h : h;
m = m < 10 ? '0' + m : m;
s = s < 10 ? '0' + s : s;
return h + ':' + m + ':' + s
}
console.log(getTime());
五. js 前端实现时间实时更新效果
image.png
## 简单原理就是：
- 封装一个时间格式的方法，加一个定时器，每秒去刷新一次，模拟成为时间更新效果
## 1. 封装公共方法
export function timeNow() {
let vWeek, vWeek_s, year, month, day, hours, minutes, seconds;
vWeek = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
let date = new Date();
year = date.getFullYear();
month = date.getMonth() + 1;
day = date.getDate();
hours = date.getHours();
hours = hours > 9 ? hours : "0" + hours;
minutes = date.getMinutes();
minutes = minutes > 9 ? minutes : "0" + minutes;
seconds = date.getSeconds();
seconds = seconds > 9 ? seconds : "0" + seconds;
vWeek_s = date.getDay();
let time = year + "年" + month + "月" + day + "日" + "\t" + hours + ":" + minutes + ":" + seconds + "\t" + vWeek[vWeek_s];
return time
}
## 可以根据需求更改展现格式
### 2. 使用
引入：
import { timeNow } from "../../utils/getMaininfo";
从页面加载起，开始执行：
getAll() {
this.tiemEq = setInterval(() => {
/* 时间 */
this.nowTime = timeNow();
}, 1000);
}
[注：这里给定时器生成定义，以便后续销毁]
## 3. 销毁
由于定时器的特殊性，在关闭页面时，及时销毁，避免造成资源浪费甚至内存溢出
// vue生命周期
beforeDestroy() {
/* 关闭页面销毁所有定时器 */
clearInterval(this.tiemEq);
}
六.柯里化的代码实现:
<!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>
function add1(x, y, z) {
return x + y + z
}
function add2(x, y, z) {
x = x + 2;
y = y * 2;
z = z * z;
return x + y + z
}
function makeAdder(count) {
return function (num) {
return count + num;
}
}
function log(date, type, message) {
console.log(`[${date.getHours()}:${date.getMinutes()}]:[${type}]:[${message}]`);
}
// 柯里化函数的实现
function hyCurrying(fn) {
console.log('fn:=>', fn);
function curried(...args) {
console.log("...args:=>", ...args);
console.log("args:=>", args);
// 判断当前已经接收的参数的个数,可以参数本身需要接收的参数是否已经一致了
console.log("args.length是可以拿到函数参数的长度的:=>", args.length); // args.length是可以拿到函数参数的长度的
// 1.当已经传入的参数, 大于等于 需要的参数时,就执行函数
if (args.length >= fn.length) {
console.log('this:=>', this);
return fn.apply(this, args)
} else {
// 没有 达到个数时,需要返回一个新的函数,继续来接收参数
function curried2(...args2) {
// 接收到参数后, 需要递归调用curried 来检查函数的个数时候达到
return curried.apply(this, [...args, ...args2])
}
return curried2
}
}
return curried;
}
var curryAdd = hyCurrying(add1);
console.log(curryAdd(10, 20, 30));
// console.log(curryAdd(10, 20)(30));
// console.log(curryAdd(10)(20)(30));
</script>
</body>
</html>
七.JS 实现全屏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
img {
width: 200px;
height: 200px;
border: 10px solid #999;
}
</style>
</head>
<body>
<div>
<img src="https://img2.baidu.com/it/u=3437217665,1564280326&fm=26&fmt=auto" alt="">
<input type="button" id="full" value="全屏">
<input type="button" id="cancelfull" value="退出全屏">
<input type="button" id="isFull" value="是否全屏">
</div>
<script>
/*
全屏接口的使用
*/
var div = document.querySelector('div');
var img = document.querySelector('img');
/*
1.requestFullScreen():开启全屏显示
不同浏览器需要加不同的前缀
Chrome:webkit firefox: moz ie:ms opera:o
2.cancelfullScreen():退出全屏显示
Chrome:webkit firefox: moz ie:ms opera:o
3.fullScreenElement:是否是全屏状态
Chrome:webkit firefox: moz ie:ms opera:o
*/
//第一个为按钮 全屏操作
document.querySelector('#full').onclick = function () {
//开启全屏显示 webkit :处理兼容性的问题 requestFullScreen:开启全屏显示
img.webkitRequestFullScreen();
}
//退出全屏
document.querySelector('#cancelfull').onclick = function () {
//开启全屏显示 webkit :处理兼容性的问题 CancelfullScreen:开启全屏显示
//这个就不是div来调用了 这个是退出整个文档了 所以是document来调用
document.webkitCancelFullScreen();
}
document.querySelector('#isFull').onclick = function () {
//开启全屏显示 webkit :处理兼容性的问题 CancelfullScreen:开启全屏显示
document.webkitFullScreenElement();
}
/*
ononline:网络连通的时候触发这个事件
onoffline:网络断开时触发
*/
//连通
window.addEventListener('online', function () {
alert('网络连通了')
})
//断开
window.addEventListener('offline', function () {
alert('网络断开了')
});
</script>
</body>
</html>
八. 格式化大数字:
// 格式化大数字:
function formatCount(count) {
var counter = parseInt(count)
if (counter > 100000000) {
return (counter / 100000000).toFixed(1) + "亿"
} else if (counter > 10000) {
return (counter / 10000).toFixed(1) + "万"
} else {
return counter + ""
}
}
// 2. 格式化时长:
function padLeftZero(time) {
time = time + ""
return ("00" + time).slice(time.length)
}
function formatDuration(duration) {
duration = duration / 1000
// 488s / 60 = 8.12
var minute = Math.floor(duration / 60)
// 488s % 60
var second = Math.floor(duration) % 60
return padLeftZero(minute) + ":" + padLeftZero(second)
}
image.png
九. JS 如何处理双引号,反斜杠,中括号这种问题
遇到一下问题怎么处理呢?
image.png
let code1 = '"A03"' // 需求: 让 "\"A03\"" 变为: A03, 在网页上显示A03
let code2 = '["A03"]' // 需求: 让 "[\"A03\"]" 变为: A03 在网页上显示A03
let code3 = '[]' // 空 在网页上显示空
let code4 = '"\\"A0201-停机时伴有火花\\""' // 让 "\"\\\"A0201-停机时伴有火花\\\"\"" 变为: A0201-停机时伴有火花 在网页上显示A03 // 统一写一个正则处理所有的问题?
// 1. 使用JS来处理:
// 格式化斜杠 中括号, 双引号
export function getTxt(code) {
if (code === '[]' ||code === "[]") {
return "";
}
if (code) {
var txt = (code + "").replace(/\\|"|""/g, "");
txt = txt.replace("[", "");
txt = txt.replace("]", "");
return txt;
}
}
// 2. 方式二正则:
function getValue(value){
return value.match(/[-\u4e00-\u9fa5a-zA-Z0-9]{0,1}/gm).join(' ')
}
