laya核心API五分钟速记

简介: laya核心API五分钟速记

本文以切入源码的方式讲解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

目录
相关文章
|
JSON 移动开发 Java
氚云丨开发课— 09平台 API 的调用及自定义 API 的编写与调用| 学习笔记
快速学习氚云丨开发课— 09平台 API 的调用及自定义 API 的编写与调用。
|
前端开发 Java 关系型数据库
最好用的七大顶级 API 接口测试工具
现在 API 接口已经成为软件开发重要的组成部分,由于 API 并没有 GUI 图形界面,无法直观的对接口进行测试,所以对于前后端开发来说,找到一套趁手的工具对 API 接口进行测试,了解开发的程序是否符合预期十分重要。面对批量的 API,手动测试变得非常低效,自动化 API 接口测试工具,帮我们提高测试效率的同时,更能帮我们保证程序的稳定和安全性。
3246 0
最好用的七大顶级 API 接口测试工具
|
2月前
|
缓存 监控 API
淘宝 API 接口使用的技术要点与注意事项
在数字化商业环境中,淘宝API为开发者提供了强大的工具,用于与淘宝平台交互,获取商品信息及处理交易等。本文总结了正确使用API的关键技术要点:注册认证、理解接口文档、遵守调用限制、确保参数准确性、保护数据安全、处理异常、性能优化、版本兼容、合规性及日志监控,帮助开发者实现高效、安全的程序开发。
|
2月前
|
缓存 Linux API
核心API文档 【ChatGPT】
核心API文档 【ChatGPT】
|
2月前
|
安全 物联网 API
API的科普
在当今这个数字化时代,信息如同血液般在无数个系统、应用和设备之间流淌,而这一切高效、无缝的交互背后,离不开一个至关重要的技术组件——API(Application Programming Interface,应用程序编程接口)。API作为数字世界的桥梁,不仅连接了不同的软件系统,还推动了数据共享、业务自动化以及创新服务的不断涌现。本文将深入探讨API的定义、作用、发展历程、关键技术、应用场景以及未来趋势,旨在揭示API在数字化转型中的核心价值和无限潜力。
260 0
|
6月前
|
安全 API 数据安全/隐私保护
【安全每日一讲】API是什么?解密API背后的奥秘
API,全称Application Programming Interface,是预定义的函数集合,用于系统间数据传输和指令交互。API简化了应用程序间的数据共享,扩展功能,实现跨平台交互,并确保数据安全性。常见的API类型包括RESTful、SOAP、RPC、GraphQL等。API的优势在于降低开发难度,提升效率,促进数据共享,优化用户体验。广泛应用于社交网络、电商平台和金融领域。然而,API也面临认证授权、数据泄露和恶意攻击等安全问题,需采取HTTPS、OAuth2等12种方法保障安全。
|
JSON 程序员 API
以程序员视角讲述关于api数据接口的应用
作为一名程序员,API数据接口是我们日常工作中不可或缺的一部分。API,即Application Programming Interface,应用程序编程接口,是一种用于访问特定软件包或服务的预定义函数和过程。通过API,我们可以从各种数据源获取数据,并将其用于构建应用程序、网站或其他数字工具。
|
开发框架 前端开发 Java
什么是API?(详细解说)
API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。——百度百科
|
机器学习/深度学习 程序员 API
分享两个超牛的开源API项目,程序员需要的免费API都在这里了!
我们程序员要和各种 API 打交道,比如在网站上展示实时天气,在电商网站展示物流动态,在外卖配送中展示位置信息,这些 API 都要我们自己去实现显然是不现实的。
|
云安全 数据采集 运维
万丈高楼平地起,每个API皆根基
万丈高楼平地起,每个API皆根基