这一节比较重要,认识一下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的组成,算了下一节再说了。
由于我也是初学者,如果有什么问题,可以留言,我们一起沟通,一起进步。