laya引擎学习（三、laya节点树）

这一节比较重要，认识一下laya框架的基础，了解laya对节点的封装，还有对脚本的调用，都来了解了解。

3.1 laya节点树

像我们之前学的html，都是了解了节点树的，根节点就是html标签，然后下面就是各个子节点，然后子节点再套子节点，形成了一个节点树，然后浏览器对这些节点树进行渲染，然后就把我们需要的页面渲染出来，laya其实也是一样，不同的组件和场景组成了一个页面树，交给laya引擎渲染，不过laya引擎怎么渲染我们不看，就来看看laya是怎么封装起来的组件树。

3.1.1 准备工作

这里写准备工作，就是简单提醒一下，怕有些朋友只看这一节，准备工作还简单，就是创建一个laya空的项目，然后再创建场景，最后把button组件拖入场景中，这样我们就可以专心来分析button这个组件的关系。如果不懂的创建的，可以看前面两节。

对了，还需要在右边的属性栏写入name，这样我们打印出来分析的时候，就可以知道是哪一个组件了。目前先添加场景和button组件

如果我们想打印日志，是需要创建js代码的，在代码中打印。

在上一节中，我们认识到有两种创建脚本的方式，一种是继承组件的，一种是继承Laya.Script的，这次我们是分析组件的继承关系，肯定是需要创建这种继承的组件的，代码如下：

export default class Node extends Laya.Button {

    constructor() { 
        super(); 
        /** @prop {name:intType, tips:"整数类型示例", type:Int, default:1000}*/
        let intType = 1000;
        /** @prop {name:numType, tips:"数字类型示例", type:Number, default:1000}*/
        let numType = 1000;
        /** @prop {name:strType, tips:"字符串类型示例", type:String, default:"hello laya"}*/
        let strType = "hello laya";
        /** @prop {name:boolType, tips:"布尔类型示例", type:Bool, default:true}*/
        let boolType = true;
        // 更多参数说明请访问: https://ldc2.layabox.com/doc/?nav=zh-as-2-4-0
        console.log(this);		//这里添加了打印
    }
    
}

3.1.2 分析Node对象

经过上一节准备就绪，我们这次就可以直接编译运行，然后看看浏览器中，打印的数据，应该都会怎么调试js代码把，在浏览器中按F12，然后点console就能看到我们在代码中打印的数据。

上面就是打印出来的部分属性，还没截图全，需要的话，可以自己跑，很简单的一个demo。

通过上面的属性，我们找到几个比较重要的属性：

• _children: Array(1)
  0: Text {_bits: 6, _children: Array(0), _extUIChild: Array(0), _parent: Node, name: "", …}
  length: 1
  __proto__: Array(0)
  

  孩子属性，里面包含了这个节点的孩子信息，因为是button，所以只是包含了一个text的孩子，并且这个孩子还是隐藏的。

• _components: Array(1)
  0: button {_id: 4, _indexInList: -1, _enabled: true, _awaked: true, owner: Node, …}
  length: 1
  __proto__: Array(0)
  

  组件属性，这里只有一个Button组件，所以就只有一个button，这也是一个数组

• _parent: Scene {_bits: 70, _children: Array(1), _extUIChild: Array(0), _parent: Sprite, name: "Scene", …}
  

  父节点，我们把button放在scene上，所以button的父节点就是scene。

• __proto__: Button
  

  还有最后一个，原型，Button，这就是js中来自继承层面的父亲。

3.1.3 继承层面

第二节分析了一下，我们目前先从js语法的继承层面来分析一下，先了解一下语法层面的继承。

怎么去了解了，这个我们首推官网的API，可以在API中查找button类，然后就可以一直找到尽头，当然也可以通过打印的__proto__一直往上走，也能找到顶。

左边是红色框是查找的button，右边就是继承关系了，看到button下面还有两个子类，父类是UIComponent。

所以我们可以继续往上走，

Button -> UIComponent -> Sprite -> Node -> EventDispatcher

其实这个查找到Node就可以了，下面是官方给出的node的介绍：

Node 类是可放在显示列表中的所有对象的基类。该显示列表管理 Laya 运行时中显示的所有对象。使用 Node 类排列显示列表中的显示对象。Node 对象可以有子显示对象。

