class Vue {
constructor(options) {
console.log(options)
this.data = options.data
console.log(this.data)
console.log(this)
this.template = options.template
this.el = options.el
this.observe(this.data)
this.compile(this.el,this.template,this.data)
this.parseHtml(this.template)
}
observe(obj) {
if (obj instanceof Object) {
Object.keys(obj).map(res => {
this.define(obj, res, obj[res])
})
} else {
return obj
}
}
define(obj, key, value) {
if (value instanceof Object) {
this.observe(value)
}
Object.defineProperty(obj, key, {
set: function (val) {
if (value === val) return
obj[key] === val
console.log('set', key)
},
get: function () {
console.log('get', value)
return value
}
})
}
parseHtml (template) {
var str = template;
var pattern = /<(?:[^"'>]|"[^"]*"|'[^']*')*>/g;
console.log(str.match(pattern))
// 认怂了 ast标签节点语法树
}
compile (el,template,data) {
var textReg = /\{\{((?:.|\n)+?)\}\}/g
var text = template.match(textReg)
var arr = []
var actuality = []
text.map((res,index) => {
let result = res.match(/[(a-zA-Z) || (a-zA-Z.a-zA-Z)]+/g)[0]
arr[index] = result
// console.log(res)
if (res === `{{${result}}}`) {
template = template.replace(/\{\{((?:.|\n)+?)\}\}/,data[result])
}
})
console.log(arr)
const dom = document.getElementById(el.split('#')[1])
const html = document.createDocumentFragment()
const div = document.createElement('div')
div.innerHTML = template
dom.appendChild(div)
dom.appendChild(html)
}
}
let obj = {
a: 'hello',
b: 'worldqw',
c: {
q: 12,
e: 1,
b: 1
},
val: '默认'
}
new Vue({
data: obj,
el: '#app',
template: `123{{a}}{{b}}{{val}}<input type="text" value='1'/>`
})
