模板解析(compile.js)
1、模板解析的关键对象:compile对象
2、模板解析的基本流程:
(1)、将el的所有子节点取出, 添加到一个新建的文档fragment对象中
(2)、对fragment中的所有层次子节点递归进行编译解析处理
对表达式文本节点进行解析
对元素节点的指令属性进行解析
事件指令解析
一般指令解析
(3)、 将解析后的fragment添加到el中显示
3、解析表达式文本节点: textNode.textContent = value
(1)、根据正则对象得到匹配出的表达式字符串: 子匹配/RegExp.$1
(2)、从data中取出表达式对应的属性值
(3)、将属性值设置为文本节点的textContent
4、事件指令解析: elementNode.addEventListener(事件名, 回调函数.bind(vm))
v-on:click="test"
(1)、从指令名中取出事件名
(2)、根据指令的值(表达式)从methods中得到对应的事件处理函数对象
(3)、给当前元素节点绑定指定事件名和回调函数的dom事件监听
(4)、指令解析完后, 移除此指令属性
5.一般指令解析:elementNode.xxx = value
(1)、得到指令名和指令值(表达式)
(2)、从data中根据表达式得到对应的值
(3)、根据指令名确定需要操作元素节点的什么属性
v-text—textContent属性
v-html—innerHTML属性
v-class–className属性
(4)、将得到的表达式的值设置到对应的属性上
(5)、移除元素的指令属性
<body>
<div id="test">
<p>{{name}}</p>
</div>
<script type="text/javascript" src="js/mvvm/compile.js"></script>
<script type="text/javascript" src="js/mvvm/mvvm.js"></script>
<script type="text/javascript" src="js/mvvm/observer.js"></script>
<script type="text/javascript" src="js/mvvm/watcher.js"></script>
<script type="text/javascript">
new MVVM({
el: '#test',
data: {
name: 'Hello'
}
})
</script>
</body>
<body>
<div id="test">
<p>{{name}}</p>
<button v-on:click="show">提示</button>
</div>
<script type="text/javascript" src="js/mvvm/compile.js"></script>
<script type="text/javascript" src="js/mvvm/mvvm.js"></script>
<script type="text/javascript" src="js/mvvm/observer.js"></script>
<script type="text/javascript" src="js/mvvm/watcher.js"></script>
<script type="text/javascript">
new MVVM({
el: '#test',
data: {
name: 'hello'
},
methods: {
show () {
alert(this.name)
}
}
})
</script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06_模板解析_一般指令</title>
<style>
.aa {
color: red;
}
.bb{
font-size: 30px;
}
</style>
</head>
<body>
<div id="test">
<p v-text="msg"></p>
<p v-html="msg"></p>
<p class="bb" v-class="myClass">元宵快乐!</p>
</div>
<script type="text/javascript" src="js/mvvm/compile.js"></script>
<script type="text/javascript" src="js/mvvm/mvvm.js"></script>
<script type="text/javascript" src="js/mvvm/observer.js"></script>
<script type="text/javascript" src="js/mvvm/watcher.js"></script>
<script type="text/javascript">
new MVVM({
el: '#test',
data: {
msg: '<a href="http://www.baidu.com">百度</a>',
myClass: 'aa'
}
})
</script>
</body>
</html>