EventDispatcher介绍：

EventDispatcher` 类是可调度事件的所有类的基类

所以所有的组件的基类是Node。

这条路暂时分析到这里，如果需要查看各个组件的方法，就可以这样看了。

3.1.4 节点层面

我不知道我这样说对不对，大家理解我意思就可以了，我们这次将的是_children和_parent。

由于之前的例子太少，所以我打算再添加几个组件，让我们来看看这些节点的描述情况。

下面是我们添加了这么多的组件，接下来看看打印：

Image结点开始看：

_children: Array(2)
0: ProgressBar {_bits: 6, _children: Array(2), _extUIChild: Array(0), _parent: Image, name: "progress", …}
1: TextInput {_bits: 214, _children: Array(1), _extUIChild: Array(0), _parent: Image, name: "input", …}
_parent: Node {_bits: 214, _children: Array(4), _extUIChild: Array(0), _parent: Scene, name: "button", …}

image添加了ProgressBar、TextInput，父指向了Node

Node节点：

_children: Array(4)
0: Image {_bits: 214, _children: Array(2), _extUIChild: Array(0), _parent: Node, name: "Image", …}
1: Label {_bits: 6, _children: Array(1), _extUIChild: Array(0), _parent: Node, name: "Label", …}
2: Radio {_bits: 70, _children: Array(1), _extUIChild: Array(0), _parent: Node, name: "Radio", …}
3: Text {_bits: 6, _children: Array(0), _extUIChild: Array(0), _parent: Node, name: "", …}
_parent: Scene {_bits: 214, _children: Array(3), _extUIChild: Array(0), _parent: Sprite, name: "Scene", …}

Scene节点：

_children: Array(3)
0: Node {_bits: 214, _children: Array(4), _extUIChild: Array(0), _parent: Scene, name: "button", …}
1: CheckBox {_bits: 70, _children: Array(1), _extUIChild: Array(0), _parent: Scene, name: "CheckBox", …}
2: Clip {_bits: 6, _children: Array(0), _extUIChild: Array(0), _parent: Scene, name: "Clip", …}
_parent: Sprite {_bits: 214, _children: Array(1), _extUIChild: Array(0), _parent: Stage, name: "root", …}

Sprite节点：

_children: Array(1)
0: Scene {_bits: 214, _children: Array(3), _extUIChild: Array(0), _parent: Sprite, name: "Scene", …}
_parent: Stage {_bits: 210, _children: Array(1), _extUIChild: Array(0), _parent: null, name: "", …}

Stage节点：

_children: Array(1)
0: Sprite {_bits: 214, _children: Array(1), _extUIChild: Array(0), _parent: Stage, name: "root", …}
_parent: null

这个Sprite节点，就是我们继承层面的Sprite。如果要找继承关系，可以通过Scene这个来查找。

laya引擎就是靠_children，_parent来实现把所有的组件连接成树。

3.1.5 components层面

大家是不是很奇怪，js脚本还没说，确实，到了这一节，我们就简单描述一下js是在哪里的。

首先，runtime.js这个是挂在在组件上的，所以我们直接看组件的属性，就能看到有一个runtime.js。这个比较简单，毕竟是我们直接挂载的。

这个Laya.Script脚本是保存在_components这个里面了。

_components: Array(1)
0: button
$_GID: 25
owner: Node {_bits: 214, _children: Array(4), _extUIChild: Array(0), _parent: Scene, name: "button", …}
runtime: "JSbutton.js"
_awaked: true
_enabled: true
_id: 5
_indexInList: -1
destroyed: undefined
enabled: true
id: 5
isSingleton: false
__proto__: Script

是不是看到了，JSbutton.js，这个就是我们添加到组件的button的脚本，这里有点意思的是owner，这个是指向了我们的Button节点（Node是写了一个runtime脚本继承了button的名字）。

所以我们在Script脚本中，取button节点，是使用this.owner，而在runtime.js脚本中，取button节点，直接this。

3.1.6 最后

这一节好像也没叫生命周期，只是简单的说了一些laya的组成，算了下一节再说了。

由于我也是初学者，如果有什么问题，可以留言，我们一起沟通，一起进步。