欢迎点击「算法与编程之美」↑关注我们!
本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。
作者|王小强
来源|https://my.oschina.net/wxqdoit
本文以切入源码的方式讲解laya核心API的使用以及需要注意的点。
Node(节点)操作
大部分的laya UI组件都可以看做节点,可以看做web开发中,使用JavaScript对html节点进行操作。
添加节点核心方法:
/**
* 添加子节点。
* @param node 节点对象
* @return 返回添加的节点
*/
addChild(node: Node): Node;
/**
* 批量增加子节点
* @param ...args 无数子节点。
*/
addChildren(...args: any[]): void;
/**
* 添加子节点到指定的索引位置。
* @param node 节点对象。
* @param index 索引位置。
* @return 返回添加的节点。
*/
addChildAt(node: Node, index: number): Node;
/**
* 根据子节点对象,获取子节点的索引位置。
* @param node 子节点。
* @return 子节点所在的索引位置。
*/
注意:添加节点时候,越后添加的层级越高,可以设置zOrder属性调整对象层级。
销毁、删除节点核心方法:
/**
* 删除子节点。
* @param node 子节点
* @return 被删除的节点
*/
removeChild(node: Node): Node;
/**
* 从父容器删除自己,如已经被删除不会抛出异常。
* @return 当前节点( Node )对象。
*/
removeSelf(): Node;
/**
* 根据子节点名字删除对应的子节点对象,如果找不到不会抛出异常。
* @param name 对象名字。
* @return 查找到的节点( Node )对象。
*/
removeChildByName(name: string): Node;
/**
* 根据子节点索引位置,删除对应的子节点对象。
* @param index 节点索引位置。
* @return 被删除的节点。
*/
removeChildAt(index: number): Node;
/**
* 删除指定索引区间的所有子对象。
* @param beginIndex 开始索引。
* @param endIndex 结束索引。
* @return 当前节点对象。
*/
removeChildren(beginIndex?: number, endIndex?: number): Node;
/**
* <p>销毁此对象。destroy对象默认会把自己从父节点移除,并且清理自身引用关系,等待js自动垃圾回收机制回收。destroy后不能再使用。</p>
* <p>destroy时会移除自身的事情监听,自身的timer监听,移除子对象及从父节点移除自己。</p>
* @param destroyChild (可选)是否同时销毁子节点,若值为true,则销毁子节点,否则不销毁子节点。
*/
destroy(destroyChild?: boolean): void;
/**
* 销毁所有子对象,不销毁自己本身。
*/
destroyChildren(): void;
注意:如果将节点销毁,则不能再使用,但删除之后的节点依旧可以使用。
获取节点核心方法:
/**
* 根据子节点对象,获取子节点的索引位置。
* @param node 子节点。
* @return 子节点所在的索引位置。
*/
getChildIndex(node: Node): number;
/**
* 根据子节点的名字,获取子节点对象。
* @param name 子节点的名字。
* @return 节点对象。
*/
getChildByName(name: string): Node;
注意:getChildByName方法传入的name,是在创建的时候为节点设置的name,并且只能获取下一级的孩子节点,而不是所有属于当前节点的所有子节点。
事件类型非常多,常用的有:
/** 定义 mousedown 事件对象的 type 属性值。*/
static MOUSE_DOWN: string;
/** 定义 mouseup 事件对象的 type 属性值。*/
static MOUSE_UP: string;
/** 定义 click 事件对象的 type 属性值。*/
static CLICK: string;
/** 定义 rightmousedown 事件对象的 type 属性值。*/
static RIGHT_MOUSE_DOWN: string;
/** 定义 rightmouseup 事件对象的 type 属性值。*/
static RIGHT_MOUSE_UP: string;
/** 定义 rightclick 事件对象的 type 属性值。*/
static RIGHT_CLICK: string;
/** 定义 mousemove 事件对象的 type 属性值。*/
static MOUSE_MOVE: string;
/** 定义 mouseover 事件对象的 type 属性值。*/
static MOUSE_OVER: string;
具体可以查看layaAir.d.ts laya.events模块,大概在17316行.......
事件绑定:
/**
* <p>增加事件侦听器,以使侦听器能够接收事件通知。</p>
* <p>如果侦听鼠标事件,则会自动设置自己和父亲节点的属性 mouseEnabled 的值为 true(如果父节点mouseEnabled=false,则停止设置父节点mouseEnabled属性)。</p>
* @param type 事件的类型。
* @param caller 事件侦听函数的执行域。
* @param listener 事件侦听函数。
* @param args (可选)事件侦听函数的回调参数。
* @return 此 EventDispatcher 对象。
*/
on(type: string, caller: any, listener: Function, args?: Array<any>): EventDispatcher;
/**
* <p>增加事件侦听器,以使侦听器能够接收事件通知,此侦听事件响应一次后则自动移除侦听。</p>
* <p>如果侦听鼠标事件,则会自动设置自己和父亲节点的属性 mouseEnabled 的值为 true(如果父节点mouseEnabled=false,则停止设置父节点mouseEnabled属性)。</p>
* @param type 事件的类型。
* @param caller 事件侦听函数的执行域。
* @param listener 事件侦听函数。
* @param args (可选)事件侦听函数的回调参数。
* @return 此 EventDispatcher 对象。
*/
once(type: string, caller: any, listener: Function, args?: Array<any>): EventDispatcher;
注意:多次为同一个节点使用on方法会多次绑定事件,需要了解的是,如果对节点的操作不会有变化,则使用on方法绑定一次即可,如果根据状态条件等因素的不同,则使用once绑定。
网络请求也是封装的HttpRequest,比较简单。
/**
* 发送 HTTP 请求。
* @param url 请求的地址。大多数浏览器实施了一个同源安全策略,并且要求这个 URL 与包含脚本的文本具有相同的主机名和端口。
* @param data (default = null)发送的数据。
* @param method (default = "get")用于请求的 HTTP 方法。值包括 "get"、"post"、"head"。
* @param responseType (default = "text")Web 服务器的响应类型,可设置为 "text"、"json"、"xml"、"arraybuffer"。
* @param headers (default = null) HTTP 请求的头部信息。参数形如key-value数组:key是头部的名称,不应该包括空白、冒号或换行;value是头部的值,不应该包括换行。比如["Content-Type", "application/json"]。
*/
send(url: string, data?: any, method?: string, responseType?: string, headers?: Array<any>): void;
一个简单的请求网络数据示例:
getList(page,size,url){
let http = new Laya.HttpRequest();
http.send(`${this.gd.host}${url}?userId=${this.gd.user.id}&page=${page}&size=${size}`, 'GET');
http.timeout = 1000;
return new Promise((resolve, reject) => {
http.once(Laya.Event.COMPLETE, this, (resp) => {
resp = JSON.parse(resp);
if (resp.meta.code === 200) {
if (resp.data !== null) {
resolve(resp.data)
} else {
resolve(resp.data);
}
} else {
console.log('服务器错误');
}
});
http.once(Laya.Event.ERROR, this, (resp) => {
resolve(resp.data);
});
})
}
let data = await EventUtils.getInstance().getList(this.currentPage, this.size,'/norain/pre/rank/time');//请求加载数据
缓动动画
缓动类型解释传送门:https://layaair.ldc.layabox.com/api/?category=Core&class=laya.utils.Ease
缓动动画演示传送门:https://layaair.ldc.layabox.com/demo/?category=2d&group=Tween&name=EaseFunctionsDemo
拓展阅读:
where2go 团队
微信号:算法与编程之美
温馨提示:点击页面右下角“写留言”发表评论,期待您的参与!期待您的转发!