laya核心API五分钟速记
欢迎点击「算法与编程之美」↑关注我们！
本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。
作者|王小强
来源|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 团队
微信号：算法与编程之美
温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-05-14，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读