JavaScript API

zin 内置了许多全局的 JavaScript 方法，这些方法大多与 zin 页面渲染相关。

fetchContent

用于获取符合选择器规则的元素内容并渲染至页面。

type Options = {
    id?: string;        // 请求 id
    target?: string;    // 目标元素；
    delayTime?: number; // 请求延迟时间
    success?: Function; // 请求成功时的回调函数
    error?: Function;   // 请求失败时的回调函数
    complete: Function; // 请求完成时的回调函数
    onFinish: Function; // 请求结束时的监听函数
};

function fetchContent(url: string, selectors: string|string[], options: string|Function|Options): void;

• 参数：
  • url：请求地址
  • selectors：所请求元素的选择器，如果值为字符串则以 , 为分割符
  • options: 选项
    • 值为字符串类型时表示请求的 id
    • 值为函数时表示请求成功时的回调函数

该方法的调用可以省略为只传入一个参数：

type Options = {
    url: string;                // 请求地址
    selectors: string|string[]; // 请求的选择器
    id?: string;                // 请求 id
    target?: string;            // 目标元素；
    delayTime?: number;         // 请求延迟时间
    success?: Function;         // 请求成功时的回调函数
    error?: Function;           // 请求失败时的回调函数
    complete: Function;         // 请求完成时的回调函数
    onFinish: Function;         // 请求结束时的监听函数
};

function fetchContent(options: Options): void;

loadTable

通过 fetchContent 加载数据表格内容并渲染至页面。

function loadTable(url: string, id: string): void;

• 参数
  • url：请求地址
  • id：数据表格的 id

loadPage

与 fetchContent 作用类似，若使用默认参数值则加载并渲染页面。

function loadPage(url: string = 'currentAppUrl', selector?: string|string[], id: string = selector | 'page'): void;

• 参数：
  • url：请求地址
  • selectors：所请求元素的选择器，如果值为字符串则以 , 为分割符
  • id：请求 id

loadCurrentPage

与 loadPage 作用类似，区别在于仅作用于当前页面。

function loadCurrentPage(selector?: string|string[]): void;

• 参数：
  • url：请求地址
  • selectors：所请求元素的选择器，如果值为字符串则以 , 为分割符

parseSelector

解析部件选择器并返回解析结果。

type Result = {
    class: string[];  // 选择其所包含的 class 列表
    id: string;       // 选择器所包含的 id
    tag: string;      // 选择器的标签
    inner: boolean;   // 选择器是否匹配所有子元素
    name: string;     // 选择器名称
    selector: string; // 格式化后的选择器
};

function parseSelector(selector: string): Result|null;

onRenderPage

页面渲染监听函数，接收一个回调函数作为参数，若回调函数返回值为 false，则终止页面渲染。

function onRenderPage(callback: (info: object) => boolean): void;

• 参数
  • selector 选择器
• 返回值：解析结果

toggleLoading

切换给定元素的加载状态，该方法通过添加或移除 css 工具类实现。

function toggleLoading(target: string, isLoading: boolean): void;

• 参数：
  • target：目标元素的选择器
  • isLoading：是否为加载中状态