前端工程化总结

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