【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