Skip to content

windyuuy/data-observer

Repository files navigation

本数据绑定库完全参考Vue,并对其进行大量简化。以满足当下需求。 不建议直接使用该库,应配合UI控件一起使用。 用法如下:

test("简单数值绑定", () => {
    class Host extends vm.Host {
        testString: string = "a"
        tstNumber: number = 1
    }

    var view = {
        testString: "",
        tstNumber: 0
    }

    var host = new Host()
    vm.observe(host)
    host.$watch("testString", (newVal, oldVal) => {
        view.testString = newVal;
    })
    host.$watch("tstNumber", (newVal, oldVal) => {
        view.tstNumber = newVal;
    })

    host.testString = "哈哈哈"
    vm.Tick.next();
    expect(view.testString).toEqual("哈哈哈")
})

test("深层数据绑定", () => {
    class Host extends vm.Host {
        a = {
            testString: "a",
            tstNumber: 1,
            subObj: {
                testString: "a",
                tstNumber: 1,
            }
        }
    }

    var view = {
        testString: "",
        tstNumber: 0,
        subTestString: "",
        subTstNumber: 0,
        computValue: 0
    }

    var host = new Host()
    vm.observe(host)
    host.$watch("a.testString", (newVal, oldVal) => {
        view.testString = newVal;
    })
    host.$watch("a.tstNumber", (newVal, oldVal) => {
        view.tstNumber = newVal;
    })
    host.$watch("a.subObj.testString", (newVal, oldVal) => {
        view.subTestString = newVal;
    })
    host.$watch("a.subObj.tstNumber", (newVal, oldVal) => {
        view.subTstNumber = newVal;
    })

    var w = host.$watch((host: Host) => {
        return host.a.tstNumber + host.a.subObj.tstNumber
    }, (newVal, oldVal) => {
        view.computValue = newVal;
    })
    view.computValue = w?.value;
    expect(view.computValue).toEqual(2)


    host.a.testString = "哈哈哈"
    vm.Tick.next();
    expect(view.testString).toEqual("哈哈哈")

    host.a.tstNumber = 13
    vm.Tick.next();
    expect(view.tstNumber).toEqual(13)
    expect(view.computValue).toEqual(14)

    host.a.subObj.testString = "哈哈哈2"
    vm.Tick.next();
    expect(view.subTestString).toEqual("哈哈哈2")

    host.a.subObj.tstNumber = 333
    vm.Tick.next();
    expect(view.subTstNumber).toEqual(333)

    host.a.subObj = {
        testString: "测试对象",
        tstNumber: 666,
    }
    vm.Tick.next();
    expect(view.subTestString).toEqual("测试对象")
    expect(view.subTstNumber).toEqual(666)


    host.a = {
        testString: "测试1",
        tstNumber: 3,
        subObj: {
            testString: "测试2",
            tstNumber: 4,
        }
    }
    vm.Tick.next();
    expect(view.testString).toEqual("测试1")
    expect(view.tstNumber).toEqual(3)
    expect(view.subTestString).toEqual("测试2")
    expect(view.subTstNumber).toEqual(4)

})


test("深层数组", () => {
    class Host extends vm.Host {
        list: string[] = []
    }

    var view = {
        length: 0,
        list0: null,
        list1: null,
        list2: null
    }

    var host = new Host()
    vm.observe(host)
    host.$watch("list", (newVal, oldVal) => {
        view.length = newVal.length;
        view.list0 = newVal[0];
        view.list1 = newVal[1];
        view.list2 = newVal[2];
    })

    host.list.push("对象1")
    vm.Tick.next();
    expect(view.length).toEqual(1)
    expect(view.list0).toEqual("对象1")

    host.list.push("对象2")
    vm.Tick.next();
    expect(view.length).toEqual(2)
    expect(view.list1).toEqual("对象2")

    host.list.push("对象3")
    vm.Tick.next();
    expect(view.length).toEqual(3)
    expect(view.list2).toEqual("对象3")

    host.list.push("对象4")
    vm.Tick.next();
    expect(view.length).toEqual(4)


    vm.set(host.list, 1, "修改对象2");
    vm.Tick.next();
    expect(view.list1).toEqual("修改对象2")

    vm.del(host.list, 2);
    vm.Tick.next();
    expect(view.list1).toEqual("修改对象2")


})

test("watch注解", () => {

    var view = {
        testString: "",
        testNum: 0,
        testNum2: 0,
        newValue: ""
    }

    @vm.host
    class TestHost extends vm.Host {
        a = {
            testString: "a",
            tstNumber: 1,
            subObj: {
                tstNumber: 1,
            }
        }

        @vm.watch("a.testString")
        onTestStringChange(newVal: string, oldVal: string) {
            view.testString = newVal;
        }

        @vm.watch((host: TestHost) => host.a.tstNumber + host.a.subObj.tstNumber)
        onTestNumberChange(newVal: number, oldVal: number) {
            view.testNum = newVal
        }

        @vm.watch("a.tstNumber + a.subObj.tstNumber")
        onTestNumber2Change(newVal: number, oldVal: number) {
            view.testNum2 = newVal
        }


        get newTestString() {
            return this.a.testString + "666"
        }

        @vm.watch("newTestString")
        onNewStringChange(newVal: string, oldVal: string) {
            view.newValue = newVal;
        }

    }

    var h = new TestHost();

    h.a.tstNumber = 12
    h.a.testString = "哈哈哈"

    vm.Tick.next();

    expect(view.testString).toBe("哈哈哈")
    expect(view.testNum).toBe(13)
    expect(view.testNum2).toBe(13)
    expect(view.newValue).toBe("哈哈哈666")

})

About

data-observer

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published