前面我们讲了vue五种类型中的vue及ovserver
这节课我们讲第三中类型compiler
Compiler
下面我们简单讲解下compiler的功能和结构
功能
1:负责编译模板,解析指令/插值表达式
2:负责页面的首次渲染
3:当数据变化后重新渲染视图
结构
简单梳理下compiler的实现思路 在compiler中 我们需要编译模板 因此 需要遍历当前dom对象即el dom对象中的节点 在这里 针对每个不同的节点做判断 在这里 用isTextNode判断文本节点 isElementNode判断元素节点 isDirrective 判断指令() 如果是文本节点 我们使用文本节点的编译方法 即:compileText 如果是元素节点 我们调用元素节点的方式编译 即:compileElement 具体代码实现如下
class Compiler {
constructor(vm) {
this.el = vm.$el;
this.vm = vm;
this.compile(this.el);
}
// 编译模板 处理文本节点和元素节点
compile(el) {
const nodes = el.childNodes;
Array.from(nodes).forEach(node => {
if (this.isElementNode(node)) {
this.compileElement(node);
} else if (this.isTextNode(node)) {
this.compileText(node)
}
// 如果当前节点中还有子节点,递归编译
if (node.childNodes && node.childNodes.length) {
this.compile(node)
}
})
}
// 编译元素节点 处理指令
compileElement(node) {
// 暂时只涉及v-text和v-model
// 逻辑思路 首先我们获取node节点所有的属性 查找到我们需要的指令 并用值替换
// 下面我们打印一下node的所有属性 具体可切换google浏览器查看
// console.log(node.attributes)
// 遍历所有的属性节点
Array.from(node.attributes).forEach(attr => {//Array.from 将伪数组转换为数组
let attrName = attr.name;
if (this.isDirective(attrName)) {
// 在指令中 有v-text v-model等各种各样的指令 我们不能用if语句判断 如果用if 在后期 如果增加了别的指令 则不便于维护 需要手动增加if判断
// 因此 我们讲指令的v-去掉 只保留后面部分 即:v-text -> text v-model ->model
attrName = attrName.substr(2)
let key = attr.value
this.update(node,key,attrName)
}
})
// 判断是否是指令
}
// 通过update方法拼接处对应指令对应的方法 方便后序或者 如:v-text指令 则为textUpdater方法 v-model指令 则为modelUpdater方法 Updater字符串固定 因此 在后续 如果追加的不同的指令 执行增加指令名+Updater凭借的方法
update(node, key, attrName) {
let updateFun = this[attrName + 'Updater']
updateFun && updateFun(node, this.vm[key])
}
textUpdater(node, value) {
node.textContent = value
}
modelUpdater(node,value) {
node.value = value
}
// 编译文本节点 处理插值表达式
compileText(node) {
// console.dir(node)
// {{ msg }} 解析: 插值表达式 是双括号中奖有一个变量 变量的前后可能有空格 可能无空格 可能有多个空格 我们需要将变量提出来 因此用正则表达式
// 详解{{ msg }}案例正则使用规则
// 1:正则的使用规范 首先用//表示正则的开始和介绍
// 2:插值表达式中有{{}},即前后两个大括号 因此这里的正则是 /{{}}/
// 3: 犹豫{是特殊符号 因此需要转义符\ 故正则是 /\{\{\}\}/
// 4: 匹配花括号 即{{}}中间的名字 而变量的名字前面都可能有空格 故:我们需要匹配任意的字符 使用点表示 即 '.' 点表示匹配任意的单个字符 ,不包括换行 后面跟上'+', 加号表示以前修饰的内容出现一次或者多次 因此 .+就可以匹配变量的名字 故 正则为: /\{\{.+\}\}/
// 5: 我们在.+后面跟上问好'?' 表示今早的来结束匹配 故 正则为:/\{\{.+?\}\}/
// 6: 通过/\{\{.+?\}\}/ 我们可以匹配到变量的名字 现在我们需要将匹配的变量名字提取出来 也就是把".+?"的这个位置的内容提取出来 在正则表达式中 这个非常简单 我们只需要需要提取内容的位置加上小括号(),小括号在正则中有分组的含义 我们可以获取到分组中的结果 最终的正则为/\{\{(.+?)\}\}/
let reg = /\{\{(.+?)\}\}/
let value = node.textContent;//获取文本的内容
if (reg.test(value)) {
let key = RegExp.$1.trim();//这里使用正则对象的构造函数 来获取第一个分组的内容 这里$1表示第一个分组的内容 如果要获取第二个 则用$2 获取之后 可能有空格 因此使trim去掉空格
node.textContent = value.replace(reg, this.vm[key]);//replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
}
}
// 判断元素是否是指令
isDirective(attrName) {
return attrName.startsWith('v-')
}
// 判断元素是否是元素节点
isElementNode(node) {
return node.nodeType === 1;
}
// 判断元素是否是文本节点
isTextNode(node) {
return node.nodeType === 3;
}
}
到这里 罗列出这三节课的整体代码
// 具体实现步骤
// 1: 通过属性 保存选项的数据
// 2: 把data中的成员 转换为getter和setter 注入到vue实例中 方便使用
// 3:调用observer对象 监听数据变化
// 4:调用compiler 解析指令和插值表达式
class Vue {
constructor(options) {
// 通过属性 保存选项的数据
this.$options = options || {};//如果我们在调用vue构造函数的时候 没有传入参数 我们初始化一个空对象
this.$data = options.data || {};
this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el;//如果我们是传入的选择器 则将选择器转换为dom对象
// 把data中的成员 转换为getter和setter 注入到vue实例中 方便使用
this._proxyData(this.$data)
// 调用observer对象 监听数据变化
new Observer(this.$data)
// 调用compiler 解析指令和插值表达式
new Compiler(this)
}
_proxyData(data) {//vue传过来的参数 转换为getter和setter
// 遍历data的所有属性
Object.keys(data).forEach(key => {
Object.defineProperty(this, key, {
// 可遍历 可枚举
enumerable: true,
configurable: true,
get() {
return data[key]
},
set(newValue) {
if (newValue === data[key]) {
return
} else {
data[key] = newValue;
}
}
})
})
// 把data中的属性 注入到vue实例中
}
}
class Observer {
constructor(data) {
this.walk(data)
}
// 1. 判断数据是否是对象,如果不是对象返回
// 2. 如果是对象,遍历对象的所有属性,设置为 getter/setter
walk(data) {
if (!data || typeof data != 'object') {
return
}
Object.keys(data).forEach(key => {
this.defineReactive(data, key, data[key])
})
}
// 定义响应式成员 即对data总的数据实现setter和getter
defineReactive(data, key, val) {
const that = this
// 如果 val 是对象,继续设置它下面的成员为响应式数据
this.walk(val)
Object.defineProperty(data, key, {
enumerable: true,
configurable: true,
get() {
return val;
},
set(newValue) {
if (val === newValue) {
return
}
// 如果 newValue 是对象,设置 newValue 的成员为响应式
that.walk(newValue)//这里不用this 因为在set方法中 在function的内部 会开启新的作用域 此时的this执行data对象
val = newValue;
}
})
}
}
class Compiler {
constructor(vm) {
this.el = vm.$el;
this.vm = vm;
this.compile(this.el);
}
// 编译模板 处理文本节点和元素节点
compile(el) {
const nodes = el.childNodes;
Array.from(nodes).forEach(node => {
if (this.isElementNode(node)) {
this.compileElement(node);
} else if (this.isTextNode(node)) {
this.compileText(node)
}
// 如果当前节点中还有子节点,递归编译
if (node.childNodes && node.childNodes.length) {
this.compile(node)
}
})
}
// 编译元素节点 处理指令
compileElement(node) {
// 暂时只涉及v-text和v-model
// 逻辑思路 首先我们获取node节点所有的属性 查找到我们需要的指令 并用值替换
// 下面我们打印一下node的所有属性 具体可切换google浏览器查看
// console.log(node.attributes)
// 遍历所有的属性节点
Array.from(node.attributes).forEach(attr => {//Array.from 将伪数组转换为数组
let attrName = attr.name;
if (this.isDirective(attrName)) {
// 在指令中 有v-text v-model等各种各样的指令 我们不能用if语句判断 如果用if 在后期 如果增加了别的指令 则不便于维护 需要手动增加if判断
// 因此 我们讲指令的v-去掉 只保留后面部分 即:v-text -> text v-model ->model
attrName = attrName.substr(2)
let key = attr.value
this.update(node,key,attrName)
}
})
// 判断是否是指令
}
// 通过update方法拼接处对应指令对应的方法 方便后序或者 如:v-text指令 则为textUpdater方法 v-model指令 则为modelUpdater方法 Updater字符串固定 因此 在后续 如果追加的不同的指令 执行增加指令名+Updater凭借的方法
update(node, key, attrName) {
let updateFun = this[attrName + 'Updater']
updateFun && updateFun(node, this.vm[key])
}
textUpdater(node, value) {
node.textContent = value
}
modelUpdater(node,value) {
node.value = value
}
// 编译文本节点 处理插值表达式
compileText(node) {
// console.dir(node)
// {{ msg }} 解析: 插值表达式 是双括号中奖有一个变量 变量的前后可能有空格 可能无空格 可能有多个空格 我们需要将变量提出来 因此用正则表达式
// 详解{{ msg }}案例正则使用规则
// 1:正则的使用规范 首先用//表示正则的开始和介绍
// 2:插值表达式中有{{}},即前后两个大括号 因此这里的正则是 /{{}}/
// 3: 犹豫{是特殊符号 因此需要转义符\ 故正则是 /\{\{\}\}/
// 4: 匹配花括号 即{{}}中间的名字 而变量的名字前面都可能有空格 故:我们需要匹配任意的字符 使用点表示 即 '.' 点表示匹配任意的单个字符 ,不包括换行 后面跟上'+', 加号表示以前修饰的内容出现一次或者多次 因此 .+就可以匹配变量的名字 故 正则为: /\{\{.+\}\}/
// 5: 我们在.+后面跟上问好'?' 表示今早的来结束匹配 故 正则为:/\{\{.+?\}\}/
// 6: 通过/\{\{.+?\}\}/ 我们可以匹配到变量的名字 现在我们需要将匹配的变量名字提取出来 也就是把".+?"的这个位置的内容提取出来 在正则表达式中 这个非常简单 我们只需要需要提取内容的位置加上小括号(),小括号在正则中有分组的含义 我们可以获取到分组中的结果 最终的正则为/\{\{(.+?)\}\}/
let reg = /\{\{(.+?)\}\}/
let value = node.textContent;//获取文本的内容
if (reg.test(value)) {
let key = RegExp.$1.trim();//这里使用正则对象的构造函数 来获取第一个分组的内容 这里$1表示第一个分组的内容 如果要获取第二个 则用$2 获取之后 可能有空格 因此使trim去掉空格
node.textContent = value.replace(reg, this.vm[key]);//replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
}
}
// 判断元素是否是指令
isDirective(attrName) {
return attrName.startsWith('v-')
}
// 判断元素是否是元素节点
isElementNode(node) {
return node.nodeType === 1;
}
// 判断元素是否是文本节点
isTextNode(node) {
return node.nodeType === 3;
}
}
let vm = new Vue({
el: '#app',
data: {
msg: 'hello',
count: 123,
person: {
name: 'zs'
}
}
})
vm.msg = { 'sex': 'ada' }
这节课 我们就讲到这里 下一节 我们继续