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在组件编程中发现的问题,思考“怎样才是一个合格的组件?”。探索编写合格组件的指导思想,总结了功能型控制型两类组件模型,供大家参考。

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

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


奎特尔星球

最后修改日期:2018年12月11日

作者