dmq / mvvm Goto Github PK

watcher.js:50 Uncaught TypeError: Cannot read property 'call' of undefined
    at Watcher.get (http://localhost:63342/mvvm/js/watcher.js:50:32)
    at Watcher (http://localhost:63342/mvvm/js/watcher.js:13:23)
    at Object.bind (http://localhost:63342/mvvm/js/compile.js:128:9)
    at Object.text (http://localhost:63342/mvvm/js/compile.js:96:14)
    at Compile.compileText (http://localhost:63342/mvvm/js/compile.js:73:21)
    at http://localhost:63342/mvvm/js/compile.js:41:20
    at Array.forEach (native)
    at Compile.compileElement (http://localhost:63342/mvvm/js/compile.js:33:35)
    at Compile.init (http://localhost:63342/mvvm/js/compile.js:26:14)
    at Compile (http://localhost:63342/mvvm/js/compile.js:7:14)

observer.js
 get: function () {
         KeyDep.current_watcher && keydep.addSub(KeyDep.current_watcher)
         return val;
 },

watcher.js
function Watcher(vm,attr_val,cb){ 
    this.vm = vm;
    this.attr_val = attr_val;
    this.cb = cb;
    this.value = this.get(this) //触发get 把 自己（订阅者）添加到 相应的订阅器中
}
Watcher.prototype = {
    contructor: Watcher,
    update(){
        var newValue = this.get(null); //再次触发get 不再往 相应的订阅器中 添加自己（订阅者）
        var oldValue = this.value;
        if(newValue !== oldValue){ 
            this.value = newValue;
            this.cb.call(this.vm,newValue,oldValue)
        }
    },
    get(_this){
        KeyDep.current_watcher = _this;
        var value = compileUtil._getVMVal(this.vm,this.attr_val);
        KeyDep.current_watcher = null;
        return value
    }
}

function Watcher(vm, exp, cb) {
    this.cb = cb;
    this.vm = vm;
    this.exp = exp;
    // 此处为了触发属性的getter，从而在dep添加自己，结合Observer更易理解
    this.value = this.get(); 
}
Watcher.prototype = {
    update: function() {
        this.run();	// 属性值变化收到通知
    },
    run: function() {
        var value = this.get(); // 取到最新值
        var oldVal = this.value;
        if (value !== oldVal) {
            this.value = value;
            this.cb.call(this.vm, value, oldVal); // 执行Compile中绑定的回调，更新视图
        }
    },
    get: function() {
        Dep.target = this;	// 将当前订阅者指向自己
        var value = this.vm[exp];	// 触发getter，添加自己到属性订阅器中
        Dep.target = null;	// 添加完毕，重置
        return value;
    }
};

function Watcher(vm, exp, cb) {
    Dep.target = this;	// 将当前订阅者指向自己
    this.cb = cb;
    this.vm = vm;
    this.exp = exp;
    // 此处为了触发属性的getter，从而在dep添加自己，结合Observer更易理解
    this.value = this.get(); 
    Dep.target = null;	// 添加完毕，重置
}
Watcher.prototype = {
    update: function() {
        this.run();	// 属性值变化收到通知
    },
    run: function() {
        var value = this.get(); // 取到最新值
        var oldVal = this.value;
        if (value !== oldVal) {
            this.value = value;
            this.cb.call(this.vm, value, oldVal); // 执行Compile中绑定的回调，更新视图
        }
    },
    get: function() {
        var value = this.vm[exp];	// 触发getter，添加自己到属性订阅器中
        return value;
    }
};

<script>

		new MVVM({
			el: '#todoist_app',
			data: {
				input_due_date: '00月00日'
			},
			methods: {
				
			}
		})
document.body.appendChild('<div>{{input_due_date}}</div>')

</script>

function Dep() {
       .....
}

Dep.prototype = {
    ......
}

let dep = new Dep();
console.log(dep.constructor)   //Object

Observer.prototype.walk = function walk (obj) {
    var keys = Object.keys(obj);
    for (var i = 0; i < keys.length; i++) {
        defineReactive(obj, keys[i]);
    }
};

function Compile(el, vm) {
    this.$vm = vm;
    this.$el = this.isElementNode(el) ? el : document.querySelector(el);

    if (this.$el) {
        this.$fragment = this.node2Fragment(this.$el);
        // 上面的代码添加了一个this.$el 的文档碎片，
        this.init();
        this.$el.appendChild(this.$fragment);
        // 这里把文档碎片添加到了父元素上， 为什么父元素不会出现两个一样的子节点呀?
       // 因为 this.$el 本来就有一些子节点， 后面有添加了一份 文档碎片节点， 这里感觉很疑惑，希望你帮忙解答一下，谢谢~
    }
}