简单讲讲mobx的observable和autoRun

今天想简单聊聊mobx的observable和autoRun函数。不了解es6的proxy和reflect的伙伴，需要先看看这方面的知识点。

1、observable
observable的作用是使一个普通的对象，变得可观察。也就是说当一个对象变得可观察了之后，当你改变对象里的一个值的时候，就会去触发对应的有这个引用的autoRun函数。
下面来看看observable的简单实现，这里不考虑对象的嵌套。就假设它只有一层。方便理解概念。

var globalID = 0
function observable(obj) {
    var oID = ++globalID
    return new Proxy(obj, {
        get: function (target, key, receiver) {
            collect.startCollect(oID + '' +key)
            return Reflect.get(target, key, receiver)
        },
        set: function (target, key, value, receiver) {
            Reflect.set(target, key, value, receiver)
            collection[oID + '' + key] && collection[oID + '' + key].forEach(c => {
                c()
            });
        }
    })
}

observable的解释在此：引用阮一峰的es6教程里的话
Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。
这里用Proxy是因为当你在可观察对象上加入新的属性时，就不会像Object.defineProperty那样新的属性没法监听了。

像上面代码那样，咱们就成功的拦截了一个对象的getter和setter了。
每次当你obj.a或者obj.b的时候都会进入get方法。咱们在返回obj.a，之前都会去收集依赖。至于到底要不要收集依赖，我这里是由collect.startCollect去判断的。
每当你obj.a = 'balabala'的时候，咱们也拦截了set方法。在写入值的之后，就要搞事情了，偷偷地去把收集来的依赖相应的依赖，给全部执行一遍（如果确实有的话）。

2、autoRun
一旦任何值发生了修改，就去执行传入autoRun的方法。

function autorun(handler) {
    collect.begin(handler)
    handler()
    collect.end()
}

有点简单粗暴，是不是。开始收集依赖了，我先发个信号。然后把autoRun里的handler给执行一遍。最后，打声招呼：小朋友你已经兑过奖了，回家吧。执行collect.end()。

3、collect
看了上面两个，心里在想那个collect到底是个什么鬼？

var collection = {}
var collect = {
    begin: function(handler) {
        collection.handler = handler
        collection.now = true
    },
    startCollect: function(oIDKey) {
        if (collection.now) {
            if (collection[oIDKey]) {
                collection[oIDKey].push(collection.handler)
            } else {
                collection[oIDKey] = [collection.handler]
            }
        }
    },
    end: function() {
        collection.now = false
    }
}

这里的collection我也就写在全局了，简单粗暴。
在autoRun里，我们先begin，我把handler赋给了collection.handler，嗯简单粗暴。并且把collection.now设为true，表示需要收集依赖了。
然后执行handler()，就会到get里去执行collect.startCollect。
当startCollect的时候，开始干正经活了，先判断一下是不是now。前面我们劫持了getter，如果不判断collection.now，那么collect.startCollect(oID + '' +key)总是会执行。那就出大事情了。之后，咱们就可以放心的去收集handler了。
完事之后吧collection.now设为false。要不然你每每obj.a取值的时候都会反复的收集依赖。

好了，我想mobx的思路大概是这样的。这是我的理解，有心的同学帮我纠纠错，蟹蟹~

最后放上完整的本人的(cuo)dai照ma。

var globalID = 0
function observable(obj) {
    var oID = ++globalID
    return new Proxy(obj, {
        get: function (target, key, receiver) {
            collect.startCollect(oID + '' +key)
            return Reflect.get(target, key, receiver)
        },
        set: function (target, key, value, receiver) {
            Reflect.set(target, key, value, receiver)
            collection[oID + '' + key] && collection[oID + '' + key].forEach(c => {
                c()
            });
        }
    })
}
var collection = {}
var collect = {
    begin: function(handler) {
        collection.handler = handler
        collection.now = true
    },
    startCollect: function(oIDKey) {
        if (collection.now) {
            if (collection[oIDKey]) {
                collection[oIDKey].push(collection.handler)
            } else {
                collection[oIDKey] = [collection.handler]
            }
        }
    },
    end: function() {
        collection.now = false
    }
}

function autorun(handler) {
    collect.begin(handler)
    handler()
    collect.end()
}

var obj = observable({
    a: 1,
    b: 2
})

autorun(() => {
    console.log('obj.a test1', obj.a)
})
autorun(() => {
    console.log('obj.a test2', obj.a)
})