前端工程化 · 27/90
1. Babel 的工作原理 2. body-parser 中间件的作用 3. Babel 转译原理 4. 浏览器和 Node 中的事件循环区别 5. 职责链模式 6. 链模式 7. 命令模式 8. 组件封装设计 9. 数据统计 10. dependencies 和 devDependencies 的区别 11. CommonJS 和 ES6 模块引入的区别 12. 设计模式分类 13. 前端开发中常用的设计模式 14. 设计模式应用场景 15. 设计原则 16. 开发环境搭建要点 17. Electron 理解 18. 前后端分离是什么 19. 工厂模式 20. 前端代码重构 21. 前端组件化 22. 前端工程师职业发展 23. 前端工程化方向 24. 前端工程化的理解 25. 前端工程价值体现 26. 前端工程化 27. Git 常用命令与工作流 28. Gulp 任务自动化工具 29. 图片导出 30. 前端模块化规范 31. 迭代器模式 32. JavaScript 编码规范 33. 前端 CI/CD 流程 34. jQuery 生态对比 35. jQuery 实现原理 36. jQuery 与 Sizzle 选择器集成 37. Koa 中间件异常处理 38. jQuery 源码优秀实践 39. jQuery 与 Zepto 对比 40. jQuery UI 自定义组件 41. Koa 中间件不调用 await next() 的影响 42. Koa 在没有 async/await 时如何实现洋葱模型 43. Koa 和 Express 的区别 44. Koa 洋葱模型 45. 登录实现 46. 中介者模式 47. 模块模式 48. 小程序架构 49. 小程序常见问题 50. Monorepo 概念与工具 51. mpvue 框架 52. MVC vs MVP vs MVVM 53. Node.js ES Module 为什么必须加文件扩展名 54. MVC、MVP 和 MVVM 架构模式 55. Node.js 全局对象 56. Node.js 性能监控与优化 57. Node.js 多进程与进程通讯 58. Node.js 调试方法 59. Node.js 中的 process 对象 60. Node.js 的理解与应用场景 61. npm 是什么? 62. 观察者模式和发布订阅模式的区别 63. 页面重构方法 64. PM2 守护进程原理 65. 分页功能的前后端设计 66. PostCSS 作用 67. 项目管理方法 68. Rollup 打包工具 69. 高质量前端代码 70. JavaScript 单例模式实现 71. SSG 静态网站生成 72. 模板方法模式 73. 设计模式的六大原则 74. Tree Shaking 原理 75. 用户授权信息获取流程 76. Vite 原理与性能优势 77. Web App vs Hybrid App vs Native App 78. Web 前端开发注意事项 79. Web APP 设计原则 80. Webpack 构建流程 81. Hash vs ChunkHash vs ContentHash 82. Webpack 热更新原理 83. Webpack Loader 与 Plugin 区别 84. webpack 的 module、bundle、chunk 是什么 85. Webpack Proxy 工作原理与跨域解决 86. webpack、rollup、parcel 的选择 87. WePy 与 mpvue 对比 88. WXML 和 WXSS 89. Webpack Scope Hoisting 90. Zepto 实现原理

Git 常用命令与工作流

pull、fetch、rebase、merge 命令及 Git Flow 工作流

问题

解释 Git 中 pullfetchrebasemerge 命令的区别,以及 Git Flow 工作流的使用。

解答

fetch vs pull

# fetch: 只下载远程更新,不合并
git fetch origin main

# 查看远程分支的更新
git log HEAD..origin/main

# pull: 下载并合并(相当于 fetch + merge)
git pull origin main

# pull 使用 rebase 方式合并
git pull --rebase origin main

merge vs rebase

# === merge: 创建合并提交,保留分支历史 ===
git checkout main
git merge feature

# 合并后的历史(有分叉):
#   A---B---C feature
#  /         \
# D---E---F---G main (G 是合并提交)

# === rebase: 变基,线性历史 ===
git checkout feature
git rebase main

# 变基后的历史(线性):
# D---E---F---A'---B'---C' feature
#         |
#        main

交互式 rebase

# 修改最近 3 次提交
git rebase -i HEAD~3

# 在编辑器中可以:
# pick   - 保留提交
# reword - 修改提交信息
# edit   - 修改提交内容
# squash - 合并到上一个提交
# drop   - 删除提交

# 示例:合并多个提交为一个
pick abc1234 feat: add user login
squash def5678 fix: login bug
squash ghi9012 fix: another bug

Git Flow 工作流

# 主要分支
# main     - 生产环境代码
# develop  - 开发分支

# 辅助分支
# feature/* - 功能开发
# release/* - 发布准备
# hotfix/*  - 紧急修复

# === 开发新功能 ===
git checkout develop
git checkout -b feature/user-auth

# 开发完成后合并回 develop
git checkout develop
git merge --no-ff feature/user-auth
git branch -d feature/user-auth

# === 准备发布 ===
git checkout develop
git checkout -b release/1.0.0

# 修复发布前的 bug...
# 完成后合并到 main 和 develop
git checkout main
git merge --no-ff release/1.0.0
git tag -a v1.0.0 -m "Release 1.0.0"

git checkout develop
git merge --no-ff release/1.0.0
git branch -d release/1.0.0

# === 紧急修复 ===
git checkout main
git checkout -b hotfix/login-crash

# 修复完成后合并到 main 和 develop
git checkout main
git merge --no-ff hotfix/login-crash
git tag -a v1.0.1 -m "Hotfix 1.0.1"

git checkout develop
git merge --no-ff hotfix/login-crash
git branch -d hotfix/login-crash

常用场景命令

# 撤销工作区修改
git checkout -- <file>
git restore <file>          # Git 2.23+

# 撤销暂存
git reset HEAD <file>
git restore --staged <file> # Git 2.23+

# 撤销提交(保留修改)
git reset --soft HEAD~1

# 撤销提交(丢弃修改)
git reset --hard HEAD~1

# 修改最后一次提交
git commit --amend

# 暂存当前工作
git stash
git stash pop

# 查看某次提交的修改
git show <commit>

# 查找引入 bug 的提交
git bisect start
git bisect bad          # 当前版本有 bug
git bisect good v1.0.0  # 这个版本没问题
# Git 会二分查找,每次告诉它 good 或 bad

关键点

  • fetch vs pull:fetch 只下载不合并,pull = fetch + merge
  • merge vs rebase:merge 保留分支历史,rebase 产生线性历史
  • rebase 黄金法则:不要对已推送的公共分支执行 rebase
  • Git Flow 分支:main(生产)、develop(开发)、feature(功能)、release(发布)、hotfix(修复)
  • —no-ff:合并时强制创建合并提交,保留分支信息