display: contents 详解
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
display: contents 是一个相对较新的 CSS 属性值,它会让元素自身不生成任何盒子,但它的子元素和伪元素仍然正常生成。简单说:元素本身从渲染树中消失,但它的孩子还在。
基本概念
工作原理
<div class="parent">
<div class="child">内容</div>
</div>
/* 正常情 ...
一文读懂:CommonJS 和 ES Module 的本质区别
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
面试官:你能说说 CommonJS 和 ES Module 的区别吗?
我:……(脑子里只剩下 require 和 import)
说实话,这个问题你一定见过,而且99% 的前端都背过标准答案。
但真要往深了问一句:
为什么 ESM 可以 Tree Shaking?CommonJS 不行
为什么 ESM 的 import 是“只读的” ...
数组转树与树转数组
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
扁平数组转树形结构 (Array To Tree)
核心痛点
处理“数组转树”最直观的思路是使用递归配合双重循环:遍历数组中的每一项,再次遍历数组寻找其子节点。
这种做法的时间复杂度为 O(n2)O(n2)当数据量 nn较小时(如几十条菜单),性能损耗尚可忽略。但当数据量达到数千 ...
HTML5 自定义属性 data-*:别再把数据塞进 class 里了!
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
前言:由于“无处安放”而引发的混乱
在 HTML5 普及之前,前端开发者为了在 DOM 元素上绑定一些数据(比如用户 ID、商品价格、状态码),可谓是八仙过海,各显神通:
隐藏域流派:到处塞 <input type="hidden" value="123">,导致 HTML 结构像个堆满杂物的仓库。
Class ...
vue 表格 vxe-table 实现复制单元格时自动带表头
vue 表格 vxe-table 实现复制单元格时自动带表头,由于业务需求需要实现用户复制单元格粘贴到 excel 时,不知道对应是哪一列,要求需要在粘贴时自动带上表头,可以通过自带的 isCopyHeader 来启用
https://vxetable.cn
通过 clip-config.isCopyHeader 启用
<template>
<div>
<vxe-grid v-bind="gridOptions"></vxe-g ...
如何使用 vue vxe-table 甘特图 vxe-gantt 渲染显示多行任务,预计完成日期和实际完成日期多条任务条,可以自定义任务条颜色,拖拽调整日期等
如何使用 vue vxe-table 甘特图 vxe-gantt 渲染显示多行任务,预计完成日期和实际完成日期多条任务条,可以自定义任务条颜色,拖拽调整日期等
https://gantt.vxeui.com
使用树结构渲染子任务和隐藏树节点按钮来实现一行拆分多条任务条,每条任务条还可以通过css变量来设置颜色 --vxe-ui-gantt-view-task-bar-completed-bac ...
自建Umami访问统计服务并通过分享链接进行博客公开统计
前言
我想展示umami数据,但是自托管的貌似没有api,经过探索发现可以通过分享链接拿到数据
我的blogblog.dorimu.cn-umami-share-stats
抓包分析
发现分析界面 https://charity.dorimu.cn/share/xxx 获取数据分两步:
GET /api/share/{shareId}
GET /api/websites/{websiteId}/stats?...,请求头带 x-umami-share-token
...
从快照到时间序列:一次实时行情系统的结构演进与架构取舍
从快照到时间序列:一次实时行情系统的结构演进与架构取舍
在多数前端行情系统中,Ticker 快照接口足以支撑列表展示:最新价、涨跌幅、成交量定时刷新即可。
但当系统开始引入 K 线图表后,前端架构会发生一次实质性的结构变化。
这篇文章不讨论某个具体 API 如何调用,而是围绕一次真实的结构升级过程,复盘一个典型行情系 ...
为什么 SVG 能在现代前端中胜出?
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
如果你关注前端图标的发展,会发现一个现象:
过去前端图标主要有三种方案:
PNG 小图(配合雪碧图)
Iconfont
SVG
到了今天,大部分中大型项目都把图标系统全面迁移到 SVG。
无论 React/Vue 项目、新框架(Next/Remix/Nuxt),还是大厂的设计规范(Ant Design、Mate ...
Windows 下 Node.js 重定向输出导致中文乱码的问题分析
根本原因分析仅供参考,都是AI分析的
一、问题描述
在 Windows 环境下执行以下命令时,发现 中文输出出现乱码:
node client.js --code b16fcb6181383533844e5572ca9b56a8 > output.log 2>&1
但如果只重定向标准输出(stdout),则 不会出现乱码:
node client.js --code b16fcb6181383533844e5572ca9b56a8 > output.log
...
普通Fetch和Fetch 流式的区别?
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
你想弄清楚 Fetch 流式的核心定义、工作原理和实际价值,简单来说,Fetch 流式是 Fetch API 提供的「边接收、边处理」数据的能力,它让前端不再需要等待服务端返回完整的响应数据,而是能逐块读取、处理数据,是前端处理大文件、实时数据的核心能力之一。
一、Fetch 流式的 ...
一个月,Vue四件套,专为移动端深度优化的第三方网易云 WebApp
这年代真的很魔幻:物价在涨、黄金在涨,人都在悄悄发福,更别说内存条蒸蒸日上。结果回头一看,音乐软件也跟着 “发福” 到离谱。
就拿网易云来说,十年间安装包膨胀十几倍,从一个纯粹的播放器,硬生生塞成了集直播、K 歌、社区、短视频、商城于一体的 “全能平台”。权限越要越多,体积越更越大,对于性能不怎么好的设备 ...
高德地图-物流路线
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
有些时候我们的项目只使用原生一些内容是无法实现一些功能的,所以今天我带来了一个大家都熟悉的,也是生活中常见的一个功能,也就是大家在网购的时候,下单成功后就可以看到自己的订单,当然也可以查看物流信息,那么物流信息中有一个部分就是地图部分,这部分可以让用户看 ...
前端工程化 - 良好的feature-based-目录结构与具体示例
良好的feature-based-目录结构与具体示例
背景
先拆”业务边界”,不是拆组件
从业务角度来说,这个订单页其实有3个部分:
核心 - 浏览能力
订单列表
基础筛选
分页
Extension - 可选 - 插件能力
高级筛选
导出
状态变更
Detail - 按需能力
订单详情单床
重构目录结构
把 “ 按技术类型” 改为 “按业务角色”
...
vue 甘特图 vxe-gantt 设置每个进度条分为计划和实际两条,实现上下分布任务条
vue 甘特图 vxe-gantt 设置每个进度条分为计划和实际两条,实现上下分布任务条,实现方式是利用子任务的子视图渲染模式,来间每条任务拆分成2条子任务,就可以利用自带的子视图渲染功能来渲染。
https://gantt.vxeui.com
由于放2行超出默认高度,所以还需要通过 cell-config.height设置一下行高,再通过树形表格的子任务来 ...
基于PDF.js的安全PDF预览组件实现:从虚拟滚动到水印渲染
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
基于PDF.js的安全PDF预览组件实现:从虚拟滚动到水印渲染
本文将详细介绍如何基于Mozilla PDF.js实现一个功能完善、安全可靠的PDF预览组件,重点讲解虚拟滚动、双模式渲染、水印实现等核心技术。
前言
在Web应用中实现PDF预览功能是常见需求,尤其是在线教育、文档管理等场 ...
书架效果的实现
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
1. 对齐目标
前端想实现一个类似的书架放置书籍的效果,目标如下:
2. 思路梳理
我们使用的技术栈:vue
实现这样的一个效果,我们需要知道以下信息:
每行可以放置多少书本?
放下所有的书本需要多少行?
需要什么样的数据结构?
我们现在一个个来思考,既然我们选择了vue来 ...
SciChart.js v5版本全新发布:为Web图表开发带来更高效体验
近日,SciChart 官方宣布发布 SciChart.js v5 版本,这是该 JavaScript 图表库系列的重要更新之一。在本次版本升级中,开发团队重点围绕性能优化、图表渲染效率提升和功能扩展等方面进行了改进,为前端数据可视化应用提供更流畅、更灵活的开发体验。
获取SciChart.js新版试用,请联系慧都科技>>>
核心性能提升
...
用户单击文本并复制至剪帖板
Html5网页,一些内容,可以让用户点击选中文本,并把选中的文本复制至剪帖板(Clipboard)。Insus.NET已经实现与测试,记录于此,方便时可以重来查阅与参考。复制文本到剪贴板(兼容所有浏览器)
function CopyTextToClipboard(text) {
// 方法1: 使用现代Clipboard API(首选)
if (navigator.clipboard & ...
uniapp多边形动画
实现效果
使用三角形,四边形等拼成一个爱心的图形。
爱心的图形一段时间会有高光闪过。
点击爱心图形会使拼成一个心字。
实现思路
三角形,四边形可以用clip-path: polygon();画出来,确定几个顶点可以画出任意图形。
高光需要在每个多边形添加动画延迟然后加上统一的动画。
爱心变成心字只需要确定更改后的多边形顶点位 ...