自己手动实现简单的双向数据绑定 mvvm
数据绑定
数据绑定一般就是指的 将数据 展示到 视图上。目前前端的框架都是使用的mvvm模式实现双绑的。大体上有以下几种方式:
- 发布订阅
- ng的脏检查
- 数据劫持
vue的话采用的是数据劫持和发布订阅相结合的方式。 而数据劫持用的是Object.defineProperty来实现的, 可以通过绑定get和set来在获取和设置数据的时候触发相应的函数。
实现
所以我们需要一个监听器Observe来监听数据的变化。在数据发生变化时,我们需要一个Watcher订阅者来更新视图,我们还需要一个指令的解析器compile来解析指令和初始化视图。
- Observe 监听器: 监听数据的变化, 通知订阅者
- Watcher 订阅者: 收到数据的变化, 更新视图
- Compile 解析器: 解析指令,初始化模板,绑定订阅者
Observe
监听数据的每一个属性, 由于可能会有多个watcher,所以需要一个容器来存储。
function Sub() {
this.subs = [];
}
Sub.prototype = {
add(sub) {
this.subs.push(sub);
},
trigger() {
this.subs.forEach(sub => {
sub.update();
})
}
};
Sub.target = null; function observe(data) {
if (typeof data !== 'object' || !data) return;
Object.keys(data).forEach(item => {
let val = data[item];
let sub = new Sub();
Object.defineProperty(data, item, {
enumerable: true,
configurable: false,
get() {
if (Sub.target) {
sub.add(Sub.target);
}
return val;
},
set(newVal) {
val = newVal;
sub.trigger();
}
})
})
}
Watcher
将对应属性的watcher添加到sub容器中, 当属性变化时,执行更新函数。
function Watcher(vm, prop, callback) {
this.vm = vm;
this.prop = prop;
this.callback = callback;
Sub.target = this;
let val = this.vm.$data[prop];
Sub.target = null;
this.vaule = val;
} Watcher.prototype.update = function () {
let newValue = this.vm.$data[this.prop];
if (this.value !== newValue) {
this.value = newValue;
this.callback.call(this.vm, newValue);
}
}
Compile
获取到dom中的指令和初始化模板, 添加watcher更新视图。
function Compile(vm) {
this.vm = vm;
this.el = vm.$el;
this.init();
} Compile.prototype.init = function () {
let fragment = document.createDocumentFragment();
let child = this.el.firstChild;
while(child) {
fragment.append(child);
child = this.el.firstChild;
}
let childNodes = fragment.childNodes;
Array.from(childNodes).forEach(node => {
if (node.nodeType === 1) {
let attrs = node.attributes;
Array.from(attrs).forEach(attr => {
let name = attr.nodeName;
if (name === 'v-model') {
let prop = attr.nodeValue;
let value = this.vm.$data[prop];
node.value = value;
new Watcher(this.vm, prop, val => {
node.value = val;
});
node.addEventListener('input', e => {
let newVal = e.target.value;
if (value !== newVal) {
this.vm.$data[prop] = newVal;
}
})
}
})
} let reg = /\{\{(.*)\}\}/;
let text = node.textContent;
if (reg.test(text)) {
let prop = RegExp.$1;
let val = this.vm.$data[prop];
node.textContent = val;
new Watcher(this.vm, prop, val => {
node.textContent = val;
});
}
})
this.el.appendChild(fragment);
}
到这里, 基本的思路已经实现完毕, 这里只实现了v-model指令。
最后,结合 Observe Watcher和 Compile, 就可以成为一个完整的mvvm了。
<div id="app">
<div>{{val}}</div>
<input type="text" id="input" v-model="val">
</div> <script>
function MyVue(options) {
this.$options = options;
this.$el = options.el;
this.$data = options.data;
this.init();
} MyVue.prototype.init = function () {
observe(this.$data);
new Compile(this);
}; new MyVue({
el: document.getElementById('app'),
data: {
val: 123
}
})
</script>
当然,这只是简单的实现,没考虑细节,主要是学习思路。
查看效果 (代码直接在页面上)
自己手动实现简单的双向数据绑定 mvvm的更多相关文章
- 简单实现双向数据绑定mvvm。
- JavaScript实现简单的双向数据绑定
什么是双向数据绑定 双向数据绑定简单来说就是UI视图(View)与数据(Model)相互绑定在一起,当数据改变之后相应的UI视图也同步改变.反之,当UI视图改变之后相应的数据也同步改变. 双向数据绑定 ...
- 五十行javascript代码实现简单的双向数据绑定
五十行javascript代码实现简单的双向数据绑定 Vue框架想必从事前端开发的同学都使用过,它的双向数据绑定机制能给我们带来很大的方便.今天闲着没事,尝试着实现一下双向数据绑定,接下来给大家分享一 ...
- 利用ES6中的Proxy和Reflect 实现简单的双向数据绑定
利用ES6中的Proxy (代理) 和 Reflect 实现一个简单的双向数据绑定demo. 好像vue3也把 obj.defineProperty() 换成了Proxy+Reflect. 话不多说 ...
- 实现双向数据绑定mvvm
实现双向数据绑定mvvm
- Angular双向数据绑定MVVM以及基本模式分析
MVVM: angular的MVVM实现的是双向数据绑定,模型从服务器端抓取到数据,将数据通过控制器(controller)传递到视图(view)显示,视图数据发生变化时同样也会影响到模型数据的变化, ...
- React简单实现双向数据绑定
import React, { Component } from 'react' import ReactDOM from 'react-dom' class App extends Componen ...
- 原生js简单实现双向数据绑定原理
根据对象的访问器属性去监听对象属性的变化,访问器属性不能直接在对象中设置,而必须通过 defineProperty() 方法单独定义. 访问器属性的"值"比较特殊,读取或设置访问器 ...
- 深入vue源码,了解vue的双向数据绑定原理
大家都知道vue是一种MVVM开发模式,数据驱动视图的前端框架,并且内部已经实现了双向数据绑定,那么双向数据绑定是怎么实现的呢? 先手动撸一个最最最简单的双向数据绑定 <div> < ...
随机推荐
- 华为学习配置笔记-01 配置con密码
1.配置con密码, <Huawei>system //进入系统视图 [Huawei]user-interface console 0 //进入con接口 [Huawei ...
- Java中小数精度问题
代码如下:主要是利用java中写好的DecimalFormat类进行设置(#,0,%) import java.text.DecimalFormat; import java.util.Arrays; ...
- linux查漏补缺-linux命令行安装mysql
apt安装 sudo apt-get update sudo apt-get install mysql-server root@192:/sys/fs/cgroup# apt-get install ...
- CentOS6.9安装MySQL(编译安装、二进制安装)
目录 CentOS6.9安装MySQL Linux安装MySQL的4种方式: 1. 二进制方式 特点:不需要安装,解压即可使用,不能定制功能 2. 编译安装 特点:可定制,安装慢 5.5之前: ./c ...
- 七 异常处理的两种方式(创建全局异常处理器&自定义异常)
1 创建全局异常处理器 实现HandlerExceptionResolve接口 package com.springmvc01; import javax.servlet.http.HttpServl ...
- css元素隐藏方式
1.opacity:设置一个元素的透明度 .hide {opacity: 0;} 2.visibility:设置一个元素可见\不可见.hide {visibility: hidden} .hide { ...
- thinkphp5.1 源码阅读
传送地址:https://github.com/cshaptx4869/tp5.1-code-read 包含: 自动加载 容器 配置文件 钩子 门面
- Linux centosVMware 磁盘格式化、磁盘挂载、手动增加swap空间
一.磁盘格式化 磁盘分区后不能直接使用,需要对每一个分区格式化,格式化其实就是安装系统文件. 命令mke2fs:不支持格式化成xfs系统文件 mkfs.ext4 == mke2fs -t ext4 ...
- Django 3.0 中连接mysql 8.0,可以不使用pymysql ,升级Mysqlclient即可
python 中,连接mysql一般都推荐用pymysql ,而且在django中,网上的教程都是这么连接mysql的. import pymysql pymysql.install_as_MySQL ...
- Linux 下JDK安装
ubuntu下安装jdk sudo apt-get install openjdk-8-jdk =============================================== Ce ...