什么是前端工程化?

工程化介绍

什么是前端工程化?

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

tip 现实生活举例

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

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

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

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

模块化

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

组件化

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

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

规范化

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

包含以下规范:

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

自动化

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

原文链接:菜园前端

相关推荐
江拥羡橙13 分钟前
Vue和React怎么选?全面比对
前端·vue.js·react.js
千码君201617 分钟前
React Native:快速熟悉react 语法和企业级开发
javascript·react native·react.js·vite·hook
楼田莉子2 小时前
Qt开发学习——QtCreator深度介绍/程序运行/开发规范/对象树
开发语言·前端·c++·qt·学习
暮之沧蓝2 小时前
Vue总结
前端·javascript·vue.js
木易 士心3 小时前
Promise深度解析:前端异步编程的核心
前端·javascript
im_AMBER3 小时前
Web 开发 21
前端·学习
又是忙碌的一天3 小时前
前端学习day01
前端·学习·html
Joker Zxc3 小时前
【前端基础】20、CSS属性——transform、translate、transition
前端·css
excel3 小时前
深入解析 Vue 3 源码:computed 的底层实现原理
前端·javascript·vue.js
大前端helloworld3 小时前
前端梳理体系从常问问题去完善-框架篇(react生态)
前端