Javascript

drag 拖拽事件

在可拖动的目标上触发的事件

事件属性事件描述
drag当用户在元素上拖动时触发
dragstart当用户开始拖动元素时触发
dragend当用户拖动元素时结束时触发

在放置目标上触发的事件

事件属性事件描述
dragover当拖动元素进入目标元素时触发
dragenter当拖动元素进入目标元素时触发
dragleave当拖动元素离开目标元素时触发
drop当拖动元素放置在目标元素时触发

简单示例

1
2
3
4
5
<div class="dropzone">
  <div id="draggable" draggable="true">这个 div 可以拖动</div>
</div>
<div class="dropzone" id="droptarget"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
body {
  /* Prevent the user selecting text in the example */
  user-select: none;
}

#draggable {
  text-align: center;
  background: white;
}

.dropzone {
  width: 200px;
  height: 20px;
  background: blueviolet;
  margin: 10px;
  padding: 10px;
}

.dropzone.dragover {
  background-color: purple;
}

.dragging {
  opacity: 0.5;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
let dragged;

/* 在可拖动的目标上触发的事件 */
const source = document.getElementById("draggable");
source.addEventListener("drag", (event) => {
  console.log("dragging");
});

source.addEventListener("dragstart", (event) => {
  // 保存被拖动元素的引用
  dragged = event.target;
  // 设置为半透明
  event.target.classList.add("dragging");
});

source.addEventListener("dragend", (event) => {
  // 拖动结束，重置透明度
  event.target.classList.remove("dragging");
});

/* 在放置目标上触发的事件 */
const target = document.getElementById("droptarget");
target.addEventListener(
  "dragover",
  (event) => {
    // 阻止默认行为以允许放置
    event.preventDefault();
  },
  false,
);

target.addEventListener("dragenter", (event) => {
  // 在可拖动元素进入潜在的放置目标时高亮显示该目标
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.add("dragover");
  }
});

target.addEventListener("dragleave", (event) => {
  // 在可拖动元素离开潜在放置目标元素时重置该目标的背景
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.remove("dragover");
  }
});

target.addEventListener("drop", (event) => {
  // 阻止默认行为（会作为某些元素的链接打开）
  event.preventDefault();
  // 将被拖动元素移动到选定的目标元素中
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.remove("dragover");
    dragged.parentNode.removeChild(dragged);
    event.target.appendChild(dragged);
  }
});

文件拖拽案例

1
2
3
<div class = "drag-container">
    <span>请将文件拖拽至此!</span>
</div>
1
2
3
4
5
.drag-container{
    height: 400px;
    box-shadow: auto: 0 0 10px 1px #ccc;
    border-radius: 15px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 获取 dom 元素
const dragContainer = document.querySelector('.drag-container');
// 添加拖拽监听事件
dragContainer.addEventListener('dragover', (event) => {
    // 组织默认事件 允许拖拽放置!
    event.preventDefault();
});
// 添加拖拽放入监听事件
dragContainer.addEventListener('drop', (event) => {
    // 获取拖拽的文件
    const file = event.dataTransfer.files[0];
    // 读取文件内容
    const reader = new FileReader();
    reader.readAsText(file);
    reader.onload = () => {
        // 打印文件内容
    }
}

判断是否async函数

1
2
3
function isAsyncFunction(fn) {
  return fn && fn.constructor.name === 'AsyncFunction';
}

网络状态监控

navigator.connection 通过此api可以获取到网络状态

1
2
3
4
5
6
7
8
9
// NetworkInformation  {onchange: null, effectiveType: '4g', rtt: 50, downlink: 10, saveData: false }
{
  downlink: 10, // 下载速度
  ffectiveType: "4g",
  onchange: null,
  rtt: 50, // 网络延迟
  saveData: false
}
// [[Prototype]]: NetworkInformation

navigator.onLine 判断是否在线

监听网络状态

1
2
3
4
// 监听在线时触发
window.addEventListener('online', () => {});
// 监听离线时触发
window.addEventListener('offline', () => {});

系统级取色器

1
2
3
4
5
6
7
8
9
10
11
12
export async function getSystemColor() {

  const eyeDropper  = new EyeDropper();

  try {
    const result = await eyeDropper.open();
    console.log("result", result)
  } catch {
    console.log("用户取消!")
  }

}

监听系统主题

在 Web API中提供了一个 metchMedia 函数，它的功能就是检测系统主题色。
它接受一个媒体查询字符串作为参数，返回一个 MediaQueryList 对象。
MediaQueryList 对象有一个 matches 属性，它是个布尔值，用于表示媒体查询字符串是否匹配成功。
下面我们用简单的代码来演示一下如何获取系统主题色。

1
2
3
if(matchMedia('(prefers-color-schmem: dark)').matches) {
  console.log('当前是暗色主题')
}

媒体查询 prefers-color-scheme 是用来检测系统颜色的 CSS 媒体特性。
后面的参数可以是 light 或者 dark，分别表示浅色主题和暗色主题。
当系统的主题色发生改变时，我们还可以通过监听 MediaQueryList 对象来做一些逻辑处理。

1
2
3
4
const mediaQueryList = matchMedia('(prefers-color-scheme: dark)')
mediaQueryList.addEventListener('change', (evt) => {
  const theme = evt.matches ? 'dark' : 'light'
})

Node

幻影依赖

幻影依赖又称为幽灵依赖!
幻影依赖是通过npm包安装的第三方(axios vue elementui vuex) 所依赖的包,并不是npm自己通过install安装的!
例如: element-ui 插件 会依赖其他的npm包,这些依赖的包就是幽灵依赖
随之安装的依赖包比较多，其他依赖项也随之增加，会导致npm包的体积变大，进而占用更多的内存空间!

通过使用 pnpm 形式来解决 幽灵依赖问题!

全局安装

1
npm install pnpm -g

pnpm 会将所有幽灵依赖 单独提取到一个仓库中 并且通过 软连接的方式提供依赖包的引用!

引用站外地址
npm幻影依赖介绍
https://blog.csdn.net/qq_45225759/article/details/127855456

CSS

SCSS

Vue