javaScript
javaScript
打开url
可以使用a链接 location.href=url 或者 window.open(url)
当在新页面中打开时，可以使用 window.open(url，”_blank“)
（遇到过问题）在vue项目中，后台返回一个类如 ”www.aaaaa.com“ 的 url 时，此时使用 window.open(url，”_blank“) ,发现网页跳转到 http://localhost:8080/abc/www.aaaaa.com 这样的地址，url作为路径加在了网址后面，明显有错，路径不正常。
（解决方法）window.open("http://" + url, "_blank") 将协议名作为字符串和url进行拼接，或者让后端将网址的协议名都加上，此时就能跳转正常了。
从url获取参数并转为对象
const getParameters = URL => JSON.parse(`{"${decodeURI(URL.split("?")[1]).replace(/"/g, '\"').replace(/&/g, '","').replace(/=/g, '":"')}"}`
)
getParameters("https://www.google.com.hk/search?q=js+md&newwindow=1");
// {q: 'js+md', newwindow: '1'}
简单防抖/节流
- 防抖：指定时间内 频繁触发一个事件，以最后一次触发为准
- 节流：指定时间内 频繁触发一个事件，只会触发一次
// 防抖
// fn 需要防抖的函数，delay 为定时器时间
function debounce(fn,delay){
let timer = null // 用于保存定时器
return function () {
// 如果timer存在 就清除定时器，重新计时
if(timer){
clearTimeout(timeout);
}
//设置定时器，规定时间后执行真实要执行的函数
timeout = setTimeout(() => {
fn.apply(this);
}, delay);
}
}
// 节流
function throttle(fn) {
let timer = null; // 首先设定一个变量，没有执行定时器时,默认为 null
return function () {
if (timer) return; // 当定时器没有执行的时候timer永远是false,后面无需执行
timer = setTimeout(() => {
fn.apply(this, arguments);
// 最后在setTimeout执行完毕后再把标记设置为true(关键)
// 表示可以执行下一次循环了。
timer = null;
}, 1000);
};
}
js中日期格式化常用方法
(207条消息) JS：格式化时间的方法，及获取指定格式的方法_js获取固定格式_前端-如此如此。的博客-CSDN博客
moment.js 与 day.js 日期库（推荐使用day.js）
js代码技巧
21 个简单实用的 JavaScript 代码技巧 (qq.com)
JS在web页面中调起本地应用程序
(210条消息) JS在web页面中调起本地应用程序_js启动本地程序_nine_three_的博客-CSDN博客
（注意：调用微信时，文件导出的文件名 weixin ）
脚手架教程
写给5年前端妹子的三万字脚手架教程 - 掘金 (juejin.cn)
js判断url是否是合法http/https
https://blog.csdn.net/qq_44275213/article/details/110527407
websocket
https://juejin.cn/post/7371365854012276747
参考文章： 认识WebSocket并搭建服务端_websocket服务器端搭建_Hacah的博客-CSDN博客
参考视频： 【知识点】websocket2_哔哩哔哩_bilibili
请求的network详情参考： HTML5 WebSocket | 菜鸟教程 (runoob.com)
1.新建 WebSocket 实例
var ws = new WebSocket('ws://localhost:3000');
2.webSocket.readyState
readyState属性返回实例对象的当前状态，共有四种。
- CONNECTING：值为0，表示正在连接。
- OPEN：值为1，表示连接成功，可以通信了。
- CLOSING：值为2，表示连接正在关闭。
- CLOSED：值为3，表示连接已经关闭，或者打开连接失败。
3.webSocket.onopen
onopen属性，用于指定连接成功后的回调函数。
4.webSocket.onclose
onclose属性，用于指定连接关闭后的回调函数。
5.webSocket.onmessage
onmessage属性，用于指定收到服务器数据后的回调函数。
6.webSocket.send()
send()方法用于向服务器发送数据。
7.webSocket.bufferedAmount
bufferedAmount属性，表示还有多少字节的二进制数据没有发送出去。它可以用来判断发送是否结束。
8.webSocket.onerror
onerror属性，用于指定报错时的回调函数。
实践
websocket.js （npm i express npm install ws） npm i cors -S (解决跨域)
node在package.json添加 "type": "module" 可以使用 import 语法，否则报错
import express from 'express'
import http from 'http'
import {WebSocketServer} from 'ws'
const app=express()
const server=http.createServer(app) //创建一个http服务
const wss=new WebSocketServer({server})
wss.on('connection',(ws)=>{
console.log("connection open")
// 给客户端发消息
ws.send('hell0 client')
ws.onmessage=function(e){
console.log('客户端发送的数据'+e.data)
}
})
server.listen(3000)
socket.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const ws = new WebSocket('ws://localhost:3000');
ws.onopen=function(){
console.log("open")
ws.send("server open") //给服务端发送消息
}
// 监控服务端数据
ws.onmessage=function(e){
console.log('服务端响应的数据'+e.data)
}
ws.onerror = function(event) {
console.error('WebSocket 连接出现错误：', event);
};
ws.onclose = function() {
console.log('WebSocket 连接已经关闭。');
}
</script>
</body>
</html>
JS如何实现下拉刷新和上拉加载!
javascript - 面试官：JS如何实现下拉刷新和上拉加载! - JS每日一题 - SegmentFault 思否
ai答案
PC端的下拉加载通常是通过监听滚动事件，判断滚动位置是否到达底部，然后触发加载新内容的操作。以下是一个简单的示例代码：
HTML部分：
<div id="content">
<!-- 已加载的内容 -->
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<!-- 加载更多的内容会被追加到这里 -->
</div>
CSS部分：
#content {
height: 300px; /* 设置内容区域的高度 */
overflow-y: scroll; /* 显示滚动条 */
}
.item {
height: 100px;
background-color: #f0f0f0;
margin-bottom: 10px;
}
JavaScript部分：
var content = document.getElementById('content');
content.addEventListener('scroll', function() {
// 判断滚动位置是否到达底部
if (content.scrollTop + content.clientHeight >= content.scrollHeight) {
// 加载新内容
loadMoreContent();
}
});
function loadMoreContent() {
// 模拟异步加载
setTimeout(function() {
// 创建新内容
var newItem = document.createElement('div');
newItem.className = 'item';
newItem.innerText = 'New Item';
// 将新内容追加到内容区域
content.appendChild(newItem);
}, 1000);
}
上述代码中，通过监听scroll事件，当滚动位置到达底部时，调用loadMoreContent函数加载新内容。loadMoreContent函数模拟异步加载新内容，并将新内容追加到内容区域中。
注意：该示例代码仅提供一种实现方式，具体实现可能会根据具体需求进行调整。
通过一个onclick实现点击时不同的效果
以下实现两次鼠标进入图片时，展示不同的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 图片过渡效果样式 */
img {
width: 300px;
height: 300px;
transition: all 0.5s ease-in-out;
}
</style>
</head>
<body>
<div style="width: 300px;height: 300px;background-color: red;">
<img id="img" onmouseenter="mouseEnter()" src="https://pic.ntimg.cn/file/20200605/23605973_173021196899_2.jpg" alt="">
</div>
<script>
var img = document.getElementById('img');
function mouseEnter(){
img.style.width="50%";
img.style.height="50%";
img.style.marginTop="50%";
img.style.marginLeft="50%";
img.onmouseenter=mouseEnterAgain;
}
function mouseEnterAgain (){
img.style.width="100%";
img.style.height="100%";
img.style.marginTop="0px";
img.style.marginLeft="0px";
//返回第一次执行的函数，实现循环执行
img.onmouseenter = mouseEnter;
}
</script>
</body>
</html>
GSAP动画库
GSAP 中文教程 中文文档 ｜官方文档 官方教程翻译 ｜好奇代码出品
GSAP（GreenSock Animation Platform）是一个强大的JavaScript动画库，它提供了丰富的API来创建高性能的动画效果。以下是GSAP的基本使用方法和一些关键特性：
安装GSAP：
通过npm或yarn安装：
npm install gsap // 或者 yarn add gsap通过CDN引入：
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
基本动画：
使用
gsap.to()方法创建动画。这个方法接受两个参数：目标元素和动画属性对象。
CSS 属性 properties
Transform, colors, padding, borderRadius，GSAP都能驱动它们发生变化。只是要记得要使用小驼峰的方式来写CSS样式的属性名称，比如background-color要写成backgroundColor。
import gsap from "gsap"; const element = document.querySelector('.my-element'); gsap.to(element, { duration: 2, // 动画持续时间 x: 100, // 水平移动100像素 y: -50, // 垂直移动50像素 rotation: 360, // 旋转360度 opacity: 0.5, // 透明度变化 ease: 'power1.inOut', // 缓动效果（动画曲线/缓动曲线） repeat: -1, // 重复，-1是无限重复 yoyo: true, // 来回往复，会让每次动画重复的时候往回变化，就像悠悠球一样 // 可以通过delay设置让动画开始前有一定的延迟时间（秒数）。你也可以使用repeatDelay来设置每次重复动画前的延迟时间（秒数）。 delay: 1 // 动画会延迟1秒之后开始执行 repeatDelay: 1 });// 可以把dom元素放到数组里面一起传入 let square = document.querySelector(".square"); let circle = document.querySelector(".circle"); gsap.to([square, circle], { x: 200 })GSAP并不只能变化DOM元素死的属性。你可以变化任何对象的属性，你创造的任意对象都行,onUpdate会在动画运行时触发
let obj = { myNum: 10, myColor: "red" }; gsap.to(obj, { myNum: 200, myColor: "blue", onUpdate: () => console.log(obj.myNum, obj.myColor) });Staggers 错开（依次）动画 和 Sequencing 排序动画 可以查看网站学习
时间线（用于控制多个运动的先后顺序）：
使用 （如何精确的控制每一个动画的执行顺序，并且如何把整个动画效果很好的运行起来。）
gsap.timeline()创建一个时间线，可以控制多个动画的顺序和时间。
// 创建一个Timeline类型的实例 let tl = gsap.timeline() // 把tween动画添加到timeline实例上，注意我们在用的是tl.to 而不是gsap.to 下面的三个动画会依次执行 tl.to(".green", { x: 600, duration: 2 }); tl.to(".purple", { x: 600, duration: 1 }); tl.to(".orange", { x: 600, duration: 1 }); tl.to(".green", { x: 600, duration: 2 }); tl.to(".purple", { x: 600, duration: 1, delay: 1 }); // 增加delay参数，这个动画执行之前会有1s的延迟 tl.to(".orange", { x: 600, duration: 1 }); // 位置参数 Position Parameter tl.to('.element1', { duration: 1, x: 100 }); tl.to(".green", { x: 600, duration: 2 }, 1); // 绿色方块会在整个时间线开始1秒后进行移动 tl.to(".purple", { x: 600, duration: 1 }, "<"); // 紫色方块会和之前一个添加的动画同时开始运动 tl.to(".orange", { x: 600, duration: 1 }, "+=1"); // 橘色方块会在之前所有动画都结束一秒后再开始运动 // 我们可以使用各种写法——绝对的秒数，百分比，相对值等等方式来决定tween动画在什么时候开始。 // position参数 （第三个参数，普通的 to 方法也有这个参数） // 具体的 position 参数和使用方法查看 https://gsap.framer.wiki/timelinestips tl.to('.element2', { duration: 1, y: 100 }, '-=0.5'); // 在第一个动画开始前0.5秒开始时间线的默认设置 Timeline Defaults （会被之后的所有动画继承）
如果你发现自己总是一遍又一遍的写同一个属性，那么你可以使用 defaults来进行设置。任何添加到时间线上的defaults的属性，都会被添加到这个时间线上的tween动画继承，像是通过to(),from()和fromTo()方式添加到时间线上的动画效果都是有这个继承效果的。利用这个方式可以让你的代码更简洁一些。
var tl = gsap.timeline({defaults: {duration: 1}}); //这样每个动画都是1秒的时长，不用重复写了 tl.to(".green", {x: 200}) .to(".purple", {x: 200, scale: 0.2}) .to(".orange", {x: 200, scale: 2, y: 20});
控制动画：
对动画有更多一点的控制能力,比较常见的就是比如说我们想要点击某个按钮或有了某个交互行为之后才会让元素进行动画效果。那么控制动画的几个方法呢可以帮我们实现这个需求，在tween和timeline上都有这些方法，play，pause，reverse或者是加速变化。
// 通过一个变量保存对Tween或者Timeline实例的引用 let tween = gsap.to("#logo", {duration: 1, x: 100}); // 暂停 tween.pause(); // 恢复（继续） tween.resume(); // 反向变化 tween.reverse(); // 直接切换到整个动画变化时长的0.5秒的时间点的状态 tween.seek(0.5); // 直接切换到整个变化过程的1/4的节点的状态 tween.progress(0.25); // 让运动减速到0.5倍 tween.timeScale(0.5); // 让变化加速到原来的2倍 tween.timeScale(2); // 直接销毁tween实例，让垃圾回收机制可以处理该实例所占用的内存 tween.kill();
事件和回调：
可以在动画的开始、更新、完成时添加回调函数。
onComplete：动画结束时触发
onStart：动画开始时触发
onUpdate：只要动画运行，每一帧都会触发（元素有属性变化时）
onRepeat：每次动画重复时触发
onReverseComplete：当动画反向执行后运动到变化起始点时触发
gsap.to(element, { duration: 1, x: 100, onComplete: () => { console.log('动画完成'); } });重复和Yoyo：
可以让动画重复执行，并且可以通过
yoyo属性实现来回动画。
gsap.to(element, { duration: 1, x: 100, repeat: -1, // 无限重复 yoyo: true // 来回动画 });
Stagger（交错）：
对于多个元素的动画，可以使用
stagger属性来创建交错效果。
const boxes = document.querySelectorAll('.box'); gsap.staggerFrom(boxes, { duration: 0.5, y: 50, stagger: 0.1 // 每个元素动画间隔0.1秒开始 });
响应式动画：
GSAP支持响应式动画，可以根据屏幕尺寸或其他条件调整动画。
gsap.set(element, { width: '100%', height: 'auto' });
插件：
- GSAP有许多插件，如ScrollTrigger、MorphSVG等，可以扩展其功能。具体的插件可以搜索查看了解。
性能优化：
- GSAP在动画性能方面进行了优化，确保动画流畅且不卡顿。
这些是GSAP的一些基本使用方法。GSAP的API非常丰富，可以根据项目需求进行深入学习和探索。更多高级用法和详细文档可以在GSAP的官方网站找到。