总结,第一步,确定到底有没有挂载点的模板给它编译
第二步,把模板编译一个一个的生成内存中的dom树
第三步,vm传过来的值指向data
第一步
拿到当前模板是第一步 这只是截图更形象的看到工程结构当前就两个文件,一个js一个html,后面会附代码
图片.png
图片.png
图片.png
代码
//body中即可
<div id="app">
<input v-model="school.name" type="text" />
<div>{{school.name}}</div>
<div>{{school.age}}</div>
<ul>
<li>1</li>
<li>1</li>
</ul>
</div>
<script src="MVVM.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
school:{
name:"imycode",
age:10
}
},
methods: {},
computed: {
},
});
//MVVM
//基础类
class Compiler {
constructor(el, vm) {
//判断el属性是不是一个元素,如果不是元素那就获取他
this.el = this.isElementNode(el) ? el : document.querySelector(el);
console.log(this.el);
}
isElementNode(node) {
//是不是元素节点
return node.nodeType === 1;
}
}
class Vue {
constructor(options) {
//this.$el $data $options
this.$el = options.el;
console.log("options.el: " + options.el);
this.$data = options.data;
console.log("options.data: " + options.data);
//这个元素存在编译模板
if (this.$el) {
new Compiler(this.$el, this);
}
}
}
第二步(把获取到的当前节点中的元素放到内存)
把当前模板进行编译Why?为什么要内存编译,追求性能,要做数据和dom双向绑定,如果不全部放到内存里,那么只有一个出路就是看到一个匹配一个这样的速度就慢了
图片.png
图片.png
对应代码
this.el = this.isElementNode(el) ? el : document.querySelector(el);
// console.log(this.el); //dom节点
let fragment = this.node2fragment(this.el);
}
//把节点移动到内存中
node2fragment(node) {
//把当前元素中的东西都拿到
//一个一个拿childnode儿子节点,都拿到
let fragment = document.createDocumentFragment();
//创建一个文档碎片
let firstChild;
while ((firstChild = node.firstChild)) {
//拿一个少一个不用担心死循环
//appendChild具有移动性
fragment.appendChild(firstChild);
}
return fragment;
}
//放到isElementNode判断是否是元素的上面
图片.png
☠注意
createDocumentFragment()
内存中就有所有节点了,当然在内存中操作好之后再渲染给文档
图片.png
图片.png
图片.png
☠注意==>重绘和回流
第一次拿的是文本类节点文本节点,拿完之后代码会被压缩,第二次就拿的是input
图片.png
第三步
数据驱动拿到子节点=>找和数据有关系的比如{{xx}} v-model等等
图片.png
图片.png
图片.png
注意:节点text是一个文本最后一个也有文本,不包含ul下面的li
判断元素还是文本
图片.png
图片.png
图片.png
加了问号,正则,问号?❓就会匹配到下一个}截至
//基础类
class Compiler {
constructor(el, vm) {
// console.log(el);
this.vm = vm;
//判断el属性是不是一个元素,如果不是元素那就获取他
this.el = this.isElementNode(el) ? el : document.querySelector(el);
// console.log(this.el); //dom节点
let fragment = this.node2fragment(this.el);
// console.log(fragment);
//再内存中处理好
//节点的内容进行替换
//编译模板数据驱动
this.compile(fragment);
//然后再渲染给页面
this.el.appendChild(fragment);
}
//编译文本的-看看有没{}
isDirective(attrName) {
return attrName.startsWith("v-");
}
compileText(node) {
//{{xxx}} {{aaa}}
let content = node.textContent;
// console.log(content, "内容");
if (/\{\{(.+?)\}\}/.test(content)) {
// console.log(content); //找到所有文本元素开始填充
CompileUtil["text"](node, content, this.vm);
}
}
//编译元素的-看看有没v-model
compileElement(node) {
//取dom元素的属性
let attributes = node.attributes; //类数组
// console.log(attributes);
//判断这些属性里有没有v-model的如果有我就找到了
[...attributes].forEach(attr => {
//v-model="school.name" type="text"
// console.log(attr);
let { name, value: expr } = attr;
//结构 - v-model="school.name"
// console.log(name, value);
//判断name是不是v-开头的,是不是指令
if (this.isDirective(name)) {
let [, directive] = name.split("-");
// console.log(node, "element");
//找到了
CompileUtil[directive](node, expr, this.vm);
//需要调用不同的指令来处理 - v-model="school.name"
}
});
} //核心的编译方法
compile(node) {
//用来编译内存中的dom节点
let childNodes = node.childNodes;
// console.log(childNodes);
[...childNodes].forEach(child => {
//是不是元素,不是元素就是文本
//元素有v-model 文本有{{...}}
if (this.isElementNode(child)) {
// console.log("element ", child);
this.compileElement(child);
// 如果是元素的话再去遍历子节点
this.compile(child);
} else {
// console.log("text ", child);
this.compileText(child);
}
});
}
//把节点移动到内存中
node2fragment(node) {
//把当前元素中的东西都拿到
//一个一个拿childnode儿子节点,都拿到
let fragment = document.createDocumentFragment();
//创建一个文档碎片
let firstChild;
//node指最外层的div#app
while ((firstChild = node.firstChild)) {
//不停拿第一个塞到内存最后页面中的节点都没有了就为null循环自然结束
//拿一个少一个不用担心死循环
//appendChild具有移动性
console.log(firstChild);
fragment.appendChild(firstChild);
}
return fragment;
}
isElementNode(node) {
//是不是元素节点
return node.nodeType === 1; //undefined===1? 不相等
} //=>#app false
}
//编译工具
CompileUtil = {
getVal(vm, expr) {
//vm.$data 'school.name' 根据表达式取到最终的数据
return expr.split(".").reduce((data, current) => {
return data[current];
}, vm.$data);
},
model(node, expr, vm) {
//给输入框赋予value属性 node.value=xx
// vm[expr]=vm.$data['...']错误
let fn = this.updater["modelUpdater"];
let value = this.getVal(vm, expr); //返给我imycode
fn(node, value);
}, //node节点expr表达式school.name, vm当前实例
html() {
//node.innerHTML=xx
},
text(node, expr, vm) {
let fn = this.updater["textUpdater"];
//expr=>{{a}} {{b}} {{c}}
let content = expr.replace(/\{\{(.+?)\}\}/g, (...args) => {
return this.getVal(vm, args[1]);
});
//最终文本内容
fn(node, content);
},
updater: {
//把数据插入到节点中
modelUpdater(node, value) {
node.value = value;
},
htmlUpdater() {},
//处理文本节点
textUpdater(node, value) {
node.textContent = value;
}
}
};
class Vue {
constructor(options) {
//this.$el $data $options
this.$el = options.el;
// console.log("options.el: " + options.el);
this.$data = options.data;
// console.log("options.data: " + options.data);
//这个根元素存在编译模板
if (this.$el) {
new Compiler(this.$el, this);
}
}
}
前三步合集,取到数据渲染页面但是是单项的
网友评论