watch

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

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

install

链接下载

Usage

引入watch库

importWatchfrom'../../libs/watch';

配置初始化检察对象

importWatchfrom'../../libs/watch';letwatch;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=newWatch(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