day191-MyVue-完成

要点

  1. 完善Compilerjs
  2. 运行

    Complier

import Watcher from "./Watcher";

const REG = /\{\{(.*)\}\}/
class Complier {
constructor(el, vm) {
this.el = document.querySelector(el) // 高效的原生DOM选择器,用着方便(比getElementsBy系列)
this.vm = vm
this.frag = this._createFragment()
this.el.appendChild(this.frag) // 整个element添加到这里,最后会清空
}
_createFragment () {
var frag = document.createDocumentFragment() // 文档碎片节点,比createElement多次添加到document.body效率高
var child
while(child = this.el.firstChild) {
this._compile(child) // 接收每个node的子节点
frag.appendChild(child) // 编译完之后,添加到碎片;appendChild做移动步骤;
}
return frag
}
_compile(node) {
console.log(node)
if (node.nodeType === 1) { // 元素
// 最后,完成双向绑定
var attr = node.attributes
if (attr.hasOwnProperty('v-model')) {
var propValue = attr['v-model'].nodeValue
var self = this
node.addEventListener('input', function (e) {
self.vm[propValue] = e.target.value // 用了set,每次调用,添加了Watcher了的地方会做相应处理
})
node.value = this.vm[propValue]
}
}
if (node.nodeType === 3) { // 文本节点
// 通过Observer中notify(),通知get。watcher中会update()
if (REG.test(node.nodeValue)) {
var name = RegExp.$1 // 拿到第一个大括号里的
name = name.trim() // 得到属性名字
new Watcher(node, name, this.vm) // 观察得到的值
}
}
}
}

export default Complier

运行

安装webpack

全局

npm i -g webpack webpack-cli

局部

npm i -D webpack webpack-cli

打包

webpack main.js –output bundle.js

热编译

webpack main.js –output bundle.js –watch

文章作者: lmislm
文章链接: http://lmislm.com/2019/07/23/2019-07-23/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LMISLMのBlog