原生js实现 vue的数据双向绑定
原生js实现一个简单的vue的数据双向绑定
vue是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调
所以我们要先做好下面3步：
1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。
1.实现一个Observer
Observer是一个数据监听器，主要依赖于Object.defineProperty()方法，而这个方法在ie8及以下存在兼容问题，请看（MDN defineProperty）所以如vue官网所说：
兼容性
Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有（兼容 ECMAScript 5 的浏览器。）
正因为这个方法，我们就可以利用Obeject.defineProperty()来监听属性变动 那么就可以把需要observer的数据对象进行递归遍历，给他的每个属性都可以加上get，set。
而当给这个对象的某个值赋值操作的时候，就会触发setter，那么就能监听到了数据变化。
function observer(data) {
// 当不是对象的时候，退出
if (!data || typeof data !== 'object') {
return;
}
// 取出所有属性遍历
Object.keys(data).forEach(function(key) {
// 给每个属性加上get，set
defineReactive(data, key, data[key]);
});
};
function defineReactive(data, key, val) {
observer(val); // 监听子属性
Object.defineProperty(data, key, {
enumerable: true, // 可遍历
configurable: false, // 不能修改，删除
get: function() {
return val;
},
set: function(newVal) {
val = newVal;
console.log("已改变 "+newVal);
}
});
}
测试一下：
var obj={
name:'aaaaa',
book:{
name:'bbbbbb'
}
}
observer(obj)
obj.name='cc' //已改变 cc
obj.book.name='dd' //已改变 dd
现在已经监听了数据中的属性变化了，而接下来就是在代码中加入发布者-订阅者模式，关于这个设计模式不懂的可以看这里（js设计模式-发布订阅模式）
首先我们先创造一个订阅器Dep，他是用来收集订阅者Watcher的，然后在属性发生变化的时候执行对应订阅者的更新函数update 。
在上面的 defineReactive 函数最后加入下面代码：
function Dep() {
this.subs = [];//存放消息数组
}
Dep.prototype = {
addSub: function(sub) { //增加订阅者函数
this.subs.push(sub);
},
notify: function() { //发布消息函数
this.subs.forEach(function(sub) {
sub.update(); //这里是订阅者的更新方法
});
}
};
然后修改上面的 defineReactive 函数：
function defineReactive(data, key, val) {
var dep = new Dep(); //实例化一个订阅器
observer(val); // 监听子属性
Object.defineProperty(data, key, {
enumerable: true, // 可遍历
configurable: false, // 不能修改，删除
get: function() {
return val;
},
set: function(newVal) {
if (val === newVal){return} //当前后数值相等，不做改变
val = newVal;
dep.notify(); //当前后数值变化，这时就通知订阅者了
console.log("已改变 "+newVal);
}
});
}
在vue里面针对data这个对象的处理，区分了数组和对象，我们这只考虑对象这一种情况，更多（vue-数组处理）正由于这种处理，所以vue对于：
由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
- 当你利用索引直接设置一个项时，例如：
vm.items[indexOfItem] = newValue- 当你修改数组的长度时，例如：
vm.items.length = newLength
这种情况，设计了 vm.$set 这个实例方法来弥补这方面限制带来的不便。
2.实现Watcher
在第一步我们实现了订阅器，这一步实现订阅者，从上面代码看，在dep 调用 notify() 方法的时候，我们就该去遍历订阅者Watcher了，并且调用他自己的update()方法，
先实现订阅者对象，如下：
function Watcher (vm, exp, cb){
this.cb = cb;
this.vm = vm;
this.exp = exp;
this.value = this.get();//初始化的时候就调用
}
Watcher.prototype={
// 只有在订阅者Watcher初始化的时候才需要添加订阅者
get:function(){
Dep.target = this; // 在Dep.target缓存下订阅者
var value = this.vm.data[this.exp] // 强制执行监听器里的get函数
Dep.target = null; // 释放订阅者
return value;
},
// dep.subs[i].notify() 会执行到这里
update:function() {
this.run();
},
run:function() {
// 执行 get（）获得value ，call更改cb的this指向 。
var value = this.vm.data[this.exp];
var oldVal = this.value;
if (value !== oldVal) {
this.value = value;
this.cb.call(this.vm, value, oldVal);
}
}
}
而在这个时候，我们需要通过Dep的addSub(),将Watcher加进去，在Watcher的构造函数中会调用这句话
this.value = this.get();//初始化的时候就调用
所以我们可以在 defineReactive 函数中做个调整，修改一下Object.defineProperty的get要调用的函数，来对应Watcher构造函数的这个get函数。
而在这里需要判断一下：是不是Watcher的构造函数在调用，如果是，说明他就是这个属性的订阅者。
这里就会用到 Dep.target 这样一个全局唯一的变量，用来判断。代码如下：
function defineReactive(data, key, val) {
var dep = new Dep(); //实例化一个订阅器
observer(val); // 监听子属性
Object.defineProperty(data, key, {
enumerable: true, // 可遍历
configurable: false, // 不能修改，删除
get: function() {
// 如果这个属性存在，说明这是watch 引起的
if(Dep.target){
// 那我调用dep.addSub把这个订阅者加入订阅器里面
dep.addSub(Dep.target)
}
return val;
},
set: function(newVal) {
if (val === newVal){return} //当前后数值相等，不做改变
val = newVal;
dep.notify(); //当前后数值变化，这时就通知订阅者了
console.log("已改变 "+newVal);
}
});
}
最后在Dep函数后面加上：
Dep.target = null;//释放每一个订阅者写到这里我们可以写个简单的例子来测试一下：
先写个函数将我们的Observer和Watcher关联起来：
function pvp(data,el,exp){
this.data=data;
observer(data); //给data每个属性加上get，set
el.innerHTML=this.data[exp]; //粗暴的直接绑定，测试一下效果
new Watcher(this,exp,function(val){
el.innerHTML = val; //调用Watcher直接赋值
})
return this
}
在html中写下：
<h1 id="name">{{name}}</h1>
js中写下：
var ele = document.querySelector('#app');
var pvp = new pvp(
{test: 'hello pvp'},
ele,
'test'
);
结果如下：
好了，下面我们来实现对dom节点的解析，可以让pvp写起来更像vue的写法
3.实现Compile
解析模板，首先需要获取到dom元素，然后对含有dom元素上含有指令的节点进行处理，这个环节需要对dom操作比较频繁，
所以可以用一个通用的办法，先建一个fragment片段，将需要解析的dom节点存入fragment片段里再进行处理。请看（空文档对象）
//创造一个空白节点
nodeToFragment: function (el) {
var fragment = document.createDocumentFragment();
var child = el.firstChild;
while (child) {
// 将Dom每个元素都移入fragment中
fragment.appendChild(child);
child = el.firstChild;
}
return fragment;
},
而在这里我们需要实现一个 Compile 方法，代码如下：
function Compile(el, vm) {
this.vm = vm;
this.el = document.querySelector(el);
this.fragment = null;
this.init(); //初始化一个方法,直接调用解析节点
}
Compile.prototype = {
init: function () {
if (this.el) {
this.fragment = this.nodeToFragment(this.el); //调用了上面的方法，把元素放入并返回
this.compileElement(this.fragment);//对这个里面的元素解析
this.el.appendChild(this.fragment);//再重新放回去
} else {
console.error("找不到节点")
}
},
//创造一个空白节点
nodeToFragment: function (el) {
var fragment = document.createDocumentFragment();
var child = el.firstChild;
while (child) {
// 将Dom每个元素都移入fragment中
fragment.appendChild(child);
child = el.firstChild;
}
return fragment;
},
// 解析节点
compileElement: function (el) {
var childNodes = el.childNodes;
var self = this;
[].slice.call(childNodes).forEach(function(node) {
var reg = /\{\{(.*)\}\}/;
var text = node.textContent;
if (node.nodeType == 1) { //如果是元素节点
self.compileFirst(node);
} else if (node.nodeType == 3 && reg.test(text)) { //如果是文本节点
self.compileText(node, reg.exec(text)[1]);
}
if (node.childNodes && node.childNodes.length) { //如果下面还有子节点，继续循环
self.compileElement(node);
}
});
},
//如果是元素节点
compileFirst: function(node) {
var nodeAttrs = node.attributes;
var self = this;
Array.prototype.forEach.call(nodeAttrs, function(attr) {
var attrName = attr.name;
var exp = attr.value;
if (attrName='p-model') { //当这个属性为p-model的时候就解析model
self.compileModel(node, self.vm, exp);
}
});
},
//如果是文本节点
compileText: function(node, exp) {
var self = this;
var initText = this.vm[exp];
this.updateText(node, initText);
new Watcher(this.vm, exp, function (value) {
self.updateText(node, value);//通知Watcher，开始订阅
});
},
//解析p-model
compileModel: function (node, vm, exp) {
var self = this;
var val = this.vm[exp];
this.modelUpdater(node, val);
new Watcher(this.vm, exp, function (value) {
self.modelUpdater(node, value); //通知Watcher，开始订阅
});
node.addEventListener('input', function(e) {
var newValue = e.target.value;
if (val === newValue) {
return;
}
self.vm[exp] = newValue;
val = newValue;
});
},
updateText: function (node, value) {
//这里是直接替换文本节点
node.textContent = typeof value == 'undefined' ? '' : value;
},
modelUpdater: function(node, value, oldValue) {
//如果不存在就返回空，这里是更新model
node.value = typeof value == 'undefined' ? '' : value;
}
}
然后我们在对上面的关联函数 pvp 进行修改主要是对 data 用 defineProperty 方法进行再一次封装，方便我们使用 xx.data 的写法去调用属性，在对这个函数进行修改，代码如下：
function Pvp(options){
var self = this;
this.data=options.data;
Object.keys(this.data).forEach(function(key) {
self.proxyKeys(key);
});
observer(this.data); //给data每个属性加上get，set
new Compile(options.el,this)
return this
}
Pvp.prototype = {
proxyKeys: function (key) {
var self = this;
Object.defineProperty(this, key, {
enumerable: false,
configurable: true,
get: function getter () {
return self.data[key];
},
set: function setter (newVal) {
self.data[key] = newVal;
}
});
}
}
最后在我们的html的script中写下：
var src=new Pvp({
el: '#app',
data: {
test: 'hello world',
}
});
打完收工！！！！ 最后点（源码）获取源码
原生js实现 vue的数据双向绑定的更多相关文章
- Vue的数据双向绑定和Object.defineProperty()
Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...
- vue中数据双向绑定的实现原理
vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...
- 【Vue】-- 数据双向绑定的原理 --Object.defineProperty()
Object.defineProperty()方法被许多现代前端框架(如Vue.js,React.js)用于数据双向绑定的实现,当我们在框架Model层设置data时,框架将会通过Object.def ...
- 对象的属性类型 和 VUE的数据双向绑定原理
如[[Configurable]] 被两对儿中括号 括起来的表示 不可直接访问他们 修改属性类型:使用Object.defineProperty() //IE9+ 和标准浏览器 支持 查看属性的 ...
- vue实现数据双向绑定的原理
一.知识准备Object.defineProperty( )方法可以直接在一个对象上定义一个新属性,或者修改一个已经存在的属性,并返回这个对象.Object.defineProperty(obj,pr ...
- 利用JS实现vue中的双向绑定
Vue 已经是主流框架了 它的好处也不用多说,都已经是大家公认的了 那我们就来理解一下Vue的单向数据绑定和双向数据绑定 然后再使用JS来实现Vue的双向数据绑定 单向数据绑定 指的是我们先把模板写好 ...
- 一、vue的数据双向绑定的实现
响应式系统 一.概述 Vue通过设定对象属性的 setter/getter 方法来监听数据的变化,通过getter进行依赖收集,而每个setter方法就是一个观察者,在数据变更的时候通知订阅者更新视图 ...
- vue中数据双向绑定注意点
最近一个vue和element的项目中遇到了一个问题: 动态生成的对象进行双向绑定是失败 直接贴代码: <el-form :model="addClass" :rules=& ...
- Vue的数据双向绑定原理——Object-defineProperty
一.定义 ①方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. ②vue.js的双向数据绑定就是通过Object.defineProperty方法实现的,俗称属性拦截 ...
随机推荐
- 01 . RPC简介原理及用Go实现一个简单的RCP
RPC简介 本地过程调用 // 正常情况下程序的执行和调用情况.例如有如下go语言代码: package main import "fmt" func main() { var a ...
- Druid 连接池
记录Druid 连接池简单用法 package Utils; import com.alibaba.druid.pool.DruidDataSourceFactory; import javax.sq ...
- DOM事件操作
DOM事件:对事件做出反应 当事件发生时,可以执行 JavaScript,比如:点击时 onClick="" 例:当用户点击时,会改变 <h1> 元素的内容: < ...
- 汇编语言从键盘输入一个字符串（串长不大于80）以十进制输出字符串中非字母字符的个数（不是a to z或 A to Z）
(1)从键盘输入一个字符串(串长不大于80). (2)以十进制输出字符串中非字母字符的个数(不是a to z或 A to Z). (3)输出原字符串且令非字母字符闪烁显示. (4)找出字符串中ASCI ...
- luogu P4798 [CEOI2015 Day1]卡尔文球锦标赛 dp 数位dp
LINK:卡尔文球锦标赛 可以先思考一下合法的序列长什么样子. 可以发现后面的选手可以使用前面出现的编号也可以直接自己新建一个队. 其实有在任意时刻i 序列的mex>max.即要其前缀子序列中1 ...
- 实战：docker搭建FastDFS文件系统并集成SpringBoot
实战:docker搭建FastDFS文件系统并集成SpringBoot 前言 15年的时候,那时候云存储还远远没有现在使用的这么广泛,归根结底就是成本和安全问题,记得那时候我待的公司是做建站开发的,前 ...
- 银弹谷V百科|使用技巧：Vbase技巧二则之一
银弹谷零代码开发V平台提供访问窗体的短地址链接 格式:http://IP:port/form/componentCode/windowCode 例子: 默认地址:http://IP:port/mod ...
- java多线程编程实例
[转]这篇文章主要介绍了java多线程编程实例,分享了几则多线程的实例代码,具有一定参考价值,加深多线程编程的理解还是很有帮助的,需要的朋友可以参考下. 1.三个售票窗口同时出售20张票程序分析: ...
- Ajax 提交图片
话不多说,直接上代码 页面部分 <form id="form1" enctype="multipart/form-data"> id_token: ...
- SqlServer 多表连接、聚合函数、模糊查询、分组查询应用总结（回归基础）
--exists 结合 if else 以及 where 条件来使用判断是否有数据满足条件 select * from Class where Name like '%[1-3]班' if (not ...