Skip to content

Latest commit

 

History

History
127 lines (110 loc) · 3.13 KB

README.md

File metadata and controls

127 lines (110 loc) · 3.13 KB

watch

Build Status

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

现在,使用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