day99-双向绑定-Compile

前言

在之前的讨论中,漏掉了解析模板指令模块Compile。这里摘抄一个作者实现的案例。另外,上一篇也有大量参考该作者该案例,说明下。该作者文章详情


代码

单独看的话有点难理解啊。

Compile.prototype = {
// ... 省略
compileElement: function(el) {
let childNodes = el.childNodes, me = this;
// 遍历所有节点及其子节点
[].slice.call(childNodes).forEach(function(node) {
let text = node.textContent // 表达式文本
let reg = /\{\{(.*)\}\}/ // 文本正则
// 按元素节点方式编译,这里要区分Text?
if (me.isElementNode(node)) {
me.compile(node)
} else if (me.isTextNode(node) && reg.test(text)) {
me.compileText(node, RegExp.$1)
}
// 遍历编译子节点(递归)
if (node.childNodes && node.childNodes.length) {
me.compileElement(node)
}
})
},
// 这里有点不好理解
compile: function(node) {
let nodeAttrs = node.attributes, me = this;
[].slice.call(nodeAttrs).forEach(function(attr) {
// 规定:指令以 v-xxx 命名
// 如 <span v-text="content"></span> 中指令为 v-text
let attrName = attr.name // v-text
if (me.isDirective(attrName)) {
let exp = attr.value // content
let dir = attrName.substring(2) // text
if (me.isEventDirective(dir)) {
// 事件指令, 如 v-on:click
compileUtil.eventHandler(node, me.$vm, exp, dir)
} else {
// 普通指令
compileUtil[dir] && compileUtil[dir](node, me.$vm, exp)
}
}
})
}
}
// 指令处理集合
let compileUtil = {
text: function(node, vm, exp) {
this.bind(node, vm, exp, 'text')
},
// ...省略
bind: function(node, vm, exp, dir) {
let updaterFn = updater[dir + 'Updater']
// 第一次初始化视图
updaterFn && updaterFn(node, vm[exp])
// 实例化订阅者,此操作会在对应的属性消息订阅器中添加了该订阅者watcher
new Watcher(vm, exp, function(value, oldValue) {
// 一旦属性值有变化,会收到通知执行此更新函数,更新视图
updaterFn && updaterFn(node, value, oldValue)
})
}
}
// 更新函数,调用对应的指令更新函数进行绑定
let updater = {
textUpdater: function(node, value) {
node.textContent = typeof value == 'undefined' ? '' : value
}
// ...省略
}

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