这一节比较重要，认识一下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-0console.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的组成，算了下一节再说了。

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

laya引擎学习（三、laya节点树）相关推荐

laya引擎学习（二、第一个界面）
接下来我们做做我们的第一个界面,启动界面.其实感觉做前端比较难的就是素材,如果在公司的话,有UI小姐姐做好了,我们只需要自己实现就行,现在是自己玩的话,还是上网找素材,不过感谢这个大佬,素材是免费的, ...
laya引擎学习（一、初识）
本来没有计划学前端的,更没有计划学引擎.不过还真的想一出搞一出,觉得做后端没有界面无法展示自己想要的效果,就在今年过年的时候,努力突击了一把,H5,CSS,js,看了视频之后,才发现这几种语言只是前端 ...
ZTree学习(三)，ztree树扩展
一,扩展要求真的是没有对比就没有伤害.如果只是单纯的按照ztree的api去异步加载树结构,那么就会使左图那个样子. 特点:1,所有的节点前面均会有radio(因为设置的是radio:"a ...
Laya引擎生产力工具LayaTree
LayaTree LayaTree是Chrome浏览器平台上的专门为Laya引擎设计的生产力工具.能在项目运行时阶段进行调试和修改.目前功能在不断迭代中,致力于实现类似于Unity编辑器的开发体验.相 ...
淘宝小程序游戏迁移Laya引擎
淘宝小程序游戏迁移Laya引擎 1. 目录结构 bin -- 当前项目的输出文件 laya -- 存放UI项目 assets -- 图片,音频资源目录 pages -- .scene 场景文件 key ...
Golang + Laya引擎实现的简易版“球球大作战”小游戏
开发动机学习Golang语言以来,先后实现了个人博客,生活美食推荐系统,以及一些如日志收集工具等开发能用到的小工具,但还没写过游戏.前不久,利用闲暇时间,写了套简易的分布式游戏框架,心想写好了不投入 ...
物理引擎学习08-AABB树
AABB树是由AABB包围盒结点构成的二叉树,常用来加速场景中的射线检测和碰撞检测.树的每个结点都是一个包围盒,且结点的包围盒包裹了所有子结点的包围盒.本文深入的讲解了AABB树相关的算法,以及结合物 ...
羊了个羊源码H5,TypeScript,LAYA引擎
源码下载地址在文章底部这是一次挑战开发,限定时间只有3个小时. 所以这里重用了之前写的消消乐源码. 因为项目(商业级)积累了很多消除,排序,动画,相关的核心算法节省了造轮子的过程如果对消消乐开发 ...
【vn.py学习笔记（三）】vn.py事件引擎学习笔记
[vn.py学习笔记(三)]vn.py事件引擎学习笔记 1 时间驱动 2 事件驱动 3 事件引擎工作流程 4 事件引擎结构 4.1 事件队列 4.2 事件处理线程 4.3 事件处理函数字典/通用事件 ...

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