为什么会出现前端工程的概念？现在的前端业务越来越复杂和多样化，会出现很多问题。例如：如何提高开发效率？如何保证项目的可维护性？如何提高项目的开发质量？多人协作、架构分层、模块设计、解耦、抽象、复用、mocking、联调、部署等。这时候出现了前端工程的概念，从软件工程的角度来解决问题。例如，软件工程中的分而治之和关注点分离。前端工程化分为标准化、自动化、模块化、组件化四个方面1：标准化的目录结构，对js代码风格的强约束，eslint自动fixcss代码风格（bem风格）协作工具，开发工具等2：自动化图标合并，涉及csssprite、svgsprite、icon字体自动编写可视化文档，技术选择：postmark+jsdoc自动化测试，技术选择：Karma+Mocha+Expect.js自动化部署，技术选择：docker自动化问题反馈三：模块化的es6规范已经出来了。如果想了解更多，可以查看阮老师的博客。四：组件化：重点介绍组件化和组件划分的概念。基于模块化，在设计层面，UI（用户界面）的拆分。每个包含模板（HTML）+样式（CSS）+逻辑（JS）的结构单元都是功能齐全的，我们称之为组件。组件化除了处理组件本身的封装外，还需要处理逻辑（JS）继承、样式（CSS）扩展、模板（HTML）嵌套等组件之间的关系。广义的组件化包括对数据逻辑层的业务进行梳理，形成不同层次的能力封装。我对组件化的通俗理解是，每个应用程序接口都可以抽象成独立的、可重用的、自包含的、可重用的组件。组件化的本质目的不一定是为了复用，而是为了提高可维护性。接下来说说组件化的优势。我觉得独立这个词可以很好的概括组合的优点。独立的时候，可以把组件隔离开来，可以很好的降低复杂度，隐蔽性也比较好，妥妥的。高内聚，低耦合。后面会讲到如何划分组件，组件划分的粒度，数据和方法的归属。查了资料，看了大佬们的项目结构，发现他们一般把组件分为通用组件（puppet组件）和业务组件（smart组件）。Puppet组件应该和业务无关，有简单状态或者无状态，几乎所有的数据都依赖于输入，它只负责渲染输入数据。比如按钮是一个组件，可能有一个参数决定它的大小，还有一个参数决定它是否可以被点击，但是按钮被点击后会发生什么，就不是按钮组件需要知道的了。一个智能组件可以由多个人偶组件和其他智能组件组成。它会有一些方法来修改它持有的数据。在内部，它包含一些数据和方法来确定内容的呈现。在外部，它是另一个接受数据的简单道具。可以理解为组件树的非叶子节点，通过自身的数据变化，进而对子组件的内容进行操作。前端工程的思路先总结到这里~总结一下大佬们的思路。还有很多地方不是很了解。先记录一下自己现在的感受，等以后有新的理解再补充或修改。参考文章：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...
