为何会涌现前端工程化这个观点？
当前端营业日趋复杂化和多元化，就会涌现许多题目。
比方说：
怎样进步开辟效力？
怎样保证项目标可维护性？
怎样进步项目标开辟质量？
多人合作，架构分层，模块设想，解耦，笼统，复用，mock，联调，布置等等。。
这时候就涌现了前端工程化的观点，从软件工程的角度来解决题目。比方软件工程中的分治和关注点星散头脑。

前端工程化能够分为4个方面：范例化，自动化，模块化，组件化
一：范例化
目次构造，
js代码作风强束缚，eslint自动fix
css代码作风（bem作风）
合作东西，开辟东西等

二：自动化
自动图标兼并，涉及到css sprite，svg sprite，图标字体
自动编写可视化文档，手艺选型：postmark+jsdoc
自动化测试，手艺选型：Karma + Mocha + Expect.js
自动化布置，手艺选型：docker
自动化题目反应

三：模块化
这个es6范例已出来了，想要相识检察阮先生的博客

四：组件化：
着重讲一下组件化的观点和组件分别
起首摘抄总结了大佬们对组件化的观点：
组件化是基于模块化的，在设想层面上，对UI（用户界面）的拆分。每一个包含模板(HTML)+款式(CSS)+逻辑(JS)功用完整的构造单元，我们称之为组件。组件化除了要处置惩罚组件这类本身的封装，还要处置惩罚组件之间的逻辑(JS)继续，款式(CSS)扩大和模板(HTML)嵌套等关联。广义的组件化包含对数据逻辑层营业梳理，构成差别层级的才能封装。

本身关于组件化的浅显明白就是每一个运用界面都能够笼统成一个个自力的，可复用的，自包含的，可复用的组件。组件化的实质目标并不一定是要为了可复用，而是提拔可维护性。

接下来谈组件化的长处，我以为自力这个词能够很好的归纳综合组价的长处，当自力了以后，组件之间能够断绝，能够很好的下降复杂度，隐蔽性更好，妥妥的高内聚，低耦合。

背面来谈下组件该怎样分别，组件分别的粒度，数据和要领的归属。
在查了材料和看了大佬们的项目构造以后，发明他们一般会把组件分为通用组件（木偶组件）和营业组件（智能组件）。
木偶组件应该是和营业无关的，是有简朴状况或许无状况的，数据险些悉数依赖于输入，它只担任衬着给入的数据。比方按钮是一个组件，可能有一个参数决议了它的尺寸，一个参数决议了它是不是能够点击，然则点击这个按钮以后会发作什么，就不是按钮这个组件须要晓得的事变了。
智能组件能够由多个木偶组件构成和其他的智能组件构成，会具有一些要领，用来修正持有的数据，对内来看，它本身持有一些数据和要领，用来决议内容的衬着，对外又是一个简朴的props接收数据。能够明白为组件树的非恭弘=叶 恭弘子节点，经由过程本身数据变化，进而操纵子组件的内容。

前端工程化的头脑就先归纳综合到这里了~把大佬们的主意总结了一下，另有许多处所没有明白到位，先纪录一下如今的感觉，后期有了新的熟悉再来补充或许修正。

参考文章：
https://mp.weixin.qq.com/s?__…
https://lluvio.github.io/blog…
http://www.jointforce.com/jfp…
https://www.zhihu.com/questio…
http://www.jianshu.com/p/67a6…
https://cn.vuejs.org/v2/guide…