所实现的效果
<div id="app">
<input type="text" v-model="text">
{{ text }}
</div>
var vm = new Vue(
{
el: 'app',
data:{
text:'hello world'
}
}
)
任务拆分一下
- 将vm实例中的data中的内容绑定到输入框以及文本节点当中。
- 当输入框改变时,vm实例中的data的内容也跟着改变,实现 view => modle。
- 当data中的内容发生变化的时候,输入框的内容以及文本节点的内容也发生变化,实现 modle=> view。
实现任务一
实现内容绑定,我们先需要将这个id为app的节点劫持过来,这里运用了DocuemntFragment(碎片化文档)概念,
DocuemntFragment(碎片化文档):把它认为是一个dom节点的容器,当你创造了10个节点,当每个节点都插入到文档当中都会引发一次浏览器的回流,也就是说浏览器要回流10次,十分消耗资源。而使用碎片化文档,也就是说我把10个节点都先放入到一个容器当中,最后我再把容器直接插入到文档就可以了!浏览器只回流了1次。
还有,当我们使用appendChid方法将原dom树中的节点添加到DocumentFragment中时,会删除原来的节点
var dom = nodeToFragment(document.getElementById(id))
function nodeToFragment(node ) {
var fragment = document.createDocumentFragment();
var child;
while (child = node.firstChild) {
fragment.appendChild(child)
}
return fragment
}
碎片化文档是将子节点都劫持了过来,而我的id为app的div内已经没有内容了。
同时要主要我while的判断条件。判断是否有子节点,因为我每次appendChild都把node中的第一个子节点劫持走了,node中就会少一个,直到没有的时候,child也就变成了undefined,也就终止了循环。
现在我们的考虑两个问题:1. 如何绑定要input上,2. 如何绑定要文本节点中
我们已经获得了app的所有子节点,对每一个节点进行处理,看是不是有跟vm实例中有关联的内容,如果有,修改这个节点的内容。然后重新放入,所以我们需要对所有子节点进行编译,如果有input绑定v-model属性或者有{undefined{ xxx }}的文本节点出现,就进行内容替换,替换为vm实例中的data中的内容:
// 编译函数
function compile(node , vm) {
var reg = /\{\{(.*)\}\}/; // 来匹配 {{ xxx }} 中的xxx
// 匹配元素节点
if(node.nodeType === 1 ) {
// 获取节点上的所有属性
var attr = node.attributes;
// 解析属性
for (let i = 0; i < attr.length; i++) {
if(attr[i].nodeName == 'v-model'){
var name = attr[i].nodeValue; // 与哪一个数据有关
node.addEventListener('input' , function(e) {
vm[name] = e.target.value
})
node.value = vm[name]; // 将data的值赋给该node
node.removeAttribute('v-model');
}
}
console.log(node)
}
// 匹配文本节点
if(node.nodeType === 3 ){
if(reg.test(node.nodeValue)){
var name = RegExp.$1;
name = name.trim() // .trim() 删除字符串开始和末尾的空格
console.log(name) // text
// node.nodeValue = vm[name]
// console.log(node.nodeValue)
new Watcher(vm , node , name)
}
}
// console.log(node)
// console.log(node.nodeType)
}
在向碎片化文档中添加节点时,每个节点都处理一下。
function nodeToFragment(node , vm) {
var fragment = document.createDocumentFragment();
var child;
while (child = node.firstChild) {
compile(child , vm) //------处理节点
fragment.appendChild(child)
}
return fragment
}
创建一下vue实例:
// Vue构造函数
function Vue(options) {
this.data = options.data
var id = options.el
var dom = nodeToFragment(document.getElementById(id) , this) // this -> Vue{}
console.log(dom)
// 处理完所有的dom节点 ,重新将内容添加回去
document.getElementById(id).appendChild(dom)
}
到这一步我们成功将内容都绑定到了输入框与文本节点上,任务一完成了。
实现任务二
输入框改变,vm中的data也会改变,该怎么办呢?我们可以通过事件监听keyup,input等,来获取输入框最新的value,然后通过Object.defineProperty将获取的最新的value,赋值给实例vm的text。
话不多说,首先实现一个响应式监听属性的函数,来监听输入框的属性,一旦有赋新值就发生变化:
语法:
Object.defineProperty(obj, prop, descriptor)
其中:
obj
要在其上定义属性的对象。
prop
要定义或修改的属性的名称。
descriptor
将被定义或修改的属性描述符
//响应式监听属性函数
function defineReactive(obj , key , val) {
Object.defineProperty(obj , key , {
get:function(){
return val
},
set:function(newVal){
if(newVal === val){
return
}
val = newVal;
console.log('新值:' + val)
}
})
}
然后实现一个观察者函数
// 观察者函数
function observe(obj,vm) {
for(let key of Object.keys(obj)){
defineReactive(vm , key , obj[key]);
}
}
在vue实例函数中,观察data中的所有属性值,添加observe
// Vue构造函数
function Vue(options) {
this.data = options.data
var data = this.data
observe(data,this) // ----------------添加observe,来观察data的属性
var id = options.el
var dom = nodeToFragment(document.getElementById(id) , this) // this -> Vue{}
console.log(dom)
// 处理完所有的dom节点 ,重新将内容添加回去
document.getElementById(id).appendChild(dom)
// console.log()
}
最终实现了任务二view => model 通过修改输入框 vm实例中的属性也跟着变化了。
实现任务三
通过修改vm实例的属性 该改变输入框的内容 与 文本节点的内容。这里涉及到一个问题 需要我们注意,当我们修改输入框,改变了vm实例的属性,这是1对1的。但是,我们可能在页面中多处用到 data中的属性,这是1对多的。也就是说,改变1个model的值可以改变多个view中的值。这就需要我们引入一个新的知识点:
订阅/发布者模式
订阅发布模式(又称观察者模式)定义了一种一对多的关系,让多个观察者同时监听某一个主题对象,这个主题对象的状态发生改变时就会通知所有观察者对象。
发布者发出通知 => 主题对象收到通知并推送给订阅者 => 订阅者执行相应操作
我们new一个vue实例干了两件事:
第一个是监听数据:observe(data);
第二个是编译 HTML:nodeToFragement(id)
在监听数据的过程中,我们会为 data 中的每一个属性生成一个主题对象 dep。
在编译 HTML 的过程中,会为每个与数据绑定相关的节点生成一个订阅者 watcher,watcher 会将自己添加到相应属性的 dep 容器中。
我们已经实现:修改输入框内容 => 在事件回调函数中修改属性值 => 触发属性的 set 方法。
所以现在我们要实现:监听到输入框的属性发生改变,使得data中的数据发生改变发出通知,对应的主题对象dep收到通知调用notify(),使得订阅者出发自身的update方法,从而改变视图
在编译的时候给文本节点添加一个 Watcher 订阅者:
Watcher 订阅者首先执行自身的update 方法,进而执行了 get 方法,get 的方法读取了 vm 的访问器属性,有调用的访问器的get方法
将该自己添加到了对应访问器属性的 dep 中;
最后,将 Dep.target 设为空(Dep.target = null)。因为它是全局变量,也是 watcher 与 dep 关联的唯一桥梁,任何时刻都必须保证 Dep.target 只有一个值。
当对应属性发生变化,会执行set方法,使得对应主题dep调用notify()发生发出通知,对应订阅者watcher 会调用自身update方法,使得试图更新
最后手打源码奉上:
// Vue构造函数
function Vue(options) {
this.data = options.data
var data = this.data
observe(data,this)
var id = options.el
var dom = nodeToFragment(document.getElementById(id) , this) // this -> Vue{}
console.log(dom)
// 处理完所有的dom节点 ,重新将内容添加回去
document.getElementById(id).appendChild(dom)
// console.log()
}
function nodeToFragment(node , vm) {
var fragment = document.createDocumentFragment();
var child;
while (child = node.firstChild) {
compile(child , vm)
fragment.appendChild(child)
}
return fragment
}
// 编译函数
function compile(node , vm) {
var reg = /\{\{(.*)\}\}/; // 来匹配 {{ xxx }} 中的xxx
// 匹配元素节点
if(node.nodeType === 1 ) {
// 获取节点上的所有属性
var attr = node.attributes;
// 解析属性
for (let i = 0; i < attr.length; i++) {
if(attr[i].nodeName == 'v-model'){
var name = attr[i].nodeValue; // 与哪一个数据有关
node.addEventListener('input' , function(e) {
vm[name] = e.target.value
})
node.value = vm[name]; // 将获取的最新的value,赋值给实例vm的text
node.removeAttribute('v-model');
}
}
console.log(node)
}
// 匹配文本节点
if(node.nodeType === 3 ){
if(reg.test(node.nodeValue)){
var name = RegExp.$1;
name = name.trim() // .trim() 删除字符串开始和末尾的空格
console.log(name) // text
// node.nodeValue = vm[name]
// console.log(node.nodeValue)
new Watcher(vm , node , name)
}
}
// console.log(node)
// console.log(node.nodeType)
}
// 观察者函数
function observe(obj,vm) {
// 把每个属性都进行响应式监听
for(let key of Object.keys(obj)){
defineReactive(vm , key , obj[key]);
}
}
//响应式监听属性函数
function defineReactive(obj , key , val) {
var dep = new Dep()
Object.defineProperty(obj , key , {
get:function(){
if(Dep.target){
dep.addSub(Dep.target) // 将该自己添加到了对应访问器属性的 dep 中;
}
return val
},
set:function(newVal){
if(newVal === val){
return
}
val = newVal;
console.log('新值:' + val)
dep.notify();
}
})
}
// Watcher构造函数
function Watcher(vm,node,name) {
Dep.target = this;
this.vm = vm;
this.node = node;
this.name = name;
this.update(); // watcher 会将自己添加到相应属性的 dep 容器中
Dep.target = null
// console.log(Dep.target)
}
Watcher.prototype = {
update(){
this.get();
this.node.nodeValue = this.value; // 注意,这是更改节点内容的关键
},
get(){
this.value = this.vm[this.name]; // 触发相应的get
}
}
// dep构造函数
function Dep() {
this.subs = [];
}
Dep.prototype = {
addSub(sub){
this.subs.push(sub);
},
notify(){
this.subs.forEach(
function(sub) {
sub.update()
}
)
}
}
var vm = new Vue(
{
el: 'app',
data:{
text:'hello world'
}
}
)