我对前端工程化的理解

因为接触前端的时间比较晚，所以许多朋友也有与我相似的经历。

在我的个人经历中，以前的课程项目并没有很好的去考虑可能影响维护成本和维护效率的因素。

在我寒假第一次团队合作期间，体会到了前端工程化思想的重要性。

在近期结业项目的分工合作中，由于技术栈是react+ts的原因，我负责给项目修ui。其中，一个团队大佬负责canvas轮子的搭建，另外几位是负责ui的主力队员。而我们团队成员提出频率最高的词就是熟悉项目结构。对于我，没有多少项目经验，以前在学校里的项目都是单核状态，所以并没有什么熟悉不熟悉项目结构的情况，也并没有考虑到安全，并发，多端，适配等多个场景下的问题。结合这段和蓝色空间大佬合作的经历，以下总结了我对前端工程化的理解：

什么是前端工程化

在我的理解上，前端工程化是一种工程化的思想，而并不是一种技术手段。前端工程化的目标就是让前端项目，更利于团队的协作，解耦团队的分工，提高团队的开发效率。对于后期，更利于前端项目的维护。

对于解藕团队的分工，可以用"低耦合，高内聚"来形容，我觉得这句短语并不只是狭隘的适用于代码结构，还适用于团队的分工与协作。在我的合作过程中，体会最深的一点就是，当造轮子的那个同学将已造好的库接入项目后，整个项目就充满了“活力”，什么是活力？在此我解释说明一下，因为我们的项目是数据结构与可视化平台，因此，在接入库函数即在能调用接口之前，我们的项目前端页面是静态的ui页面。接入之后，就各种“活力”。我觉得，这在一定程度上，体现了“低耦合，高内聚”的特点，团队成员造轮子这块和其他方面是相对独立的。但当在做接入任务的时候，这又体现了高内聚的特点。

而对于前端项目的维护，我的理解是，项目的结构需要清晰，利于团队的理解，语义应该要明确，因为并不是给个人看的。如何写出健壮的代码也是维护的一个因素。同时，项目应当配有文档，便于使用者理解以及团队的后期维护。

什么是模块化和组件化

对于这一方面，我的理解是，模块化和组件化开发只是前端工程化思想下的具体方法论。

模块化

这里以我使用过的commonjs为例，在我的印象里，一个js文件就是一个模块，这个模块定义了一个具体业务的处理逻辑的多组方法。每个方法实现一个具体的操作，将这些操作组合起来实现一个具体的业务功能。众所周知，commonjs是运行时加载，输出的只是值的拷贝，因此，内部的变化影响不到外部。那么，模块与模块之间的耦合度就得到了降低。

组件化

由于接触vue的时间比较短，这里谈谈我目前对vue组件化开发的理解。

一个页面中可与用户交互的区域或可视区域可以看成是一个组件。组件与组件之间是相互独立的。而页面只是组件的一个容器。vue为什么要有组件这样一个概念，那么，现在设想有这么一个场景，当你隔了很久的一段时间发现了你的项目中出现了bug，而且知道是哪一个可视区域出的交互bug，那么，如果你不是基于组件化开发的话，会怎么快速的去找出错误位置呢。我认为，使用组件化开发有两个好处，第一个好处是复用，一个组件可以在多个方面复用，脱离多次ctrl+c,ctrl+v。第二个好处是分而治之的思想，基于组件化的开发方式，你可以针对某一视区进行特定的开发，视区与视区之间在布局上是相对独立的，且在开发上也是相对独立的。