前端工程化总结

tigerZH 发布于2019-08-20 17:19 / 624人阅读

摘要：为什么会出现前端工程化这个概念当前端业务日益复杂化和多元化，就会出现许多问题。这时候就出现了前端工程化的概念，从软件工程的角度来解决问题。

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

GPU云服务器云服务器运维工程师工作总结前端工程化前端前端工程师前端工程师前端

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83488.html

前端工程化总结

摘要：为什么会出现前端工程化这个概念当前端业务日益复杂化和多元化，就会出现许多问题。这时候就出现了前端工程化的概念，从软件工程的角度来解决问题。为什么会出现前端工程化这个概念？当前端业务日益复杂化和多元化，就会出现许多问题。比如说：如何提高开发效率？如何保证项目的可维护性？如何提高项目的开发质量？多人合作，架构分层，模块设计，解耦，抽象，复用，mock，联调，部署等等。。这时候就出现了前端...

AaronYuan 2019-08-01 17:00 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
前后分离的总结

摘要：如何去解决这些问题前后端分离大部分的互联网公司都分成了前端团队和后端团队。方案一采用架构业界很多公司会采用，单页应用的架构，这种架构是天然的前后端分离的。方案二淘宝的大前端方案中途岛上图是淘宝基于的前后端分离分层，以及的职责范围。我们遇到了什么问题？ 1.前端无法调试后端未完成的 API：如果后端同学还没有完成 API 开发，那么前端同学就不能对这个 API 进行开发。之前我们都是在...

enrecul101 2019-08-26 11:56 评论0 收藏0
参加第二届前端开发者年度大会总结

摘要：代表公司去参加今年的第二届前端开发者年度大会，散会的时候，技术老大问我，今天感觉怎么样，有什么收获，当时就零零碎碎的回答了一些，不算完美趁着还记得点什么，在这里做个自我回顾总结，谨代表个人见解，有不当之处，或若涉及图片隐私或者其它问题，烦请代表公司去参加今年的第二届前端开发者年度大会，散会的时候，Team 技术老大问我，今天感觉怎么样，有什么收获，当时就零零碎碎的回答了一些，不算完...

solocoder 2019-08-19 17:55 评论0 收藏0