Cocos Creator的核心是组件化，如何编写出高质量的组件代码值得程序员们不断探索，Shawn今天分享一点组件编码的心得供大家参考：“怎样才是一个合格的组件？”。

1. 组件编码常见问题

Shawn在2年的Cocos Creator项目经验和案例中总结了两条组件编码问题：

1. 滥用properties属性：把暴露到编辑器上的组件属性当成成员变量的一种实现方式；或将properties属性当成访问外部节点、资源的便利的通道。不必要暴露的属性，为上层使用者造成负担。
2. 场景树结构假设：组件代码中存对场景树的硬编码，导致组件只能工作在这种特定的场景树结构下，失去了重用能力，同时也限制了场景树不能轻易变量动。

上面两个问题带来的后果是：组件与组件、组件与外部节点、组件与资源、组件与场景树结构形成高度耦合，如下图所示：

高度耦合的组件设计

组件与外部对象产生了千线万缕的关系，这样的设计让组件、界面都完全动弹不得，完全背离了组件化开发的本质，陷入了高度耦合的泥沼之中。

2. 合格组件参考标准

怎样才算是一个合格的组件？

这个问题困扰Shawn很长一段时间，其实答案近在眼前，那就是：模仿Cocos Creator内置组件，以引擎内置组件为参考标准。

Cocos Creator的内置组件绝大部分都是可通用的，可以挂载到任意节点，这里简单总结三点：

1. 简单易用：程序员要将设计师看见是你的客户，提供给他简单好用的组件。
2. 复用性强：编写一次可以在更多的地方使用，解决普遍性问题。
3. 易于测试：不管是程序员还是设计师都要能方便的营造组件测试预览环境。

有了好的参考的标准，就有了行动的指南针，接下来看内置组件给我们的启发。

3. 组件的类型

之前Shawn的教程中就提到，组件分为两类：神器与结界。随着教程的不断升级，Shawn也在思考使用更为贴切的用词，庆幸得到引擎组大神们的帮助，规范用词，将两类组件定义为：功能型组件与控制型组件，请看下图：

功能型&控制型

1. 功能型组件：以装饰宿主节点为己任，常用的有Sprite、Labe、Widget属于这类。
2. 控制型组件：管理和控制子孙节点，比如：ScreollView、ToggleContainer，它们内部是由多个子孙点节点组合而成。

在编写自定组件时，需要明确我们是要提供什么类型的组件去解决问题，比如我们教程Demo中的：节点ZIndex控制、节点可拖动、点击节点切换图片，它们都是功能型组件，通常是一个纯组件脚本文件。

在项目中，我们做的：提示对话框、玩家头像、背包道具，它们通常是由背景、前景、图片、边框、文字等等节点构成，我们就需要为它们使用定制各自的控制型组件脚本。

功能型组件解决“点”上的问题，控制型组件解决“线”、“面”上的问题，它们之间又可以相互嵌套、组合从而解决“体”上的问题。

4. 小结

本篇教程主要是分享Shanw在组件编程中发现的问题，思考“怎样才是一个合格的组件？”。探索编写合格组件的指导思想，总结了功能型与控制型两类组件模型，供大家参考。

下一次我们再继续这个话题，如何去编写简单易用、复用性强、易于测试的组件，具体说明功能型和控制型组件的编码心得。

编写高质量的组件的目的是为了提高开发效率和产品质量，在这条道路上任重道远，大家一起努、加油！

---

如果觉得公众号上的文章对您或您身边的朋友有帮助，请分享给他们，愿我们一起成长！

奎特尔星球