MVVM模式源码分析手写实现

最新推荐文章于 2023-03-17 09:00:00 发布
最新推荐文章于 2023-03-17 09:00:00 发布
阅读量134 收藏
点赞数
文章标签： javascript ViewUI

1.demo1.html 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!--
	1.js 内置观察者模式 对象的属性(描述对象)
	-->

	<script type="text/javascript">
		var obj = {name:"max",age:30};
		console.log(obj.name); // name是一个属性
		// 描述对象（针对对象的属性）
		// Object.defineProperty 是 Object 的静态方法
		Object.defineProperty(obj,"name",{ // 参数：观察对象  属性名 描述对象
			get:function(){ // 获取 阻截访问属性  钩子函数
				// console.log("max is max");
				// return "yangyang"
				return this.value;
			}, // 将钩子函数的返回值作为 访问属相的返回值(集对象的属性值)
			set:function(val){ // 设置
				console.log(val); // 属性值
				console.log("设置属性值");

				//桥接模式 扩展对象属性的方式
				this.value = val;
			}
		}) // 内置的观察者模式

		obj.name = "yangyang"; // 调用set
		console.log(obj.name); // 调用get

		console.log(obj.value); // yangyang

		console.log(obj); // vuejs
	</script>
</body>
</html>

 

demo2.html :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<input v-model="message" />
		<p v-model="message"></p></div>
	</div>

	<script>
		// app 当前的模板
		var model = { // 作为模型数据
			// 设置message属性
			message:"xxxxxxxxxxxxx"
		}

		// 通过当前查找 通过属性查找子元素
		var elments = app.querySelectorAll("[v-model=message]"); // 返回一个数组的集合
		console.log(elments.length);
		// 遍历
		for(var i=0;i<elments.length;i++){
			elments[i].onkeyup = function() {
				// 获取 this.value
				// console.log(this.value);
				// 将值给model.message
				model[this.getAttribute("v-model")] = this.value;
				console.log(model.message);
			}
		}

		// Object.defineProperty 是 Object 的静态方法
		Object.defineProperty(model,"message",{ // 参数：观察对象  属性名 描述对象
			get:function(){ // 获取 阻截访问属性  钩子函数
				// console.log("max is max");
				// return "yangyang"
				return this.value;
			}, // 将钩子函数的返回值作为 访问属相的返回值(集对象的属性值)
			set:function(val){ // 设置
				var models = app.querySelectorAll("[v-model=message]");
				for(var i=0;i<models.length;i++){
					models[i].value = val;
					models[i].innerHTML = val;
				}
				this.value = val;
			}
		}); // 内置的观察者模式

		// 数据双向绑定
		// 模板引擎
		// 响应式原理
		// observer模块
		// 数据追踪
		// 路由
		// 状态管理
		// 虚拟DOM
		// 自定义指令
		// 服务端渲染
	</script>
</body>
</html>

 

demo3.html :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<input v-model="message" />
		<p v-model="message"></p>
	</div>
	
	<script src="js/vue-1.1.0.js"></script>
	<script>
		var model = {
			message:"",
			data:model
		}

		var app = new Vue({
			el:"#app", // 绑定模块DOM结构 
			data:{
				message:"",
				text:""
			}// 配置
		})

		//
	</script>
</body>
</html>

 

模仿vue

vue-1.1.0.js :

// 自运行函数
(function(root,factory){ // 创建作用域  命名空间
	// 调用工厂函数
	root.Vue = factory(); // 返回vue 在window下扩展了vue的属性
})(this,function(){
	// 默认配置
	var _DEFALUT_ = { //用户没有传值,默认优先,用户传值,配置覆盖
		el:"body",
		data:{}
	}
	var Vue = function(option){ // 构造函数
		// console.log(this.el); // body 扩展
		this.extend(this,_DEFALUT_,option); // 合并 this实例对象
		this.el = document.querySelectorAll(this.el); // 转换成element对象
		// console.log(this.el);
		// console.log(this.data);

		// 增加观察观察者模式
		this.observer();

		// 通过当前查找 通过属性查找子元素
		var elments = this.el.querySelectorAll("[v-model]"); // 返回一个数组的集合
		// 遍历
		for(var i=0;i<elments.length;i++){
			elments[i].onkeyup = function() {
				// 获取 this.value
				// console.log(this.value);
				// 将值给model.message
				model[this.getAttribute("v-model")] = this.value;
				console.log(model.message);
			}
		}
	}
	// 创造extend,用于扩展
	Vue.prototype = {
		extend:function(){ // 扩展
			// 从第二个对象开始循环
			for(var i=1;i<arguments.length;i++){ // 2 arguments[1]
				for(var name in arguments[i]){ // for in 循环当前对象的可枚举属性,例如name
					// console.log(name);
					// 开始扩展
					this[name] = arguments[i][name]
				}
			}
		},
		observer:function(){
			var el = this.el;
			// let 定义块作用域
			for(let key in this.data){
				Object.defineProperty(this.data,key,{ // 参数：观察对象  属性名 描述对象
					}get:function(){ // 获取 阻截访问属性  钩子函数
						return this.value;
					}, // 将钩子函数的返回值作为 访问属相的返回值(集对象的属性值)
					set:function(val){ // 设置
						console.log(key);
						var models = el.querySelectorAll("[v-model]=" + key + "]");
						for(var i=0;i<models.length;i++){
							models[i].value = val
							models[i].innerHTML = val
						}
						this.value = val;
					}
				}) // 内置的观察者模式
			}
		}
	}

	return Vue;
});  // this 代表window对象 function 工厂函数  this也可以理解为根作用域

