<script type="module">
		import { Vue } from "./vue.js "
		let vm = new Vue({
			el: document.querySelector('#app'),
			data: {
				message: "Hello,luyu",
				num: "33"
			},
			methods: {
				increase() {
					this.num++;
				},
			}
		})
	</script>
	<div id="app">
		<h1>{{message}}</h1>
		<h2>{{num}}</h2>
		<input type="text" v-model="message">
		<input type="text" v-model="num">
		<button v-on:click="increase">【+】</button>
	</div>

export function Vue(options = {}) {
	this._init(options)
}
Vue.prototype._init = function (options) {
	this.$options = options;
	//假設(shè)這里就是一個(gè)el，已經(jīng)querySelector
	this.$el = options.el;
	this.$data = options.data;
	this.$methods = options.methods;
	// beforeCreate--initState--initData
	proxy(this, this.$data)
	//observer()
	observer(this.$data)//對data監(jiān)聽，對data中數(shù)據(jù)變成響應(yīng)式
	new Compiler(this);
}

// 把this.$data 代理到 this
function proxy(target, data) {
	Object.keys(data).forEach(key => {
		Object.defineProperty(target, key, {
			enumerable: true,
			configurable: true,
			get() {
				return data[key]
			},
			set(newValue) {
				//需要考慮NaN的情況,故需要修改以下代碼
				// if (data[key] !== newValue) data[key] = newValue
				if (!isSameVal(data[key], newValue)) data[key] = newValue;
			},
		})
	})
}
function isSameVal (val,newVal){
   //如果新值=舊值或者新值、舊值有一個(gè)為NaN，則不繼續(xù)執(zhí)行
   return val === newVal || (Number.isNaN(val)) && (Number.isNaN(newVal))
}

function observer(data) {
	new Observer(data)
}
// 對data監(jiān)聽，把數(shù)據(jù)變成響應(yīng)式
class Observer {
	constructor(data) {
		this.walk(data)
	}
	//批量對數(shù)據(jù)進(jìn)行監(jiān)聽
	walk(data) {
		if (data && typeof data === 'object') {
			Object.keys(data).forEach(key => this.defineReactive(data, key, data[key]))
		}
	}
	//把每一個(gè)data里面的數(shù)據(jù)收集起來
	defineReactive(obj, key, value) {
		let that = this;
		this.walk(value);//遞歸
		
		let dep = new Dep();

		Object.defineProperty(obj, key, {
			configurable: true,
			enumerable: true,
			get() {
				// 4一旦獲取數(shù)據(jù)，把watcher收集起來，給每一個(gè)數(shù)據(jù)加一個(gè)依賴的收集
				//5num中的dep，就有了這個(gè)watcher
				console.log(Dep.target, 'Dep.target')
				Dep.target && dep.add(Dep.target)
				return value
			},
			set(newValue) {
				if (!isSameVal(value, newValue)) {
					value = newValue;
					//添加的新值也不是響應(yīng)式的,所以需要調(diào)用walk 
					that.walk(newValue);
					//有了watcher之后，修改時(shí)就可以調(diào)用update方法 
					//6 重新set時(shí)就通知更新
					dep.notify()
				}
			}
		})
	}
}

// watcher和dep的組合就是發(fā)布訂閱者模式
// 視圖更新
// 數(shù)據(jù)改變，視圖才會更新，需要去觀察
// 1 new Watcher(vm, 'num', () => { 更新視圖上的num顯示 })
class Watcher {
	constructor(vm, key, cb) {
		this.vm = vm;
		this.key = key;
		this.cb = cb;//試圖更新的函數(shù)

		Dep.target = this;//2.全局變量，放的就是Watcher自己
		//
		console.log(vm[key], 'vm[key]')
		this.__old = vm[key];//3.一旦進(jìn)行了這句賦值。就會觸發(fā)這個(gè)值得getter，會執(zhí)行Observer中的get方法
		Dep.target = null;
	}
	//執(zhí)行所有的cb函數(shù)
	update() {
		let newVal = this.vm[this.key];
		if (!isSameVal(newVal, this.__old)) this.cb(newVal)
	}
}

// 每一個(gè)數(shù)據(jù)都要有一個(gè) dep 的依賴
class Dep {
	constructor() {
		this.watchers = new Set();
	}
	add(watcher) { 
		console.log(watcher, 'watcher')
		if (watcher && watcher.update) this.watchers.add(watcher)
	}
	//7讓所有的watcher執(zhí)行update方法
	notify() {
		console.log('333333')
		console.log(this.watchers, 'watchers')
		this.watchers.forEach(watc => watc.update())
	}
}

class Compiler {
	constructor(vm) {
		this.el = vm.$el;
		this.vm = vm;
		this.methods = vm.$methods;
		// console.log(vm.$methods, 'vm.$methods')
		this.compile(vm.$el)
	}
	compile(el) {
		let childNodes = el.childNodes;
		//childNodes為類數(shù)組
		Array.from(childNodes).forEach(node => {
			if (node.nodeType === 3) {
				this.compileText(node)
			} else if (node.nodeType === 1) {
				this.compileElement(node)
			}
			//遞歸 
			if (node.childNodes && node.childNodes.length) this.compile(node)
		})
	}
	//文本節(jié)點(diǎn)處理
	compileText(node) {
		//匹配出來 {{massage}}
		let reg = /\{\{(.+?)\}\}/;
		let value = node.textContent;
		if (reg.test(value)) {
			let key = RegExp.$1.trim()
			// 開始時(shí)賦值
			node.textContent = value.replace(reg, this.vm[key]);
			//添加觀察者
			new Watcher(this.vm, key, val => {
				//數(shù)據(jù)改變時(shí)的更新
				node.textContent = val;
			})
		}
	}
	//元素節(jié)點(diǎn)
	compileElement(node) {
		//簡化，只做v-on，v-model的匹配
		if (node.attributes.length) {
			Array.from(node.attributes).forEach(attr => {
				let attrName = attr.name;
				if (attrName.startsWith('v-')) {
					//v-指令匹配成功可能是是v-on，v-model
					attrName = attrName.indexOf(':') > -1 ? attrName.substr(5) : attrName.substr(2)
					let key = attr.value;
					this.update(node, key, attrName, this.vm[key])
				}
			})
		}
	}
	update(node, key, attrName, value) {
		console.log('更新')
		if (attrName == "model") {
			node.value = value;
			new Watcher(this.vm, key, val => node.value = val);
			node.addEventListener('input', () => {
				this.vm[key] = node.value;
			})
		} else if (attrName == 'click') {
			// console.log(this.methods,'key')
			node.addEventListener(attrName, this.methods[key].bind(this.vm))
		}
	}
}

    //以下面代碼為例
	<input type="text" v-model="num">

let  reg=/jpg|jpg|jpeg/gi
let str='jpg'
if(reg.test(str)){
      // true
}
if(reg.test(str)){
      // false
}
if(reg.test(str)){
      // true
}
if(reg.test(str)){
      // false
}

(/jpg|jpg|jpeg/gi).test(str)  // true
(/jpg|jpg|jpeg/gi).test(str)  // true
(/jpg|jpg|jpeg/gi).test(str)  // true

var str = "Hello world, welcome to the Runoob.";
var n = str.startsWith("Hello");//true