我正在参加「掘金·启航计划」
背景
最近"天空之城"大疆总部的亮相也让人眼前一亮，美轮美奂。建筑设计师需设计图纸，遵循建筑设计原则，那么作为前端开发工程师，如何设计高质量的前端组件呢？我想这应该是前端组件化开发的基本功。
Vue和React都需要对页面组件的设计有一定的关注。当前我们的组件设计或许杂乱无章，看完这篇文章，你就能获取清晰的认识，对组件设计和代码质量的提升有一定的帮助。
划分组件边界
就和一个人最好一次只专注做一件事一样，也应该尽量保持一个组件只能做一件事，当我们发现一个组件功太多代码量太大的时候，就要考虑拆分这个组件，用多个小的组件来代替。每个小的组件只关注实现单个功能，但这些功能组合起来要能满足实际的需求。
这就是"分而治之"的策略，把问题分解为多个小问题，这样既容易解决也方便维护，虽然"分而治之"是一个好策略，但不要滥用，只有必要的时候才去拆分组件，不然可能得不偿失。
拆分组件最关键的就是确定组件的边界，每个组件都应该是独立存在的，如果两个组件逻辑太紧密，无法清晰定义各自的责任，那也许这两个组件本身不该被拆开，作为同一个组件也行更合理。 虽然组件是应该独立存在的，但是并不是说组件就是孤岛一样的存在，不同组件之间总是会有通信交流，这样才能组合起来完成更大的功能。
软件设计的通则
回归开发本身，就是书本上的软件，各地高校普遍开通软件学院，专注于软件人才的培养。后端JAVA讲究软件设计的基本原则，那么前端Javascript，作为JAVA的小兄弟，也同样有设计的原则。
高内聚 High Cohesion
高内聚：把逻辑紧密相关的内容放在一个组件中。
低耦合 Low Coupling
低耦合：不同组件之间的依赖关系要尽量弱化，也就是每个组件要尽量独立，保持整个系统的低耦合度，需要对系统中的功能有充分的认识，然后根据功能点去划分模块，让不同的组件实现不同的功能，这就需要我们对页面的功能模块区分有清晰的认识。
总结
遵循软件设计的通则，确定组件的边界，高内聚和低耦合的要求，充分考虑易于维护和可复用的因素，开发页面前做一次组件设计规划，当然在开发工程中遇到不合适的组件设计也要及时纠正，防止让组件出现臃肿和拆的过细的极端情况。
如何设计高质量的前端组件，本文提供了一些原则和思路，当然在实际开发中也要因地制宜，因材施教，变通的去充分考虑业务场景和需求，开发前划分好模块，开发前需写一份组件设计文档，这对你的开发多少有帮助。
