摘要：组件化开发的优点。可以很大程度的降低系统各个功能的耦合性，并且提高了功能内部的聚合性。耦合性的降低，提高了系统的伸展性，降低了开发的复杂度，提升开发效率，降低开发成本。这个是前端组件开发需要处理的难点。
如今前端技术飞速发展，基本是基于三大框架开发的SPA（单页面应用）。本文主要是总结一下组件化开发思想重要点。
组件化可以帮助解决前端结构的复用性问题，整个页面可以由不同的组件组合、嵌套构成。
一个组件有自己的现实形态和行为，组件的显示形态和行为可以由（React中数据状态（state）和配置参数（props）Vue中是data和props）共同决定。
数据状态和配置参数的改变都会影响到组件的显示形态。当数据变化的时候，组件的显示需要更新。所以组件化模式能提供一种高效的自动化地帮我们更新页面。降低了代码的复杂度，带来更好的可维护性。
那么我们在基于组件开发的时候就主要考虑分析需求。
拿到一个需求以后，我们要做的第一件事情就是理解需求、分析需求、划分这个需求由哪些组件构成。
组件的划分没有特别明确的标准。划分组件的目的是为了代码可复用性、可维护性。只要某个部分有可能复用到别的地方，你都可以把它抽离出来当成一个组件；或者把某一部分抽离出来对代码的组织和管理会带来帮助，你也可以毫不犹豫地把它抽离出来。
说到底，前端组件化开发之后。可以很大程度的降低系统各个功能的耦合性，并且提高了功能内部的聚合性。这对前端工程化以及降低代码的维护难度，是有很大帮助的。
耦合性的降低，提高了系统的伸展性，降低了开发的复杂度，提升开发效率，降低开发成本。
组件封装的好，加班也少了，bug 也少了，就有更多时间喝喝咖啡、撩撩小姐姐、打打吃鸡了。:) 美滋滋。
设计组件要遵循一个原则：一个组件只专注做一件事，且把这件事做好。
组件化开发的难点。
模块（组件）之间需要共享数据”，和“数据可能被任意修改导致不可预料的结果”之间的矛盾。这个是前端组件开发需要处理的难点。
基于这个点目前我认为处理最好的工具就是Redux状态管理工具。有兴趣的同学可以移步Redux中文文档。http://cn.redux.js.org/
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/103062.html
摘要：组件化开发的优点。可以很大程度的降低系统各个功能的耦合性，并且提高了功能内部的聚合性。耦合性的降低，提高了系统的伸展性，降低了开发的复杂度，提升开发效率，降低开发成本。这个是前端组件开发需要处理的难点。 如今前端技术飞速发展，基本是基于三大框架开发的SPA（单页面应用）。本文主要是总结一下组件化开发思想重要点。 组件化可以帮助解决前端结构的复用性问题，整个页面可以由不同的组件组合、嵌...
摘要：从协作关系上讲，很多前端开发团队每个成员的职责不是很清晰，有了前端的框架，这个状况会大有改观。框架的理念是把前端按照职责分层，每一层都相对比较独立，有自己的价值，也有各自发挥的余地。 简介: MV框架又是为什么兴起的呢？它的出现，伴随着一些 Web 产品逐渐往应用方向发展，遇到了在 C/S 领域相同的问题：由于前端功能的增强、代码的膨胀，导致不得不做前端的架构这个事情了。经常有人质疑...
摘要：比如以为例，一个组件，包括一个文件一个文件图片组件在中便可如下加载使用导出为对象的模块化其实，还有另外一种思路，就是将内置中，成为的一部分。 CSS 模块化 CSS(Cascading Style Sheets)，从诞生之初就决定了它无法编程，甚至连解释性语言都算不上，只能作为一种简单的层叠样式表，对 HTML 元素进行格式化。 但随着前端的发展，前端项目已经变得越来越庞大和复杂，社区...
摘要：比如以为例，一个组件，包括一个文件一个文件图片组件在中便可如下加载使用导出为对象的模块化其实，还有另外一种思路，就是将内置中，成为的一部分。 CSS 模块化 CSS(Cascading Style Sheets)，从诞生之初就决定了它无法编程，甚至连解释性语言都算不上，只能作为一种简单的层叠样式表，对 HTML 元素进行格式化。 但随着前端的发展，前端项目已经变得越来越庞大和复杂，社区...
阅读 3527·2021-09-22 15:50
阅读 3232·2019-08-30 15:54
阅读 2747·2019-08-30 14:12
阅读 3057·2019-08-30 11:22
阅读 2078·2019-08-29 11:16
阅读 3574·2019-08-26 13:43
阅读 1191·2019-08-23 18:33
阅读 918·2019-08-23 18:32
