API参考

Yete API 参考。

基本用法

const yete = require("@iftc/yete");

API

setIcon(iconPath)

const { setIcon } = require("@iftc/yete");
setIcon("favicon.ico");

设置图标。

参数：

iconPath[string] 图标路径

setTitle(title)

const { setTitle } = require("@iftc/yete");
setTitle("Yete");

设置标题。

参数：

title[string] 标题

route(options)

const { route, loadPage } = require("@iftc/yete");
route([
    { path: '/', page: () => loadPage(HomePage) },
    { path: '/about', page: () => loadPage(AboutPage) }
]);
route([
    { path: '/other', page: () => loadPage(OtherPage) }
]); // 添加新路由
/*
添加新路由不会覆盖旧路由，新路由会追加到旧路由之后。
实际路由变为：
[
    { path: '/', page: () => loadPage(HomePage) },
    { path: '/about', page: () => loadPage(AboutPage) },
    { path: '/other', page: () => loadPage(OtherPage) }
]
*/

添加路由，第二次使用不会覆盖第一次添加的路由

参数：

options[array] 路由配置项
options.path[string] 路径
options.page[function] 页面组件

Page

const { Page } = require("@iftc/yete");
class MyPage extends Page {
    constructor() {
        super("my-page");
    }
    render() {
        return document.createElement('div', { className: 'page' });
    }
}

页面组件，用于渲染页面。

方法：

super(name[string]) 构造函数，name 为页面名称
render() -> HTMLElement 渲染页面

loadPage(page)

const { loadPage } = require("@iftc/yete");
loadPage(HomePage);

加载页面组件。

参数：

page[yete.Page] 页面组件

[function] 页面渲染函数

start()

const { start } = require("@iftc/yete");
start();

当全部初始化完成后，调用此方法启动程序。

loadCSS(cssPath)

const { loadCSS } = require("@iftc/yete");
loadCSS("index.css");

加载已缓存到本地的 CSS 文件。

参数：

cssPath[string] - CSS 文件路径

loadScript(scriptPath)

const { loadScript } = require("@iftc/yete");
loadScript("index.js");

加载已缓存到本地的 JS 文件。

参数：

scriptPath[string] - JS 文件路径

toPage(path, message = null)

const { toPage } = require("@iftc/yete");
toPage("/about");

跳转到指定页面。

参数：

path[string] - 页面路径
message[object] - 传递给页面的消息

newElement(tag, options = {})

const { newElement } = require("@iftc/yete");
const text = newElement("Text");
const button = newElement("Button");

创建一个元素。元素标签不是 HTML 元素，也不兼容 HTML 元素，使用 HTML 元素可能会发送报错（除非以 UI 组件库的方式注册和绑定 HTML 元素）！

参数：

tag[string] - 元素标签
options[object] - 元素属性

element[HTMLElement] - 元素对象

addEventListener(type, listener) / on(type, listener)

const { addEventListener, on } = require("@iftc/yete");
addEventListener("event-name", function(event) {
    console.log(event);
});
on("event-name", function(event) {
    console.log(event);
});

添加事件监听器

参数：

eventName[string] - 事件名称
callback[function] - 回调函数

removeEventListener(type, listener) / off(type, listener)

const { removeEventListener, off } = require("@iftc/yete");
removeEventListener("event-name", function(event) {
    console.log(event);
});
off("event-name", function(event) {
    console.log(event);
});

移出事件监听器

参数：

eventName[string] - 事件名称
callback[function] - 回调函数

dispatchEvent(type, event) / emit(type, event)

const { dispatchEvent, emit } = require("@iftc/yete");
dispatchEvent("event-name", new YeteEvent("event-name"));
emit("event-name", new YeteEvent("event-name"));

派发事件

参数：

type[string] 事件名
event[Event] 事件对象

YeteEvent

const { YeteEvent } = require("@iftc/yete");
class NewYeteEvent extends YeteEvent {
    constructor(type, options) {
        super(type, options);
    }
}

YeteEvent 事件类型，所有事件触发的事件类型都为这个。

getBinding()

const { getBinding } = require("@iftc/yete");
const binding = getBinding();

获取当前绑定的所有 yete-id 属性的元素。

NodeList[] - 当前绑定的所有 yete-id 属性的元素。

custom404(page = null)

const { custom404 } = require("@iftc/yete");
custom404(Custom404Page);

参数：

page[yete.Page] - 自定义404页面。

custom500(page = null)

const { custom500 } = require("@iftc/yete");
custom500(Custom500Page);

参数：

page[yete.Page] - 自定义500页面。

colorPicker()

const { colorPicker } = require("@iftc/yete");
button.addEventListener("click", async () => { // 必须让用户主动触发才能打开屏幕颜色选择器
    const color = await colorPicker();
    console.log(color);
});

打开屏幕颜色选择器

string - 颜色值(如 "#FF0000")