JavaScript 的25个高级特性
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
很多前端同学写 JavaScript 写久了,会觉得语言特性都已经用得差不多了:函数、数组、对象、Promise……没什么新鲜感。
但其实,JavaScript 还有不少被低估的语法和技巧。
它们可能是规范里的冷门细节,可能是 ES6+ 新增的语法糖,也可能是一些看似奇怪但非常实用的特性。
本 ...
宇宙画布:纯 CSS+JS 实现交互式深空艺术
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
大家好,我是前端开发者。在前端技术不断发展的今天,CSS 早已不只是用来布局和美化页面的工具,它还能成为我们创作视觉艺术的画笔。今天给大家带来一个纯 CSS + 原生 JS 实现的交互式深空场景,无需任何图形库,就能在浏览器里呈现出繁星闪烁、星云流动、行星运转、流星划过 ...
CSS 滚动驱动动画(scroll-timeline):无 JS 实现滚动特效
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
一、传统方案的痛点
以前实现滚动动画需要 JavaScript 监听 scroll 事件:
window.addEventListener('scroll', () => {
const scrollTop = window.scrollY;
const progress = scrollTop / (document.body.scrollHeight - window.innerHeight);
// 更新进度条
progr ...
前端大文件上传的另一种提速思路
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
最近在重构项目里的大文件上传模块,本想着按常规方案实现:File API 切片、计算 Hash、封装一个带并发限制(通常习惯性设为 6)的请求池,最后调个 Merge 接口收尾。
这套方案可以说是前端圈处理大文件的标配了。但看着 Network 面板里稳步推进的进度条,我突然意识到一个经 ...
CSS终于支持渐变色的过渡了🎉
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
背景
在做项目时,总会遇到UI给出渐变色的卡片或者按钮,但在做高亮的时候,由于没有过渡,显得尤为生硬。
过去的解决方案
在过去,我们如果要实现渐变色的过渡,通常会使用如下几种方法:
添加遮罩层,通过改变遮罩层的透明度做出淡入淡出的效果,实现过渡。
通过backgroun ...
同域名、同项目、仅 hash 变化,window.location.href 不跳转
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
两个 URL 只有 hash 后面的内容不同,浏览器会认为没有真正跳转,所以 window.location.href 不执行刷新
https://域名/cash-center/#/payMethod?params=abc
https://域名/cash-center/#/bindCard?params=12345
原因:浏览器只看 # 号前面的网址,不看 # 号 ...
多租户系统框架的界面分析设计
在一个多租户系统下,包含有平台超级管理员、以及租户管理员,其他自定义租户角色等不同的角色身份,我们根据它们不同的身份,让他们各司其职,在系统中构建不同的数据维护、防护层级,从而能够让整个系统有效的运作起来,而不会造成破坏。
1、系统角色的用例分析
我们根据不同的角色身份来绘制它们的用例,对我们理解整个 ...
Three.js实现更真实的3D地球🌍动态昼夜交替
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
这一切始于一个偶然的发现。前几天笔者在应用商店闲逛时,被一款3D动态壁纸深深吸引——那颗在手机屏幕上缓缓旋转的地球,光影随着时间自然流转,从阳光灿烂的白昼到星光点点的黑夜,过渡得如此丝滑而真实。那一刻,我被这种将宇宙微观化的美感震撼了。
作为一名前端开发 ...
微信H5 页面定位权限处理
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
适用场景:微信浏览器打开的 H5 页面,使用 common-bridge 调用定位。
现象: h5 通过微信打开,无论是ios还是安卓首次会弹出定位功能的授权,若用户选择不授权,定位授权的弹窗就后续没办法再弹出。
看了官方社区目前也没有给出解决方案
解决方案:如果用户 ...
用 Intersection Observer 打造丝滑的级联滚动动画
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
无需任何动画库,仅用原生 Web API 实现滚动时丝滑的淡入滑入效果,兼顾性能与体验。
你是否见过这样的交互动效:
用户滚动页面时,一组卡片像被“唤醒”一样,依次从下方滑入并淡入;
如果这些元素在页面加载时已在视口内,它们也会自动按顺序浮现。
这种效 ...
vxe-table 自定义数字行主键,解决默认字符串主键与后端类型不匹配问题
vxe-table 自定义数字行主键,解决默认字符串主键与后端类型不匹配问题
在使用 vxe-table 表格组件时,组件默认自动生成的行主键为字符串类型,但后端接口通常要求主键为数值(number)类型,直接提交会因数据类型不匹配导致接口报错。
有两种最优解决方案,支持局部配置和全局统一配置,彻底解决类型不兼容问题。
核心解决 ...
backstage~openapi的接入与protobuf的对比
swagger外部文档
apiVersion: backstage.io/v1alpha1
kind: API
metadata:
name: petstore
description: The Petstore API
spec:
type: openapi
lifecycle: production
owner: petstore@example.com
definition:
$text: https://petstore.swagger.io/v2/swagger.json
嵌入openapi文档
apiVersion: backsta ...
uni.request 二次封装分享
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
基于uni.request api进行二次封装
核心功能
响应内容格式和请求参数格式类型定义
请求拦截器与响应拦截器配置
设置请求头和params参数处理
加载提示与自定义提示文本
错误统一处理
接口缓存
取消请求功能
失败自动重试机制
并发请求控制
核心代码
// 响应内容 ...
前端 PDF 导出:从文件流下载到自动分页
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
在工作中,我们经常会遇到需要生成 PDF 的业务,比如合同、报告等。
前后端合作
对于前端来说,最省事的就是后端生成 PDF 文件,前端根据返回的 URL 地址进行下载。
URL 下载
如果后端直接返回一个可访问的 URL 地址,我们可以通过以下几种方式进行下载:
1. 使用 window.o ...
backstage~开始一个backstage应用
应该如何创建自己公司的backstage平台
1. 两种方式的本质区别
特性
npx @backstage/create-app
从 GitHub 下载源代码
产出物
一个完整的、可立即运行和开发的 Backstage 应用。
Backstage 项目框架本身的源代码,不是你应用的代码。
目的
创建你自己的、个性化的 Backstage 开发者门户。 这是官方推荐的、标准的启 ...
JS-前端埋点神器 navigator.sendBeacon 全指南
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
前言
在前端开发中,埋点系统是必不可少的一环。我们经常需要在用户关闭页面、刷新或跳转路由时,向服务器发送最后一条统计数据(比如用户停留时长、页面跳出率)。
但这看似简单的需求,在实现时却危机四伏:请求发不出去?页面跳转卡顿?今天我们就来聊聊这个问题的终极解 ...
AI 驱动!一款开源可自部署的个人卡片式笔记工具!
大家好,我是 Java陈序员。
在日常工作中,常常需要记录工作上的事项、学习笔记、突然的灵感等。但市面上多数笔记工具,要么是云端存储,要么功能臃肿,有的不适配技术笔记的排版需求,而且大部分无法自定义,满足不了个性化使用场景。
今天,给大家介绍一款开源的个人卡片式笔记工具,不仅支持私有化部署,而且集成 AI 功 ...
Vue<前端页面版本检测>
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
为什么需要版本检测
1. 解决浏览器缓存问题
静态资源缓存:浏览器会缓存 JS、CSS 等静态资源,用户可能继续使用旧版本
用户体验影响:用户无法及时获取新功能,导致功能缺失或操作异常
2. 保障功能一致性
功能同步:确保所有用户都能使用最新的功能和修复
数据一致性:避 ...
快速构建!一款兼具设计美学与高效开发的后台系统模版!
大家好,我是 Java陈序员。
做后台管理系统,最怕什么?怕从零搭框架、配路由、写表格、调样式...一周过去,真正的业务代码一行没写。更怕界面简陋、交互生硬,客户看了直摇头。
今天,给大家介绍一款开源的后台系统模板,兼具设计美学与高效开发!
关注微信公众号:【Java陈序员】,获取开源项目分享、AI副业分享、超200 ...
为什么禁止我请求别的网站的接口?——跨域与CORS
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
你有没有遇到过这种情况:在自己的网页上想请求别人的API,结果浏览器直接报错:Access-Control-Allow-Origin' header is missing。为什么浏览器要阻止你?服务器不响应不就完了吗?
今天,用小区门禁的故事,来讲讲 跨域 与 CORS。
什么是"跨域"?
同源策略 — ...