// console.log(Vue); // 拿到工厂函数中定义的构造函数

// 通过new方法,创建vue的实例

.

oldbalck
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
MVVM模式原理分析及实践
01-30
摘要:为解决适用于RIA应用系统开发的设计模式的问题，提出引出MVVM模式。该模式由视图、视图模型、模型三部分组成，通过实现INotifyPropertyChanged接口，解决模型到视图模型的数据传导问题，使模型独立于视图模型，...
Vue的MVVM响应式原理(双向数据绑定)源码解析（附面试题）
weixin_44749729的博客
08-24 667
MVVM MVVM是Model-View-ViewModel的简写，将视图 UI 和业务逻辑分开 ViewMode：也就是mvc 的控制器，取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑 源码分析
深入vue2.0源码系列:从源码角度看MVVM架构模式的实现
前端程序员、项目经理、人工智能博主
03-17 464
Vue.js 2.0是一款流行的前端框架，其底层实现了MVVM（Model-View-ViewModel）架构模式，这个模式是在MVC（Model-View-Controller）和MVP（Model-View-Presenter）的基础上发展起来的。MVVM模式的核心是数据绑定，Vue.js通过响应式的数据绑定机制实现了MVVM。在Vue.js中，Model代表数据，View代表视图，ViewModel是Vue.js的核心，用于连接Model和View。
MVVM源码注释
weixin_49757430的博客
04-29 167
MVVM代码注释如下： function MVVM(options) { //给实例新增一个$options属性,.并且把传递过来的配置进行暂存 this.$options = options; //在实例上新增一个_data 保存传递过来的data数据 var data = this._data = this.$options.data; //保存this 为了之后使用this的时候保证this指向的正确性 var me = this; .
手写一套mvvm框架
uperficialyu的博客
01-28 755
1 MVVM是什么 MVVM 设计模式，是由 MVC、MVP 等设计模式进化而来。 M - 数据模型（Model），简单的JS对象 VM - 视图模型（ViewModel），连接Model与View V - 视图层（View），呈现给用户的DOM渲染界面 通过以上的MVVM模式图，我们可以看出最核心的就是ViewModel，它主要的作用：对View中DOM元素的监听和对Model中的数...
MVVM源码解析之模板解析篇
李耀书
05-05 217
源码解析之模板解析解析表达式解析普通指令 解析表达式 解析步骤： 从文本节点中取出表达式 从data中取出表达式对应的属性值 将属性值设置为文本节点的textContent const vm = new MVVM({ el: "#app", data: { name: "aa" } }); 在源码中，判断当前节点是否存在{{}}，从而进行解析。 通过正则进行匹配大括号表达式，匹配成功后，判断当前元素是否包含文本节点
mini-mvvm:mvvm模式源码分析，还原一个极简版的双向绑定框架
03-23
mvvm模式源码分析，还原一个极简版的双向绑定框架。 极简版MVVM示例 这是hello world等级的，应该找到比这更简单的MVVM示例了 你好世界系列。 可以分别展开注释下，从最简单，到后来的一步一步增加 mvvm_helloworld...
vue中的mvvm模式讲解
12-10
学习了MVVM模式 起先还觉得有点难，后面与双向数据绑定链接起来还是很容易理解的。 那么什么是MVVM呢？ 不明思议咋们肯定和我想的一样 每个单词的首写字母呗！ 对没错就是它 Model-View-ViewModel。 可以实现我们的...
kotlin开发android实现从MVP到MVVM模式
01-17
简单手写android开发音乐中MVP模式和MVVM模式的区别，play目录下是mvp模式，myplayer目录下时mvvmm模式-主要是 实现DataListenerContainer容器，musicList 目录主要是解决UI线程和工作线程的切换导致的问题
手写一个简易的MVVM
m0_45114231的博客
08-18 256
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
MVVM：最常用的常见MVVM
02-16
MVVM：最常用的常见MVVM
MVVM:对VueMVVM模式的理解
05-18
1. 准备 1.[].slice.call(lis): 将伪数组转换为真数组 2.node.nodeType: 得到节点类型 3.Object.defineProperty(obj, propertyName, {}): 给对象添加/修改属性(指定描述符) configurable: true/false 是否可以重新define enumerable: true/false 是否可以枚举(for..in / keys()) value: 指定初始值 writable: true/false value是否可以修改存取(访问)描述符 get: 函数, 用来得到当前属性值 set: 函数, 用来监视当前属性值的变化 4.Object.keys(obj): 得到对象自身可枚举的属性名的数组 5.DocumentFragment: 文档碎片(高效批量更新多个节点) 6.obj.ha
MVVM 案例源码
06-05
两个MVVM的案例源码，利用wpf实现mvvm 模式下的入门例子
MVVM简易框架搭建
09-11
主要是学习了MVVM框架，使得View层和ViewModel解耦，减少View层的代码，不需要对每个控件进行刷新，全部使用DataBingding来进行实现
mvvm：剖析vue实现原理，自己动手实现mvvm
02-06
剖析Vue实现原理-如何实现双向绑定mvvm 本文能帮你做什么？ 1，了解vue的双向数据绑定原理以及核心代码模块2，缓解好奇心的同时了解如何实现双向绑定以补充说明原理与实现，此处相关代码主要摘自，并进行简化改造，相对较简陋，并考虑到数组的处理，数据的循环依赖等，也难免存在一些问题，欢迎大家指正。不过这些并不会影响大家的阅读和理解，相信看完这里后对大家在阅读vue源码的时候会帮助帮助本文所有相关代码均在github上面可找到 相信大家对mvvm双向绑定应该都不陌生了，一言不合上代码，下面先看一个此处最终实现的效果吧，和vue一样的语法，如果还不了解双向绑定，猛戳 < div id =" mv
MVVM简易实现源码
nightwishh的博客
03-22 580
贴上代码便于日后复习 文件如下： index.html MVVM.js observer.js compile.js watcher.js index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpo...
仿Vue手把手带大家从零开始搭建一款MVVM框架
11-08
课程介绍本套课程，大喵将带着大家手把手，编辑每一行代码，使用原生Javascipt及ES6的一些新特性，仿照目前国内非常流行的Vue框架的源码，开发构建一个属于你们自己的MVVM框架。让大家能够很清晰的学习及掌握，模板编译，数据绑定，响应式，文档碎片，观察者模式，发布订阅模式等等，这些Vue的核心知识点，都是怎么回事，它们之间有哪些关联，是如何进行双向数据绑定的等等。在使用vue2.x的核心Object.defineProperty构建完成框架后，大喵也会使用Vue3.0引入的数据劫持的Proxy新特性，来改造我们的MVVM框架，提升我们的框架性能。最终，大喵会手把手带着大家，从0开始配置webpack.config.js配置文件以及引入babel-loader，配置.babelrc文件，转换我们JS文件中的的ES6语法，最终压缩输出我们的MVVM框架库文件。课程目录01 手把手搭建MVVM框架 课程介绍、02 文件结构及基础类创建、03 入口类DamiaoMvvm的实现、04 模板编译、05 元素节点解析编译、06 v-model 数据绑定逻辑梳理、07 v-model 数据绑定实现、08 模板文本编译逻辑梳理、09 模板文本渲染绑定、10 观察者Wather逻辑梳理、11 Wather 逻辑实现、12 Object.defineProperty()、13 defineProperty 小案例、14 observer数据劫持梳理、15 defineProperty数据劫持实现、16 发布订阅类实现、17 Proxy 介绍与概述、18 使用Proxy改造MVVM框架、19 使用Proxy实现响应式、20 webpack 打包配置、21 babel 配置及文件输出、22 Mvvm Proxy 框架打包、23 Mvvm 框架搭建课程总结MVVM框架介绍MVVM是 Model-View-ViewModel 的缩写。mvvm是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。在MVVM架构模式下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
wpf mvvm模式下窗口showdialog的实现
最新发布
09-02
在WPF MVVM模式下，窗口的ShowDialog实现是通过使用自定义的对话框服务来实现的。 首先，我们需要创建一个实现了IDialogService接口的自定义对话框服务类，该接口定义了ShowDialog方法。例如： ``` public ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值