前端中的功能实现
前端中的功能实现
#tech / dev / frontend
#type / howto
#status / growing
前端中的功能实现
功能实现
隐藏元素的方法
- display:none
彻底移除 - visibility:hiden
仍然占据空间
占位隐藏 - opacity:0
占空间、可交互
透明动画或交互隐藏 - position:absolute + 偏移
- clip-path 或 clip:rect(0，0，0，0)
裁剪 - width:0;height:0 overflow: hidden
- HTML 的 hidden
- z-index < 0 + position
- JS 控制
- jQuery 方法
账号认证
例子
dailyuse
登录
前端调用 login API ， 通过 ipc 通信给 nodejs，nodejs 调用 login 服务（值的检查、数据库查询、返回信息），前端根据返回的信息判断是否成功。
实现“记住我”：后端生成、保存并返回 token，前端在localstorage中保存 token，下次快速登录时携带并查询 token，未过期则直接返回成功。
登出
清除当前登录信息（设置当前
小功能
日期格式化
- 自定义
- 原生 Intl.DateTimeFormat
- 第三方库
Moment.js
date-fns
主题切换
- CSS + JS
- CSS 滤镜
- light-dark() 函数
- CSS Toggles
业务功能
前端如何实现扫码登录功能
- 前端向服务器发起请求生成一个唯一的二维码
- 展示二维码并轮询检查扫码状态
- 手机端扫码成功后通知服务器,服务器再通知前端
- 前端收到扫码成功的消息后，执行登录逻辑
- websocket 实时推送扫码状态更好，减少轮询频率，提高响应速度
- 二维码要有时效性，可使用 JWT 令牌或 Redis 缓存
- 兼容性
如何实现单点登录
单点登录（Single Sign-On，SSO）是一种认证机制，允许用户在多个独立的系统或应用之间，只需一次登录就能访问所有的系统或应用。
实现通常依赖于后端的支持和浏览器的 Cookie 机制
如何解决 SPA 应用首屏加载速度慢的问题
- 按需加载、代码分割
- 服务端渲染（SSR）
- 使用骨架屏
- CDN 加速
如何设计一款能够统计前端页面请求耗时的工具
- 使用 XMLHttpRequest 或 fetch API 拦截请求和响应
- 记录发起请求的事件和收到响应的时间
- 计算时间差
- 存储数据
- 数据展示
如何设计和优化秒杀系统的前端
- 界面设计
- 性能优化
- 防止刷量和攻击
- 用户体验
无限滚动加载和自动回收上面的内容
- 使用 Intersection Observer API 监听元素进入/离开视口，从而触发操作。
- 动态创建和删除 DOM 元素
文件的断点续传，并确保大文件安全可靠上传
- 文件分块上传
- 断点续传标识
- MD5 校验
- 并发上传
- 进度监控
WebSocket 的实时聊天功能，支持多用户在线聊天并展示消息通知
- 建立 WebSocket 连接
前端需要和服务器建立 WebSocket 连接 - 处理连接事件
- 发送消息
- 接收消息
- 显示消息通知
如何设计前端日志埋点 SDK
添加水印
- html、css、js 实现
- canvas、多重水印
实时补全搜索框
- 输入框捕捉输入
- 事件监听器捕捉输入内容
- 每当输入时，触发 AJAX 请求（Fetch API 或 Axios）发送到服务器，获取匹配词推荐
- 服务器返回
- 前端显示
如何对每个 JavaScript 函数的执行实现拦截
使用 JS 的 Proxy 和 Reflect 这两个对象。
Proxy 对象用于定义自定义行为（函数调用、属性访问等）的拦截器
Reflect 可以确保原生操作的默认行为得以执行