CreatorPrimer|组件编码心得(下)

这次是《组件编码心得》的最后一篇，第一次我们讲到将组件分为两大类：功能型和控制型；第二篇介绍了功能型组件与控制型组件的编码上需要注意的地方，最后还提到控制型组件与预制件的组合形成独立模块，这次分享我在预制件上编码、编辑时的一点心得。

1. 预制件与控制组件的关系

---

简单梳理一下配套的预制件与控制型组件的关系是：

肉体与灵魂 显示与控制

预制体由1~n个节点构成，就像人体的骨骼，挂载到各个节点的功能型组件则为血脉、神经以支撑整体模块的运作，而控制组件就是这个模块的灵魂。

还有一种更有意思比喻，预制件与控制组件是男朋友与女朋友的关系，到底那男女如何对应大家可以琢磨一下！

2. 控制组件编码心得

---

其实前一篇只介绍了控制组件的对内、对外要点，在编码上具体要如何去做没有细说，请看下图：

上一篇说过，不应该用properties属性做成员节点、组件访问，他是对外的接口。对界面设计无关的属性接口不要暴露到组件面板上，方案是使用引擎API: getChildByName\cc.find等，或者自己包装过的工具函数，比如：uikiller。

3. 预制件编辑心得

---

上面讲的是控制组件的编写，我们再来看预制件的编辑，需要注意些什么：

下面我对图中的内容做一个简单的说明：

1. 配套的组件与预制件文件同名、放在同一路径是为了方便管理，要走一起走，要留一起留下，天生一对！看下面的例子：

将有关联的一组预制件与组件脚本放在一个路径下，成对的命名一至。

2. 将控制组件挂载到预制件的根节点上，最好只挂载一个组件，由它来统领当前预制件及下面的子节点，看下图：

上图中预制体文件名、预制体根节点名字、组件的名字三者保持一至，当把这个预制实例化出来时，在编辑器上直接可看到它的控制组件，请看下图：

在使用代码实例化预制件时，可以用预制体的名字索引到匹配的组件对象，看下面代码：

1. cc.Class({

2.    properties: {

3.         //这里用全大写命名预制资源变量，代码中不要修改它
   

4.        NUMBER_DOT_PREFAB: cc.Prefab,

5.    }

6.    onLoad() {

7.        let node = cc.instantiate(this.NUMBER_DOT_PREFAB);

8.        //使用硬编码'NumberDot'获取组件对象

9.         //let numberDot = node.getComponent('NumberDot');
   

10.         //组件与预制件文件同名，
    

11.        //通过预制对象名，直接取出实例化的预制件根节点组件对象

12.        let numberDot = node.getComponent(this.NUMBER_DOT_PREFAB.name);

13.        numberDot.xxx = ...;

14.    }

15. })

不论是在编辑器中还是在代码里，保持命名统一，代码也相对更简洁、灵活。

3. 最后节点命名要有意义、保持清晰层级关系这些是为了让预制件经后可维护，一套规范化的节点命名规范还是很有必要的。

我习惯以下划线“_”为前缀，在代码中会获取这类节点，将规范告诉UI编辑人员，遇到以下划线”_“开头的节点不需要随便删除修改，其它非下划”_“的节点可以随便操作。

保持稳定的UI树结构是因为控制型组件中会使用到getChildByName、cc.find、getComponent等函数来获取子节点，所以节点树不能随意改动，如果要修改同时也需要修改组件代码。

4. 小结

---

本篇主是介绍组件与预制体的结合，这也是《组件心得三部曲》的最后一篇分享。单纯写好代码并不是最重要的，探索如何高效率、高质量产出代码的方法提升生产力才是关键，且更具价值，希望我的一点经验能起到抛砖引玉的作用，欢迎留言讨论！

---

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