实现一个简易的vue的mvvm（defineProperty）
这是一个最近一年很火的面试题，很多人看到这个题目从下手，其实查阅一些资料后，简单的模拟还是不太难的：
vue不兼容IE8以下是因为他的实现原理使用了 Object.defineProperty 的get和set方法，首先简单介绍以下这个方法
我们看到控制台打印出了这个对象的 key 和 value：
这时候，我们删除这个 name ：
let obj = {};
Object.defineProperty( obj, 'name', {
value: 'langkui'
})
delete obj.name;
console.log(obj)
查看控制台，其实并没有删除：
添加 configurable属性：
let obj = {};
Object.defineProperty( obj, 'name', {
configurable: true,
value: 'langkui'
})
delete obj.name;
console.log(obj)
我们发现 name 被删除了：
此时，注释掉删除 name 的代码，继续添加修改 name 属性的值
let obj = {};
Object.defineProperty( obj, 'name', {
configurable: true,
value: 'langkui'
})
// delete obj.name;
obj.name = 'xiaoming';
console.log(obj)
打开控制台，我们发现 name 的值并没有被修改
我们添加writable: true 的属性:
let obj = {};
Object.defineProperty( obj, 'name', {
configurable: true,
writable: true,
value: 'langkui'
})
// delete obj.name;
obj.name = 'xiaoming';
console.log(obj)
此时obj.name的值被修改了，
我们试着循环obj：
let obj = {};
Object.defineProperty( obj, 'name', {
configurable: true,
writable: true,
value: 'langkui'
})
// delete obj.name;
// obj.name = 'xiaoming';
for(let key in obj) {
console.log(obj[key])
}
console.log(obj)
但是控制台什么也没有输出;
添加 enumerable: true 属性后, 控制台显示执行了循环
let obj = {};
Object.defineProperty( obj, 'name', {
configurable: true,
writable: true,
enumerable: true,
value: 'langkui'
})
// delete obj.name;
// obj.name = 'xiaoming';
for(let key in obj) {
console.log(obj[key])
}
console.log(obj)
我们还可以给Object.defineProperty 添加 get 和 set 的方法：
let obj = {};
Object.defineProperty( obj, 'name', {
configurable: true,
// writable: true,
enumerable: true,
get() {
console.log('正在获取name的值')
return 'langming'
},
set(newVal) {
console.log(`正在设置name的值为${newVal}`)
}
})
// delete obj.name;
// obj.name = 'xiaoming';
for(let key in obj) {
console.log(obj[key])
}
console.log(obj)
然后我们试着在控制台改变 name 的值为100
这些就是Object.defineProperty一些常用设置。
接下来我们用它来实现一个简单的mvvm：
有如下一个简单的看似很像vue的东西：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
{{a}}
</div>
<script src="1.js"></script>
<script>
// 数据劫持 Observe
let vue = new Vue({
el: 'app',
data: {
a: ,
}
});
</script>
</body>
</html>
首先我们创建一个Vue的构造函数，并把_data和$options作为他的属性，同时我们希望有个一observe的函数来监听_data的变化，在_data发生变化的时候我们修改Vue构造函数上添加一个对应相同key的属性的值并且同时监听这个新的key的值的变化:
function Vue( options = {} ) {
this.$options = options;
// this._data;
var data = this._data = this.$options.data;
// 监听 data 的变化
observe(data);
// 实现代理 this.a 代理到 this._data.a
for(let name in data) {
Object.defineProperty( this, name, {
enumerable: true,
get() {
// this.a 获取的时候返回 this._data.a
return this._data[name];
},
set(newVal) {
// 设置 this.a 的时候相当于设置 this._data.a
this._data[name] = newVal;
}
})
}
}
function Observe(data) {
for(let key in data) {
let val = data[key];
observe(val)
Object.defineProperty(data, key, {
enumerable: true,
get() {
return val;
},
set(newVal) {
if(newVal === val) {
return;
}
// 设置值的时候触发
val = newVal;
// 实现赋值后的对象监测功能
observe(newVal);
}
})
}
}
// 观察数据，给data中的数据object.defineProperty
function observe(data) {
if(typeof data !== 'object') {
return;
}
return new Observe(data);
}
我们在控制台查看vue 并且 修改 vue.a 的值为100 并再次查看 vue:
接下来我们通过正则匹配页面上的{{}} 并且获取 {{}} 里面的变量 并把 vue上对应的key 替换进去 ：
function Vue( options = {} ) {
this.$options = options;
// this._data;
var data = this._data = this.$options.data;
// 监听 data 的变化
observe(data);
// 实现代理 this.a 代理到 this._data.a
for(let name in data) {
Object.defineProperty( this, name, {
enumerable: true,
get() {
// this.a 获取的时候返回 this._data.a
return this._data[name];
},
set(newVal) {
// 设置 this.a 的时候相当于设置 this._data.a
this._data[name] = newVal;
}
})
}
// 实现魔板编译
new Compile(this.$options.el, this)
}
// el:当前Vue实例挂载的元素， vm：当前Vue实例上data，已代理到 this._data
function Compile(el, vm) {
// $el 表示替换的范围
vm.$el = document.querySelector(el);
let fragment = document.createDocumentFragment();
// 将 $el 中的内容移到内存中去
while( child = vm.$el.firstChild ) {
fragment.appendChild(child);
}
replace(fragment);
// 替换{{}}中的内容
function replace(fragment) {
Array.from(fragment.childNodes).forEach( function (node) {
let text = node.textContent;
let reg = /\{\{(.*)\}\}/;
// 当前节点是文本节点并且通过{{}}的正则匹配
if(node.nodeType === && reg.test(text)) {
console.log(RegExp.$); // a.a b
let arr = RegExp.$.split('.'); // [a,a] [b]
let val = vm;
arr.forEach( function(k) {
// 循环层级
val = val[k];
})
// 赋值
node.textContent = text.replace(reg, val);
}
vm.$el.appendChild(fragment)
// 如果当前节点还有子节点，进行递归操作
if(node.childNodes) {
replace(node);
}
})
}
}
function Observe(data) {
for(let key in data) {
let val = data[key];
observe(val)
Object.defineProperty(data, key, {
enumerable: true,
get() {
return val;
},
set(newVal) {
if(newVal === val) {
return;
}
// 设置值的时候触发
val = newVal;
// 实现赋值后的对象监测功能
observe(newVal);
}
})
}
}
// 观察数据，给data中的数据object.defineProperty
function observe(data) {
if(typeof data !== 'object') {
return;
}
return new Observe(data);
}
这时我们剩下要做的就是在data改变的时候进行一次页面更新， 此时需要提一下订阅发布模式：
订阅模式其实就是就是一个队列，我们把需要执行的函数推进一个数组，在需要用的时候依次去执行这个数组中方法：
// 发布订阅模式 先订阅 再有发布 一个数组的队列 [fn1, fn2, fn3] // 约定绑定的每一个方法，都有一个update属性
function Dep() {
this.subs = [];
}
Dep.prototype.addSub = function (sub) {
this.subs.push(sub);
} Dep.prototype.notify = function () {
this.subs.forEach( sub => sub.update());
} // Watch是一个类，通过这个类创建的实例都有update的方法ßß
function Watcher (fn) {
this.fn = fn
}
Watcher.prototype.update = function() {
this.fn();
} let watcher = new Watcher( function () {
console.log('开始了发布');
}) let dep = new Dep();
dep.addSub(watcher);
dep.addSub(watcher);
console.log(dep.subs);
dep.notify(); // 订阅发布模式其实就是一个数组关系，订阅就是讲函数push到数组队列，发布就是以此的执行这些函数
执行这个文件：
这个就是简单的订阅发布模式，我们把这个应用到们的mvvm中，在数据改变的时候进行实时的更新页面操作：
function Vue( options = {} ) {
this.$options = options;
// this._data;
var data = this._data = this.$options.data;
// 监听 data 的变化
observe(data);
// 实现代理 this.a 代理到 this._data.a
for(let name in data) {
Object.defineProperty( this, name, {
enumerable: true,
get() {
// this.a 获取的时候返回 this._data.a
return this._data[name];
},
set(newVal) {
// 设置 this.a 的时候相当于设置 this._data.a
this._data[name] = newVal;
}
})
}
// 实现魔板编译
new Compile(this.$options.el, this)
}
// el:当前Vue实例挂载的元素， vm：当前Vue实例上data，已代理到 this._data
function Compile(el, vm) {
// $el 表示替换的范围
vm.$el = document.querySelector(el);
let fragment = document.createDocumentFragment();
// 将 $el 中的内容移到内存中去
while( child = vm.$el.firstChild ) {
fragment.appendChild(child);
}
replace(fragment);
// 替换{{}}中的内容
function replace(fragment) {
Array.from(fragment.childNodes).forEach( function (node) {
let text = node.textContent;
let reg = /\{\{(.*)\}\}/;
// 当前节点是文本节点并且通过{{}}的正则匹配
if(node.nodeType === && reg.test(text)) {
// RegExp $1-$9 表示 最后使用的9个正则
console.log(RegExp.$); // a.a b
let arr = RegExp.$.split('.'); // [a,a] [b]
let val = vm;
arr.forEach( function(k) {
// 循环层级
val = val[k];
})
// 赋值
new Watcher( vm, RegExp.$, function(newVal) {
node.textContent = text.replace(reg, newVal);
})
node.textContent = text.replace(reg, val);
}
vm.$el.appendChild(fragment)
// 如果当前节点还有子节点，进行递归操作
if(node.childNodes) {
replace(node);
}
})
}
}
function Observe(data) {
// 开启订阅发布模式
let dep = new Dep();
for(let key in data) {
let val = data[key];
observe(val)
Object.defineProperty(data, key, {
enumerable: true,
get() {
Dep.target && dep.addSub(Dep.target);
return val;
},
set(newVal) {
if(newVal === val) {
return;
}
// 设置值的时候触发
val = newVal;
// 实现赋值后的对象监测功能
observe(newVal);
// 让所有的watch的update方法都执行
dep.notify();
}
})
}
}
// 观察数据，给data中的数据object.defineProperty
function observe(data) {
if(typeof data !== 'object') {
return;
}
return new Observe(data);
}
// 发布订阅模式
function Dep() {
this.subs = [];
}
Dep.prototype.addSub = function (sub) {
this.subs.push(sub);
}
Dep.prototype.notify = function () {
this.subs.forEach( sub => sub.update());
}
// watcher
function Watcher (vm, exp, fn) {
this.vm = vm;
this.exp = exp;
this.fn = fn
// 将watch添加到订阅中
Dep.target = this;
let val = vm;
let arr = exp.split('.');
arr.forEach(function (k) { // 取值，也就是取 this.a.a/this.b 此时会调用 Object.defineProperty的get的方法
val = val[k];
});
Dep.target = null;
}
Watcher.prototype.update = function() {
let val = this.vm;
let arr = this.exp.split('.');
arr.forEach( function (k) {
val = val[k];
})
// 需要传入newVal
this.fn(val);
}
在控制台修改数据页面出现了更新：
一个简单的mvvm就实现了。
源码已经放到了我的github： https://github.com/Jasonwang911/vueMVVM 如果对你有帮助，可以star~~
实现一个简易的vue的mvvm（defineProperty）的更多相关文章
- mvvm实现一个简单的vue
vue,基于mvvm模式下的一个前端框架 mvvm模式下简单的实现数据代理,数据劫持 1.是用Object.defineProperty 实现数据代理 2.使用发布订阅者模式,配合 Object.de ...
- 基于 getter 和 setter 撸一个简易的MVVM
Angular 和 Vue 在对Angular的学习中,了解到AngularJS 的两个主要缺点: 对于每一次界面时间,Ajax 或者 timeout,都会进行一个脏检查,而每一次脏检查又会在内部循环 ...
- 实现一个类 Vue 的 MVVM 框架
Vue 一个 MVVM 框架.一个响应式的组件系统,通过把页面抽象成一个个组件来增加复用性.降低复杂性 主要特色就是数据操纵视图变化,一旦数据变化自动更新所有关联组件~ 所以它的一大特性就是一个数据响 ...
- Vue源码分析之实现一个简易版的Vue
目标 参考 https://cn.vuejs.org/v2/guide/reactivity.html 使用 Typescript 编写简易版的 vue 实现数据的响应式和基本的视图渲染,以及双向绑定 ...
- 实现一个简易vue
vue主要的功能实现主要分为3部分: 数据劫持/数据代理:数据改变时通知相关函数进行更新操作 数据依赖收集:建立保存dom节点与数据的关联关系 模板与数据之间的绑定:接受到新数据时对dom节点进行更新 ...
- 使用MVVM框架avalon.js实现一个简易日历
最近在做公司内部的运营管理系统,因为与日历密切相关,同时无需触发条件直接显示在页面上,所以针对这样的功能场景,我就用avalon快速实现了一个简易日历,毕竟也是第一次造日历这种轮子,所以这里记录下我当 ...
- vue + socket.io实现一个简易聊天室
vue + vuex + elementUi + socket.io实现一个简易的在线聊天室,提高自己在对vue系列在项目中应用的深度.因为学会一个库或者框架容易,但要结合项目使用一个库或框架就不是那 ...
- vue实现一个简易Popover组件
概述 之前写vue的时候,对于下拉框,我是通过在组件内设置标记来控制是否弹出的,但是这样有一个问题,就是点击组件外部的时候,怎么也控制不了下拉框的关闭,用户体验非常差. 当时想到的解决方法是:给根实例 ...
- 使用 js 实现一个简易版的 vue 框架
使用 js 实现一个简易版的 vue 框架 具有挑战性的前端面试题 refs https://www.infoq.cn/article/0NUjpxGrqRX6Ss01BLLE xgqfrms 201 ...
随机推荐
- [ 9.10 ]CF每日一题系列—— 186A模拟处理字符串
Description: 跟你两个不相同的字符串,问你能否将第一个字符串任意两个字母交换一次使得两字符串相同,YES or NO Solution: 一维模拟就好了 #include <iost ...
- docker mac
官网上有安装方法.已安装成功. 容器千万不能随便删 现在已经不用boot2docker,使用dockertools来安装docker,dockertools中包含docker-machine,等等. ...
- android延时弹出软键盘
searchEditView.setFocusable(true); searchEditView.setFocusableInTouchMode(true); searchEditView.requ ...
- 第三天：DOM操作css
基本语法: 引用样式时是在head中,用link,另外需要<div>才能显示 修改样式:按下按钮后,引用的样式部分,颜色变为蓝色 如图下图是更改了样式中hello的颜色 代码如下: < ...
- EBS 取消“是否提交另一项请求”提示
在使用EBS提交请求后,总要弹出“是否提交另一项请求”的提示,而我们往往选择“否”,这个提示就显得多余. 为了减轻这“多一步”的负担,取消“是否提交另一项请求”的提示,设置方法如下: 以下profil ...
- WCF加密传输数据,b并且用户名+密码验证
在前2个文章的基础上,继续增加对client 端增加username+password的验证 host增加类Validator,需要添加引用 using System.IdentityModel.Se ...
- 使用ActionFilterAttribute实现MVC后台授权
授权就是我们在用户未登录的情况下不允许访问一些页面,只有登录后才能进行访问一些页面. 在mvc中我们可以使用ActionFilterAttribute来进行授权验证来阻止一些未经授权的直接访问的页面. ...
- UWP Button添加圆角阴影（三）
原文:UWP Button添加圆角阴影(三) Composition DropShadow是CompositionAPI中的东西,使用Storyboard设置某个属性,就是频繁的触发put_xxx() ...
- 背水一战 Windows 10 (47) - 控件（ScrollViewer 特性）: Chaining, Rail, Inertia, Snap, Zoom
[源码下载] 背水一战 Windows 10 (47) - 控件(ScrollViewer 特性): Chaining, Rail, Inertia, Snap, Zoom 作者:webabcd 介绍 ...
- SVM的基础原理
因为看cs231的时候用了一下multi-class的svm,所以又把svm给复习了一下,教材是周志华的西瓜书,这里是大概的笔记. 1.线性可分 对于一个数据集: 如果存在一个超平面X能够将D中的正负 ...