console 命令行工具 X clear

console

function observe(data,cb){
    Object.keys(data).forEach(key=>{
        defineReactive(data,key,data[key],cb)
        
    })
 
}
function defineReactive (obj, key, val, cb) {
    console.log(key)
    const dep = new Dep();
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: ()=>{
            if (Dep.target) {
                /*Watcher对象存在全局的Dep.target中*/
                dep.addSub(Dep.target);
            }
            return val
        },
        set:newVal=> {
            val = newVal;
            dep.notify();
        }
    })
}
function _proxy(context,data){
    Object.keys(data).forEach(key=>{
        Object.defineProperty(context, key, {
            get: ()=>{
                return data[key]
            },
            set:newVal=> {
                data[key] = newVal;
            }
        })  
    })
}
class Watcher {
    constructor (vm, expOrFn, cb, options) {
        this.cb = cb;
        this.vm = vm;

        /*在这里将观察者本身赋值给全局的target，只有被target标记过的才会进行依赖收集*/
        Dep.target = this;
        /*Github:https://github.com/answershuto*/
        /*触发渲染操作进行依赖收集*/
        this.cb.call(this.vm);
    }

    update () {
        this.cb.call(this.vm);
    }
}
class Dep {
    constructor () {
        this.subs = [];
    }

    addSub (sub) {
        this.subs.push(sub)
    }

    removeSub (sub) {
        remove(this.subs, sub)
    }
    /*Github:https://github.com/answershuto*/
    notify () {
        // stabilize the subscriber list first
        const subs = this.subs.slice()
        for (let i = 0, l = subs.length; i < l; i++) {
            subs[i].update()
        }
    }
}
function remove (arr, item) {
    if (arr.length) {
        const index = arr.indexOf(item)
        if (index > -1) {
            return arr.splice(index, 1)
        }
    }
}
class Vue {
    constructor(options) {
        this._data = options.data;
        observe(this._data, options.render)
        _proxy(this,this._data)
        let watcher = new Watcher(this,null,options.render,null );
    }
}
let app = new Vue({
    el: '#app',
    data: {
        text: 'text',
        text2: 'text2'
    },
    render(){
        console.log("render");
    }
})
app.text
app.text2 = '1'

<!DOCTYPE html>
<html>
	<head>
		<meta charset=utf-8>
		<title>My first three.js app</title>

	</head>
	<body>
        <div id="app"></div>
	</body>
</html>

本项目引用的自定义外部资源

three.js