论坛 › 聊天摸鱼 › 脚本猫UI库API设计提案

王一之 发表于 2023-6-20 15:51:20

脚本猫UI库API设计提案

## 起因

!(data/attachment/forum/202306/20/154426kwvqjxpw7v5zwxni.png)

开发者群中@steven026 一直提起此事，在群中讨论许久，最终决定做一个初版，然后交由@steven026 进行维护

## API设计
本次主要想看看大家关于这个API的设计想法，库使用@require引用，并不内置脚本猫扩展。

下面是API设计，关于其它想法可以在后面提出

```js
// ==UserScript==
// @name         脚本猫UI库
// @namespace    https://bbs.tampermonkey.net.cn/
// @version      0.1.0
// @description基于Arco做的UI库, 用于快速开发脚本的UI界面
// @author       You
// @match      https://bbs.tampermonkey.net.cn/
// ==/UserScript==

const data = CAT_UI.data({});

CAT_UI.create({
        home: "/home",
        routes: [{
                // page1
                path: "/home",
                render() {
                        return [
                                CAT_UI.Text("脚本猫的UI框架"),
                                CAT_UI.Button("我是按钮", () => {
                                        alert("我被点击了,你输入了: " + data.input);
                                }),
                                CAT_UI.Input(data.input),
                        ];
                },
        }],
});


CAT_UI.create({
        render() {
                return [
                        CAT_UI.Text("脚本猫的UI框架"),
                        CAT_UI.Button("我是按钮", () => {
                                alert("我被点击了,你输入了: " + data.input);
                        }),
                        CAT_UI.Input(data.input),
                ];
        },
});

CAT_UI.create({
        home: "/home",
        routes: [{
                // page1
                path: "/home",
                render: [
                        { type: "text", text: "脚本猫的UI框架" },
                        { type: "button", text: "我是按钮", click: () => { alert("我被点击了,你输入了: " + data.input) } },
                        { type: "input", value: data.input },
                ]
        }],
});

CAT_UI.create({
        render: [
                { type: "text", text: "脚本猫的UI框架" },
                { type: "button", text: "我是按钮", click: () => { alert("我被点击了,你输入了: " + data.input) } },
                { type: "input", value: data.input },
        ]
});

```

maxzhang 发表于 2023-6-20 15:52:48

我支持道哥

steven026 发表于 2023-6-20 15:52:52

我不是 我没有 别瞎说.jpg

李恒道 发表于 2023-6-20 15:53:27

我觉得短期不用特别考虑路由的问题
先搓出来一个最简的render

王一之 发表于 2023-6-20 15:53:57

李恒道 发表于 2023-6-20 15:53
我觉得短期不用特别考虑路由的问题
先搓出来一个最简的render

嗯，是的，初版不考虑路由

bigonion 发表于 2023-6-20 18:51:28

button有计划进入支持promise吗

wwwwwllllk 发表于 2023-6-20 18:54:34

我同意！！！！

cxxjackie 发表于 2023-6-20 21:18:27

链式调用怎么样？也不难设计：
CAT_UI.create({
    render() {
      return CAT_UI
            .Text("脚本猫的UI框架")
            .Button("我是按钮", () => {
                alert("我被点击了。");
            })
    }
});
var CAT_UI = {
    create() {},
    Text(...args) {
      const text = createElement('text', ...args);
      return new CAT_NODELIST(text);
    },
    Button(...args) {
      const button = createElement('button', ...args);
      return new CAT_NODELIST(button);
    },
};

class CAT_NODELIST {
    constructor(node) {
      this.nodeList = ;
    }
    Text(...args) {
      const text = createElement('text', ...args);
      this.nodeList.push(text);
      return this;
    }
    Button(...args) {
      const button = createElement('button', ...args);
      this.nodeList.push(button);
      return this;
    }
}

王一之 发表于 2023-6-21 10:19:01

cxxjackie 发表于 2023-6-20 21:18
链式调用怎么样？也不难设计：

看起来也不错，都差不太多，本质上感觉都是同一种设计思路

不过链式的这样好像有点坑

例如像有多层的情况，这会按照调用顺序，直接加到后面了：

CAT_UI.create({
    render() {
      return CAT_UI
            .Text("脚本猫的UI框架")
            .Button("我是按钮", () => {
                alert("我被点击了。");
            })
            .Space(
                CAT_UI
                  .Text("第二层")
                  .Button("按钮")
            );
    }
});

cxxjackie 发表于 2023-6-21 22:44:07

王一之 发表于 2023-6-21 10:19
看起来也不错，都差不太多，本质上感觉都是同一种设计思路

不过链式的这样好像有点坑


应该不会吧，嵌套的都是新的CAT_NODELIST实例，不是同一个，最多再加个处理，当参数是CAT_NODELIST时嵌套成多维数组，最后再一起渲染。感觉这个跟你的第一种写法应该是一致的，只是我不太喜欢写一堆CAT_UI的做法，能省则省。

查看完整版本: 脚本猫UI库API设计提案