大家好，又见面了，我是你们的朋友全栈君。
模仿vue的mvvm实现方式，实现数据渲、改变data以及v-model
源码地址
script src="Tvue.js"></script>
<body>
<div id="app">
{
{message}}
<p>{
{message}}</p>
</div>
</body>
<script>
let vm = new Tvue({
el: "#app",
data: {
message: '测试'
}
})
</script>
复制代码先实现数据替换功能
class Tvue {
constructor(options) { // new Tvue里的值
this.$options = options
this._data = options.data // 参考源码，避免与data重名
this.compile(options.el) // 查找替换
}
compile(el) {
// 作用域 范围内查找
let element = document.querySelector(el) // 获取<div id="app"></div>
let childNodes = element.childNodes // 获取子节点
Array.from(childNodes).forEach((node) => {
// console.log(node, 'nodeType 属性可用来区分不同类型的节点，比如 元素, 文本 和 注释。')
if (node.nodeType === 3) {
// 文本替换
let nodeContent = node.textContent
let reg = /\{\{\s*(\S*)\s*\}\}/ // 考虑插值表达式的前后空格
if (reg.test(nodeContent)) {
node.textContent = this._data[RegExp.$1]
}
} else {
}
})
}
}
复制代码打开浏览器mvvm模式已经实现，有个问题是
{
{message}}
还没有被替换，还需要使用递归实现多层嵌套查找替换
compileNode(element) { // 递归实现多层嵌套查找替换
let childNodes = element.childNodes // 获取子节点
Array.from(childNodes).forEach((node) => {
// console.log(node, 'nodeType 属性可用来区分不同类型的节点，比如 元素, 文本 和 注释。')
if (node.nodeType === 3) {
// 文本替换
let nodeContent = node.textContent
let reg = /\{\{\s*(\S*)\s*\}\}/ // 考虑插值表达式的前后空格
if (reg.test(nodeContent)) {
node.textContent = this._data[RegExp.$1]
}
} else if (node.nodeType === 1) { // 处理标签
}
if (node.childNodes.length > 0) {
this.compileNode(node)
}
})
}
复制代码OK,截止目前可以实现多层数据嵌套
接下来实现v-model
let attrs = node.attributes;
Array.from(attrs).forEach(attr => {
let attrName = attr.name;
let attrValue = attr.value;
if (attrName.indexOf("t-") == 0) {
attrName = attrName.substr(2);
if (attrName == "model") {
node.value = this._data[attrValue];
}
node.addEventListener("input", e => {
this._data[attrValue] = e.target.value;
})
new Watcher(this, attrValue, newValue => {
node.value = newValue;
});
}
})
复制代码 下一篇
实现简约不简单的vuex
转载于:https://juejin.im/post/5cf79260518825399965a582
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/106783.html原文链接：https://javaforall.net
