什么是前端工程化?

工程化介绍

什么是前端工程化?

前端工程化是一种思想,而不是某种技术。主要目的是为了提高效率和降低成本,也就是说在开发的过程中可以提高开发效率,减少不必要的重复性工作等。

tip 现实生活举例

建房子谁不会呢?请几个工人一上来就开始弄,在建筑的过程中缺了材料就叫个工人去买,发现工期快到了来不及了,就马上多请几个人回来弄。客户又说这里改改,那里改改。最终却是可以把房子建起来,但是很容易出现问题,出现问题了又是谁的责任。

这种最多也只能称为建房子,而建筑工程却不一样,按照工程的流程应该是这样的,首先会画图纸、确定房子的结构、确定用料和预算以及工期,另外需要用到什么工种以及多少工人等等,一般都是先打地基在建框架再填充墙体,这样捡起来的房子才会更加的稳固。

出现问题也可以快速定位到源头和负责人。这里只是举个例子,我也没有做过建筑工程。

借鉴上面的工程化思想,可以得出来我们前端工程化需要具备模块化、组件化、规范化、自动化四个方面。

模块化

模块化就是把一个大的文件,拆分成多个互相依赖的小文件,按照一个一个模块来划分。在前端领域上就是把 JS 复杂的逻辑代码拆分成多个简单的模块,在组合成一个功能。

组件化

跟模块化很类似,在前端领域上,例如页面就可以看成是一个大的组件,这个大的组件可以拆分成多个中型组件,中型组件还可以继续在拆分成多个小型组件。

组件化 ≠ 模块化。模块化只是在文件层面上,对代码和资源进行拆分。组件化是在设计层面上,对 UI 视图部分的拆分。

规范化

在项目规划初期制定的好坏对于后期的开发有一定影响。

包含以下规范:

  • 目录结构的制定
  • 编码规范
  • 前后端接口规范
  • 文档规范
  • 组件管理
  • Git 分支管理
  • Commit 描述规范
  • 定期 codeReview
  • 视觉图标规范

自动化

也就是简单重复的工作交给机器来做,自动化也就是有很多自动化工具代替我们来完成,例如持续集成、自动化构建、自动化部署、自动化测试等等。

原文链接:菜园前端

相关推荐
小中12348 分钟前
异步请求的性能提升
前端
我是天龙_绍10 分钟前
渐变层生成器——直接用鼠标拖拽就可以调整渐变层的各种参数,然后可以导出为svg格式
前端
我是天龙_绍37 分钟前
Easing 曲线 easings.net
前端
知识分享小能手41 分钟前
微信小程序入门学习教程,从入门到精通,电影之家小程序项目知识点详解 (17)
前端·javascript·学习·微信小程序·小程序·前端框架·vue
訾博ZiBo42 分钟前
React组件复用导致的闪烁问题及通用解决方案
前端
Dever44 分钟前
记一次 CORS 深水坑:开启 withCredentials 后Response headers 只剩 content-type
前端·javascript
临江仙4551 小时前
流式 Markdown 渲染在 AI 应用中的应用探秘:从原理到优雅实现
前端·vue.js
Hilaku1 小时前
为什么我开始减少逛技术社区,而是去读非技术的书?
前端·javascript·面试
m0_728033131 小时前
JavaWeb——(web.xml)中的(url-pattern)
xml·前端
猪哥帅过吴彦祖1 小时前
第 8 篇:更广阔的世界 - 加载 3D 模型
前端·javascript·webgl