前端工程化总结

原文链接： https://segmentfault.com/a/1190000009815823

为什么会出现前端工程化这个概念？
当前端业务日益复杂化和多元化，就会出现许多问题。
比如说：
如何提高开发效率？
如何保证项目的可维护性？
如何提高项目的开发质量？
多人合作，架构分层，模块设计，解耦，抽象，复用，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...