公众号上我们已经学习了有段时间的Cocos Creator组件开发了，组件化开发到底有是什么？Shawn这阵子思绪不断，同时将自己的理解应用于实际项目中，颇有心得，在这里做一个分享。

1. 节点与组件的关系

有经验的同学，一上手Cocos Creator就能想到「装饰模式」，我们看下定义：

装饰模式（Decorator）动态地给一个对象添加一些额外的职责，就增加功能来说，装饰模式比生成子类更为灵活。

再看一下装饰模式的基本UML类图结构 ：

大话设计模式-装饰模式UML

请注意，上图是我从《大话设计模式》中截取的，图中的Component在Cocos Creator对应的是Node，Decorator对应的是Cocos Creator中的Component。

非程员同学，看到这里可能会觉得比较懵，这里请耐心听我为解释「装饰模式」。既然其中有装饰二字，就应该有装饰品和被装饰者，例如：一个人穿上衣服、背上双肩包、 带上电脑和手机（哈哈！典型的Shanw平时的装扮）。

程序员背包

上图中的人就是被装饰者，衣服、双肩包都是装饰品。其中衣服、双肩包提供了渲染能力，美化外表，让Shawn可以正常地走在大街上；电脑赋予Shawn工作能力，比如写代码、写点教程，当然人走在大家街上你是看不到电脑的，因为对应的行为场景没有激活；手机上不时会收到其他人发来的消息或任务，形成与外部世界沟通的交互界面，提供的是UI交互能力。

当Shawn把《大话设计模式》这本书看懂了，并能真正运用了，《大话设计模式》这本书也就装饰了我，只不过从外表上是看不出来的，需要工作起来（代码运行起来）才能表现出来。说不定那天我又把之前的知识给忘记了，衣服、电脑、手机可能还会换，装饰品对装饰被者来说是动态变化的。

说了这么多，我对组件与节点关系的理解是：组件为节点赋能

组件为节点赋能

2. 程序员为美术、策划赋能

基于Cocos Creator这样的可视化引擎，组件代码有着巨大的意义。程序员开发出的组件代码不应该只是满足自己完成任务，而应该是为游戏设计师提供体验优良的工具，当然你在提供这些组件工具的同时，你的设计水平也在提高。

组件脚本就像是美术生产的图片、策划编写的文案一样，是游戏开发中的一项基础生产资料，游戏内容更多的是应该由游戏设计师去完成。

程序不仅仅是编写组件脚本，还应该向团队其他人员提供更多的帮助，比如：教他人使用Cocos Creator、教他人使用你编写的组件、编写项目辅助工具...。目的是用程序的知识、思维和工具，去装饰身边的人，给他们提供他们本身不具备的能力，这样才能更多地发挥程序员的价值。如果程序员平时没有察觉到开发体验（各种不爽），做出的产品也很难谈的上有用户体验。

3. 人与人之间组件化协作

可能大多数人认为上面的协作模式太过理想化了，确实如些，这么多年了，仅在最近Shawn才被幸运眷顾到，哈哈！Shanw服务的一家儿童教育公司，开发了一套H5教学互动课件。

初期Shawn为美术人员进行了简单的Cocos Creator学习培训，制作了一个Demo，并对Demo的设计思路、组件用法、项目规范进行了说明。然后就把内容设计完全效给两名美术同学。没想到他们丰富的想像力，把我提供的组件脚本完成了之前从未想到过的功能，而且这两名美术同学才刚从大学毕业！

项目过程中，这两位美术同学不仅是美术用PhotoShop出图，还整理需求、编辑界面、编辑动画、实现需求；Shawn则在一边打酱油，写点教程，即时根据他们提出的功能点提供解决办法或组件代码。同时引导他们使用git来管理项目资源；引入任务管理系统梳理工作内容；部署内部自动化构建环境方便授课老师进行测试、磨课、教学等，协作的非常顺利。

站在团队基础上，为他人赋予能力，将自己当成装饰品做为组件，去装饰他人让节点充分发挥能力，进行人与人之间的组件化协作，这是我最近从Cocos Creator组件化开发收获的启发。

4. 小结

这一篇没讲多少Cocos Creator具体的技术细节，简单讲述了「装饰模式」的结构，同时推荐《大话设计模式》这本书。Shawn写教程的风格多少受到《大话设计模式》、《Head First》的影响。 后面Shanw通过Cocos Creator的组件化开发，若有所悟地将组件化应用到人与人之间的协作，这是自己在开过程中的一点心得，希望对你也有所帮助。

今天周未，奉送一段动漫给大家，放松下心情！

欢迎关注「奎特尔星球」微信公众号，更期待您向公众号投稿，来我们一起成长！

热门文章TOP10，邀你遨游「奎特尔星球」

1. Cococ Creator基础教程—meta的秘密(3)

2. uikiller再度进化支持Cocos Creator 2.0

3. 庆祝「奎特尔」500勇士，诞生！

4. 当creator遇上protobufjs—感谢有你，再战2.0

5. Cocos Creator基础教程(7)—场景切换

6. Cocos Creator基础教程(9)—优化代码编辑器

7. Cocos Creator基础教程(4)—color属性的妙用

8. Cocos Creator基础教程(1)—从zIndex开始

9. Cocos Creator基础教程(2)—聊聊scale与size属性

10. Creator模块介绍—领略模块化的力量

本文分享自微信公众号 - Creator星球游戏开发社区（creator-star）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。