本文实现了一个基于HTML5拖拽API的可排序列表功能。通过设置元素的draggable属性，结合dragstart、dragenter和dragend事件处理，实现了列表项的拖拽排序效果。关键点包括：使用getElementsByClassName获取动态元素集合，通过异步方式设置拖拽样式，利用flex布局实现纵向排列，以及正确处理拖拽过程中的元素索引变化。CSS部分设置了user-select

懒加载会等到图片在视窗中出现时才开始加载，减少初始页面加载的资源量，占位图则在图片未加载完成前提供一个小尺寸、模糊的占位图，让页面看起来更平滑。通过配置缓存策略，浏览器可以在多次访问时直接加载缓存中的 CSS 文件，避免重新请求 （前端的缓存策略，无非就是 Localstorage，service work）假设你有多个图片，添加 data-src 属性存储图片的实际 URL，src 属性设置为占

Proxy代理， 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。使用proxy对对象进行改写，用来满足普通对象无法实现的功能或者业务逻辑。proxy代理最简单的运用const person = { name: 'dx', age: 18 }const handler = {get(target, key,

Icon（图标）组件是一种常见的用户界面元素，用于在网页、移动应用和桌面应用中显示图标。这些图标通常用来传达信息、进行导航、增强用户界面或提供视觉元素。

获取input type=file的文件将其转为base64 赋值给img 的src将整个img交给canvas重绘，通过canvas的toDataURL方法重新转为base64，将base64赋值给img的src通过上面的方式真的能压缩图片么？先看一下vue的测试代码<template><form action="/upload" enctype="multipart/form

本期介绍一个非常常用的前端插件 Clipboard.js，Clipboard.js 实现了纯 JavaScript （无 Flash）的浏览器内容复制到系统剪贴板的功能。

Watermark（水印）‌ 是一种在页面上叠加半透明文字或图案的技术，常用于保护敏感信息（如文档、图片、网页）的版权或防止未经授权的传播。以下是其核心要点：1‌. 信息标识‌：显示版权、用户信息或保密等级（如 “Confidential”）。2‌. 防篡改‌：通过覆盖页面内容，增加数据泄露的难度。‌3. 低干扰‌：半透明设计避免遮挡主体内容。‌Canvas生成‌：用 Canvas 绘制文本/图案

postcss-pxtorem 是一个 PostCSS 插件，用于将 CSS 中的像素单位（px）自动转换为 rem 单位。它的目标是帮助开发者在不同设备上实现更好的响应式设计，同时提高代码的可维护性。通过将像素单位转换为相对单位 rem，可以根据根元素的字体大小来动态调整布局尺寸，从而更好地适应不同屏幕尺寸和分辨率。以下是 postcss-pxtorem 的一些主要特点和用法：主要特点：自动转换

安装完成以后，分别单独启动wujie的主应用，和子应用，记得将node的版本都统一设置为 16 这样就可以正常体验wujie官方提供的demo。如果您的当前环境中需要切换 node.js 版本, 可以使用 nvm or fnm 进行安装.pnpm 脚手架示例模版基于 pnpm + turborepo 管理项目。vue2主应用vue.config 配置。非保活模式的子应用在主应用中的配置。react

由设计师将动画设计好，形成json文件，前端直接渲染的动画。当然gif也可以，但json相对来说体积更好，更不容易失真。