jayzou/watch

提供小程序一种更通用的方式来观察和响应data实例上的数据变动

watch

小程序不提供类似于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

watch's Issues

再提一个小小的建议

当变量初始为空时，watch.setData 再次设置为空又会触发watch回调

有个bug

在watch里面监听的那个变量，无法setData自身

watch.setData 监听不到多层数据的oldVal

--当前的表现
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);
}
写了一个按钮，用watch.setData来改变a 和 b.c.d的值，发现可以监听到a的当前值和以前的值，b.c.d监听到两个值都是当前值。

关于new Watch(this)的问题

请问一下，这个是直接把watch.js文件copy下来放在项目中，在页面中import进来，实例化是哪里进行的？

不错！

若是进一步抽象成middleware机制是否会给developer更广的使用场景？

比如：

this.use((preVal, nextVal) => {
  console.log(`oldValue: ${preVal}, newValue: ${nextVal}`)
  return Object.assign(nextState, {adding: 'more'}) // setData with new value after all middlewares
})

如何从release version中移除这些用于debug场景的代码？