【watch】提供小程序响应data实例上的数据变动

小程序不提供类似于vue一样监听数据(vm.watch)，当数据改变时触发回调检测改变数据类型是否符合要求。

现在，使用wach即可扩展类似vm.watch的功能
源码链接

install

链接下载

Usage

引入watch库

import Watch from '../../libs/watch';

配置初始化检察对象

import Watch from '../../libs/watch';
let watch;
Page({
    data: {
        a: '1',
        b: {
            c: {
                d: 33
            },
            e: [1, 2, [3, 4]]
        }
    },
    watch: {
        a: function(val, oldVal) {
            console.log('new: %s, old: %s', val, oldVal);
        },
        'b.c.d': function(val, oldVal) {
            console.log('new: %s, old: %s', val, oldVal);
        },
        'b.e[2][0]': function(val, oldVal) {
            console.log('new: %s, old: %s', val, oldVal);
        },
        'b.e[3][4]': function(val, oldVal) {
            console.log('new: %s, old: %s', val, oldVal);
        },
    }
})

可以将需要监听的数据放入watch里面，当数据改变时推送相应的订阅事件(注：不在data里面的数据项不会放入观察者列表，比如上面的'b.e[3][4]')

实例化watch

watch = new Watch(this);

当watch创建示例初始化时会把监听数据项放入观察者列表里面

改变数据

watch.setData({
    a: 2,
    'b.c.d': 3,
    'b.e[2][0]': 444,
    c: 123
})

watch.data('b.e[2][0]', 555);

API

watch.setData(obj)

等价于原生小程序this.setData，会改变数据并更新视图，也会触发回调（假如有配置）

示例：

watch.setData({
    a: 2,
    'b.c.d': 3,
    'b.e[2][0]': 444,
    c: 123
})
//等价于
// this.setData({
//     a: 2,
//     'b.c.d': 3,
//     'b.e[2][0]': 444,
//     c: 123
// })

watch.data(key, val)

等价于原生小程序this.data.a = 3，之后改变数据不更新视图，也会触发回调（假如有配置）

示例：

watch.data('b.e[2][0]', 555);
//等价于this.b.e[2][0] = 555

watch.getter(data, path)

能根据提供的路径深度获取数据

示例：

watch.get({
        a: '1',
        b: {
            c: {
                d: 33
            },
            e: [1, 2, [3, 4]]
        }
    }, 'b.e[2][0]');
 //3

watch.unSubscribe(key)

删除观察者，改变数据不触发回调

示例：

watch.unSubscribe('b.e[2][0]');

test

npm test

demo

git clone https://github.com/jayZOU/watch.git
打开小程序开发工具，新建项目，定位目录到watch/src