分享一个我自己写的响应式工具库

项目上已经用了很久,使用体验来说只能说很爽,多人协作也是完全没问题。

Singals 完美符合数据驱动编程理念,Singals 我认为时 MVVM 的完全的上位替代,抛弃了繁杂的数据绑定,更关注逻辑编写本身,对于不太注重编码质量的新手,也能很好的引导其写出优雅的代码。

Singals 最为优雅的是可以完美的函数式编程,它可以在一个函数内自驱动,响应事件,绑定,解除绑定,不需要额外的参数就能一次完成

并且可以很轻松的和任何工具兼容

function useLogClickCount(node) {
    let count = 0;
    function fn() {
        console.log("click count", count++)
    }
    node.on("TOUCH-END",fn);
    onCleanup(() => {
        node.off("TOUCH-END",fn);
    })
    
}

github
gitee

3赞

将数据用Signals包裹起来,只要像正常写逻辑一样就具备完备的响应能力,没有任何的中间环节。

这里提供一些集成的思路,并没有固定式,Signals是一个嵌入式工具,可以轻度使用,也可以深度使用,当然集成程度越高,用起来也越爽,但是轻度集成也是完全没有问题的。

简单的集成


function useEditString(edit: EditBox) {
    const value = createSignal(edit.string);

    function fn() {
        value.set(edit.string);
    }

    edit.node.on("text-changed", fn);

    onCleanup(() => {
        edit.node.off("text-changed", fn)
    })

    return value;
}



@cccclass()
export class BaseView extends Component {
    lb: Label;
    edit: EditBox;

    root;

    onEnable() {
       root = createRoot();
       tracked(root, this.run.bind(this));
    }

    onDisable() {
       root.dispose();
    }


    run() {
        const editString = useEditString(this.edit);
        
        createWatch(() => {
            this.lb.string = editString()
        })
    }
}

不仅限于 Component ,任何满足这个结构的都是没问题的。

Manager 中保存响应式变量

class Manager {
    props: Map<number, Signal> = new Map();

    GetPropValue(key) {
        let s = props.get(key);
        // 这里一定要创建一个空的对象用于捕捉,Watch不可能捕捉一个不存在的变化
        if (!s) {
            props.set(resp.key, s = createSignal(defaultValue));
        }
        return s();
    }

    SetPropValue(key, value) {
        let s = props.get(key);
        if (!s) {
            props.set(key, s = createSignal(value));
        }
        else {
            s.set(value);
        }
    }
}

但是有一点注意的是Signals 更推荐带有副作用的Watch只创建一遍,不推荐频繁的创建,如战斗内如果每个实体创建的太频繁,比如塔防,会有GC的问题,就不推荐使用signals了

汗颜,github都打不开,为啥不搞一份上gitee?毕竟你这用户主要还是面向国人

不爱用gitee,但我可以弄一个gitee同步镜像

添加了一个新的gitee链接

国内没有墙的话,gitee早死了。github苦于上不了而已。

甚至可以很轻松做一些很麻烦的系统,如红点

function usePrefab(url, callback) {
    const root = getActiveConsumer();
    let closed = false;
    let node;
    onCleanup(() => {
        closed = true;
        if (node) {
            node.destroy();
        }
    })
    assetManager.load(url, Prefab, function(prefab) {
         if (closed) return;
         callback(node = instantiate(prefab));
    })
}

function useRedPoint(parent, condition) {
    const conditionComputed = createComputed(condition);
    const redPointNode = usePrefab("prefabUrl", (node) => {
        node.parent = parent;
        createWatch(() => {
            node.active = Boolean(conditionComputed());
        })
    });

}

墙个鬼,google那才叫墙,github又不是一直打不开,多刷新几次是能打开的,很多人翻墙访问github并不是被墙,而是需要进行网络加速。

可以下载个加速器 https://steampp.net/
github还是很好的

哦对,我的意思就是慢,出口太小。
steampp加速偶尔就姨妈,裸连 提交个代码10次有8次失败,还要等3-5分钟,谁能忍?

响应式,类似于mobx?

一种更自由的响应式工具,类似vue的组合式api

:rofl:别的行业用不用翻墙一回事,但是作为程序员还是有必要翻墙的吧。