脚本猫UI库API设计提案

王一之

起因

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

API设计

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

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

// ==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

我支持道哥

steven026

我不是 我没有 别瞎说.jpg

李恒道

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

王一之

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

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

bigonion

button有计划进入支持promise吗

wwwwwllllk

我同意！！！！

cxxjackie

链式调用怎么样？也不难设计：

1. CAT_UI.create({
   
2.     render() {
   
3.         return CAT_UI
   
4.             .Text("脚本猫的UI框架")
   
5.             .Button("我是按钮", () => {
   
6.                 alert("我被点击了。");
   
7.             })
   
8.     }
   
9. });

复制代码

1. var CAT_UI = {
   
2.     create() {},
   
3.     Text(...args) {
   
4.         const text = createElement('text', ...args);
   
5.         return new CAT_NODELIST(text);
   
6.     },
   
7.     Button(...args) {
   
8.         const button = createElement('button', ...args);
   
9.         return new CAT_NODELIST(button);
   
10.     },
    
11. };
    
12. 
    
13. class CAT_NODELIST {
    
14.     constructor(node) {
    
15.         this.nodeList = [node];
    
16.     }
    
17.     Text(...args) {
    
18.         const text = createElement('text', ...args);
    
19.         this.nodeList.push(text);
    
20.         return this;
    
21.     }
    
22.     Button(...args) {
    
23.         const button = createElement('button', ...args);
    
24.         this.nodeList.push(button);
    
25.         return this;
    
26.     }
    
27. }

复制代码

王一之

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

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

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

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

1. CAT_UI.create({
   
2.     render() {
   
3.         return CAT_UI
   
4.             .Text("脚本猫的UI框架")
   
5.             .Button("我是按钮", () => {
   
6.                 alert("我被点击了。");
   
7.             })
   
8.             .Space(
   
9.                 CAT_UI
   
10.                     .Text("第二层")
    
11.                     .Button("按钮")
    
12.             );
    
13.     }
    
14. });

复制代码

cxxjackie

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

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

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