目录
●前言
第1章 数字化浪潮中前端的变革
1.1 前端开发的发展历程
1.1.1 洪荒时代:Web 1.0
1.1.2 青铜时代:Web 2.0
1.1.3 黄金时代:移动互联网
1.1.4 现代Web时代
1.1.5 未来发展
1.2 前端研发的“标准化”流程
1.3 现代Web时代对前端开发者的要求
第2章 前端开发规范
2.1 前端开发规范的意义
2.2 开发规范
2.2.1 CSS命名规范
2.2.2 命名规范要点
2.2.3 接口规范与约定
2.2.4 Git规范
2.2.5 ESLint使用规范
2.2.6 CodeReview流程规范
2.2.7 上线操作规范
2.3 文档规范
第3章 前端框架
3.1 前端框架的重要作用
3.2 前端框架生态的发展态势
3.3 框架运行的核心原理
3.3.1 数据绑定
3.3.2 组件化
3.3.3 依赖收集
3.3.4 虚拟DOM
3.3.5 DOMDiff算法
3.3.6 模板编译
3.3.7 路由管理
3.3.8 插件系统
3.3.9 编译优化
第4章 前端库生态
4.1 常用的前端库
4.2 基础组件库与业务组件库的区别
4.3 从零编写一个组件库
4.3.1 项目初始化
4.3.2 组件库的目录结构
4.3.3 样式解决方案
4.3.4 编写一个组件
4.3.5 组件测试
4.3.6 组件文档
4.3.7 组件库打包
4.3.8 组件发布
第5章 前端工程化核心
5.1 模块化
5.1.1 模块化发展历程
5.1.2 模块化的未来
5.2 包及包管理器
5.2.1 npm仓库
5.2.2 package.json
5.2.3 发布npm包
5.2.4 安装npm包
5.3 代码转译
5.3.1 转译原理
5.3.2 Babel
5.3.3 SWC
5.3.4 TSC
5.3.5 Sass/Less
5.3.6 PostCSS
5.4 代码打包
5.4.1 Parcel
5.4.2 Rollup
5.4.3 Webpack
5.4.4 esbuild
5.5 代码压缩及优化
5.5.1 Terser
5.5.2 esbuild
5.6 代码检查
5.6.1 项目集成
5.6.2 ESLint
5.6.3 StyleLint
5.7 构建工具
5.7.1 Gulp
5.7.2 Webpack
5.7.3 Vite
第6章 自动化测试
6.1 为什么需要前端自动化测试
6.2 添加单元测试会降低前端效率吗
6.3 前端测试的主要类型
6.4 两种测试思想
6.5 主流测试工具
6.6 Jest入门技巧
6.6.1 添加Jest
6.6.2 Jest异步测试
6.6.3 Jest快照
6.6.4 Jest的钩子函数
6.6.5 DOM节点
6.7 前端自动化测试实践
6.7.1 单元测试案例
6.7.2 E2E测试用例
6.7.3 单元测试与E2E测试的区别
第7章 数据埋点
7.1 前端数据埋点的重要性
7.2 埋点实现的分类
7.2.1 手动埋点
7.2.2 可视化埋点
7.2.3 全自动埋点
7.3 埋点技术原理
7.3.1 触发时机的抽象和实现
7.3.2 数据发送的技术实现
7.4 埋点数据结构设计
7.4.1 事件标识
7.4.2 页面标识
7.4.3 用户标识
7.4.4 设备标识
7.4.5 网络标识
7.5 开发一款埋点SDK
7.5.1 整体设计
7.5.2 初始化和配置设计
7.5.3 埋点发送设计
7.5.4 插件系统设计
7.5.5 内置插件实现
第8章 前端构建与部署
8.1 前端工程部署概览
8.2 Git工作流
8.2.1 GitFlow
8.2.2 GitHubFlow
8.2.3 GitLabFlow
8.3 CI/CD工具选择
8.3.1 传统CI/CD工具
8.3.2 自建CI/CD平台
8.4 云构建技术原理
8.4.1 云构建流程
8.4.2 Task模块
8.4.3 Git模块
8.4.4 Builder模块
8.4.5 Logger模块
8.5 云部署技术原理
8.5.1 BundleUploader模块
8.5.2 前端版本更新策略
8.5.3 前端灰度发布
第9章 前端性能优化
9.1 前端架构的分层
9.1.1 网络架构
9.1.2 端架构
9.1.3 前端技术栈
9.2 前端性能指标及其测量
9.2.1 页面性能指标
9.2.2 性能指标测量
9.3 前端性能优化方案
9.3.1 前端框架优化
9.3.2 媒体资源优化
9.3.3 构建优化
9.3.4 浏览器渲染优化
9.3.5 网络与缓存优化
第10章 前端数据分析
10.1 前端数据分析全流程
10.2 数据建模与表设计
10.2.1 ODS接入表
10.2.2 DWD明细表
10.2.3 DIM维度表
10.2.4 DWS汇总表
10.2.5 ADS应用表格
10.3 相关指标口径及算法
10.3.1 访问量
10.3.2 曝光率
10.3.3 点击率
10.3.4 留存率
10.3.5 蹦失率
10.3.6 平均停留时长
10.4 常用的SQL技巧
10.4.1 分组与聚合函数
10.4.2 多维分组
10.4.3 窗口函数
10.4.4 使用WITH简化SQL嵌套
10.4.5 使用CASE条件表达式
10.4.6 行转列
10.4.7 列转行
10.5 数据可视化与数据分析
10.5.1 开源BI解决方案
10.5.2 国内商业BI平台
10.5.3 自建可视化报表
第11章 研发效能的新思路
11.1 研发效能的术与器
11.2 效能提升之术
11.2.1 敏捷开发
11.2.2 什么是Scrum
11.2.3 “3+3+4”执行敏捷开发
11.3 提升效能之器
11.3.1 项目管理平台
11.3.2 UI-to-code
11.3.3 AI辅助编程
11.3.4 后台提效
内容介绍
面对AI与数字化浪潮带来的技术变革,前端研发领域正在从页面实现走向工程化建设、数据驱动决策与智能化协作。本书以企业级前端研发体系为主线,结合“工程化”“数据化”“智能化”三大必然趋势,打通“开发—构建—部署—监控—分析—优化”的能力全链路,为前端工程师、技术负责人和架构师提供实用的成长路径与实践参考。
本书内容涵盖开发规范、框架原理、组件库建设、工程化工具体、自动化测试、数据埋点、构建部署、性能优化、数据分析及研发效能提升等关键技术。同时,结合埋点SDK、组件库、云构建平台等真实案例,融入AI辅助编程的前沿实践。最终,全面呈现前端研发在AI时代的新方法与新范式。