在实习的这一个月里，做了之前从来没有专门去学习的前端，我感觉学到的最重要一点就是前端的组件化思想。
最近写了那几篇关于Laya的文章都有提到过我们组件化的一个实现，今天就主要来讲一下这个。
首先先讲解一下组件化。主要是组件化的两个好处吧。
- 减少代码的冲突。一般的团队协作过程中，采用IDE生成UI代码的方法是非常容易产生代码冲突，而且往往这种冲突是难以解决的（可以想象一下当你跟你的队友同时改了同一个UI文件，如果有仔细去看一下IDE生成的UI代码就可以发现，即时稍微移动了某个空间，可能代码都会改动好几处，而且一般的UI代码会非常的冗长，这样的代码要去merge是有多困难）
- 更好地整理逻辑代码，一方面减少bug的产生，另一方面是当bug产生的时候，组件化的代码逻辑会更加的清晰，有利于我们修复bug。
- 前端的组件复用
如何实现
- 在设计层面将界面组件化
设计上我们需要提前预想到前端需要如何组件化，一般情况下我们是按照界面上完成共同功能的控件放在同一个组件UI上。
例如棋牌游戏中多个玩家都共同有一个展示任务相关的模块，包括头像、金钱、胜率之类的，可能同个房间内有多个玩家，那么就可以直接将展示玩家信息的所有控件组件化。 - 实现
实现上面一般情况下就是使用一个UI的类去继承对应的UI，对应继承的类的this指针可以直接获取到UI父类的所有控件信息。
例如我们的UI中有一个Game的类，这个类是继承了我们最底层的UI，整个游戏的画布。所有的组件都是依赖于该game.ui。通过将game添加到stage，然后其他的ui就添加到game中来显示。同时我们的布局都是在game.ui添加空白的精灵（sprite），然后将对应的组件实例化后addChil到对应的sprite上。
对于game类，可以通过this.getChildByName来获取对应的sprite，通过管理sprite我们就可以直接设置对应的控件的位置。
而对于其他具体的组件，一般情况下还需要考虑对应的动画逻辑。创建对应的类来继承UI，一般情况下会将组件上所有的控件在类中用属性保存起来，通过getChildByName来赋值
网友评论