前端逐浪

「芝兰生于深林 不以无人而不芳」

前端监控埋点

开发SDK

获取用户行为以及跟踪产品在用户端的使用情况，并以监控数据为基础，指明产品优化的方向。 前端监控埋点 一、为什么需要监控： 快速发现和解决问题：通过实时监控前端错误和性能瓶颈，能够迅速定位和修复问题，减少用户流失。 数据驱动决策：收集的用户行为和性能数据为产品优化和业务决策提供了有力支持。 提升技术深度和广度：前端监控系统的实现涉及多项技术，全面提升了工程师的技能水...

Posted by ZhuLang on February 15, 2025

移动端适配

移动端适配

1. 屏幕尺寸 指屏幕对角线的长度，单位是英寸，1 英寸=2.54cm 2.像素 2.1 屏幕分辨率（物理像素） 指在横纵方向上的像素点，单位是 px，1px=1 个像素点 这里的 1 像素指的是设备的 1 个物理像素点。如第一点中的图，iphone6 的分辨率为 750*1334px，即是横向上有 750 个物理像素点，纵向上有 133...

Posted by ZhuLang on February 14, 2025

从零开始实现一个简化版 Webpack 打包器

Webpack 是现代前端开发中不可或缺的打包工具，它能够将多个模块及其依赖关系打包成一个或多个输出文件，从而优化浏览器加载性能。然而，对于很多开发者来说，Webpack 的内部机制可能显得神秘和复杂。本文将通过构建一个简化版的 Webpack，深入探讨其核心原理和实现细节，帮助你更好地理解 Webpack 的工作方式。 一、读取文件内容与解析依赖关系 Webpack 的打包过程...

Posted by ZhuLang on February 13, 2025

web开发

Koa

1. koa koajs Koa2 是现在最流行的基于 Node.js 平台的 web 开发框架 2.安装 1 npm i koa 2.应用程序 Koa 应用程序是一个包含一组中间件函数的对象，它是按照类似堆栈的方式组织和执行的。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 const Koa = require('koa'); const app ...

Posted by ZhuLang on February 12, 2025

HTTP协议和TCP协议

HTTP协议和TCP协议

HTTP 协议和 TCP 协议 1. 长链接 2. 管线化 3. URI 和 URL URI URI(Uniform Resource Identifier)是统一资源标识符,在某个规则下能把这个资源独一无二标示出来，比如人的身份证号 URI URI(Uniform Resource Identifier)是统一资源标识符,在某个规则下能把这个资...

Posted by ZhuLang on February 11, 2025

Node文件处理

fs

1. fs 模块 在 Node.js 中，使用 fs 模块来实现所有有关文件及目录的创建、写入及删除操作。 在 fs 模块中，所有的方法都分为同步和异步两种实现。 具有sync后缀的方法为同步方法，不具有sync后缀的方法为异步方法。 2. 整体读取文件 2.1 异步读取 1 fs.readFile(path[, options], callback) op...

Posted by ZhuLang on February 9, 2025

事件循环

深入浅出：理解浏览器与 Node.js 的 Event Loop

JS 是单线程的，JS 是通过事件队列(Event Loop)的方式来实现异步回调的。 一. 进程和线程 进程是操作系统资源分配的基本单位，进程中包含线程。（拥有资源和独立运行的最小单位） 线程由进程管理，是进程的执行单位。为了提升浏览器的稳定性和安全性，浏览器采用了多进程模型。 二. 浏览器 5 个进程 浏览器采用多进程模型，每一个标签页（Tab）就是一个...

Posted by ZhuLang on February 8, 2025

前端工程化

Eslint+Prettier+husky+commitlint+lint+staged规范前端工程代码规范

记录自己的前端工作流，总结一份自己的前端工作流搭建流程，方便以后使用，创建一个简单的模板。 Vue3 项目框架搭建 1. 使用Vite脚手架初始化项目 vite 官网 1 npm init vue@latest 2. 项目目录结构 3. CSS 样式 normalize.css reset.css 4. 路由配置 5. 状态管理...

Posted by ZhuLang on February 7, 2025

设计模式

深入学习设计模式，助力编写高效、可维护的代码

设计原则 1. 什么是设计 设计指的是采用特定的思路或标准来实现功能。 即使实现相同的功能，设计的方式可以多种多样。 当需求不断变化时，设计的重要性才会更加明显。 2. SOLID 五大设计原则 首字母 指代 概念 S 单一职责原则 单一功能原则认...

Posted by ZhuLang on February 6, 2025

前端脚手架

自定义脚手架开发

核心目标：提升前端研发效能 创建：标准模板创建、自定义规则创建、创建组件库、自动安装和启动 发布：Git 自动化、云构建、项目自动发布、组件自动发布 一、脚手架架构设计和框架搭建 1.1 背景 研发架构图 脚手架核心价值 将研发过程： 自动化：项目重复代码拷贝/git 操作/发布上线操作 标...

Posted by ZhuLang on February 5, 2025

FEATURED TAGS
Web JavaScript TypeScript Vue 手写 React 仓库 入门指南 内功 区块链 基础 性能优化 数字货币 核心原理 源码 组件库 UI Vue3 Web3
ABOUT ME

打破知识壁垒