mini mvvm 简单实现版，代码有待改进
<html>
<head>
<title>mini-mvvm</title>
</head>
<body>
<div id='app'>
<p>
My name is {{firstName + ' ' + lastName}}, I am {{age}} years old.
</p>
</div>
<script type="text/javascript">
const bindViewToData = ((el, data) => {
let source = el.innerHTML;
let updateTextArray = [];
let updateText = (el) => {
el._textContent = el._textContent || el.textContent;
el.textContent = el._textContent.replace(/\{\{([^\{\}]+)\}\}/gm, ($0, $1) => {
return new Function('data','with(data){return ' + $1+'}')(data);
});
};
let update = () => {
let findChild = (el) => {
var childs = el.childNodes;
if(childs){
childs = Array.prototype.slice.apply(childs);
for (var i = childs.length - 1; i >= 0; i--) {
if(childs[i].nodeType === 3){
updateText(childs[i]);
}else if(childs[i].childNodes){
findChild(childs[i]);
}
};
}
};
findChild(el);
};
update();
for(var k in data){
data._data = data._data || {};
if(data.hasOwnProperty(k)){
data._data[k] = data[k];
Object.defineProperty(data, k, {
get: (function(k){
return function(){
return this._data[k];
}
})(k),
set: (function(k){
return function(val){
if(this._data[k] !== val){
this._data[k] = val;
update();
}
};
})(k)
});
}
}
});
const appData = {
firstName: 'Lucy',
lastName: 'Green',
age: 13
}
bindViewToData(document.getElementById('app'), appData)
// div 里面的 p 元素的内容为
// My name is Lucy Green, I am 13 years old.
appData.firstName = 'Jerry'
appData.age = 16
// div 里面的 p 元素的内容自动变为
// My name is Jerry Green, I am 16 years old.
</script>
</body>
</html>
相关推荐
**Mvvm 模型-视图-ViewModel 框架简易实现** 在现代 Web 开发中，MVVM（Model-View-ViewModel）架构模式被广泛应用于构建用户界面，尤其是前端应用。Vue.js 是一个非常流行的 MVVM 框架，其设计理念是数据驱动和...
用MVVM架构实现的计算器小程序实例, 包括MVVM架构的命令对象和消息通知对象,小计算器加减乘除的实现逻辑.页面布局等简单知识.供WPF和MVVM初学者参考. 参考代码: /// /// 加法命令 /// public BaseCommand Add...
使用TypeScript创建MVVM框架模型，以此来开发大型的windows应用商店程序或者其它web程序。 Use TypeScript to accomplish MVVM pattern to develop windows store app or other web application.
在这个“MVVM简易框架搭建”的主题中，我们将深入探讨MVVM架构的基本原理、组件职责以及如何在实际项目中应用。 **1. MVVM模式介绍** MVVM由三个主要部分组成：Model（模型）、View（视图）和ViewModel（视图模型）...
本教程将带你一步步实现一个自己的简易MVVM框架，以加深对这一模式的理解。 首先，我们要理解MVVM模式的基本概念。MVVM的核心思想是解耦视图（View）与模型（Model），通过ViewModel作为桥梁进行通信。Model负责...
在本文中，我们将深入探讨如何使用C#语言和Windows Presentation Foundation（WPF）框架，结合Model-View-ViewModel（MVVM）设计模式来实现一个简易的登录功能，并且包括页面跳转等操作。WPF是.NET Framework的一个...
基于Avalonia+MVVM实现的仿网易云UI界面；基于Avalonia+MVVM实现的仿网易云UI界面；基于Avalonia+MVVM实现的仿网易云UI界面；基于Avalonia+MVVM实现的仿网易云UI界面；基于Avalonia+MVVM实现的仿网易云UI界面；基于...
通过以上步骤，你可以理解Vue.js如何实现MVVM模式，并能构建一个基础版的MVVM框架。这个过程不仅有助于深入理解Vue的内部机制，还能提升你对JavaScript和前端开发的整体认知。 在实践过程中，可能会遇到一些挑战，...
MVVM源于MVC(Model-View-Controller)模式，...MVVM本质就是基于操作数据来操作视图进而操作DOM，借助于MVVM无需直接操作DOM，开发者只需完成包含声明绑定的视图模板，编写ViewModel中有业务，使得View完全实现自动化。
这个实例可能展示了如何在Winform环境中手动实现或模拟MVVM模式。 **描述分析：** 描述中提到的“simpleButton1点击后，再点击simpleButton2显示textEdit1的值”，这是对一个基本交互场景的描述，涉及到用户界面的...
总之，`MVVM简单的实例`是一个理想的入门教程，帮助初学者理解这种模式如何工作，以及如何在实际项目中应用MVVM来提升开发效率和代码质量。通过实践`MvvmTest`项目，学习者可以掌握MVVM的基本概念和操作，为后续更...
本篇文章将详细探讨如何在WPF MVVM架构下实现一个进度条功能。 首先，我们需要理解MVVM模式的基本组件。Model是业务逻辑层，负责处理数据和业务规则；View是用户界面，与用户交互；ViewModel作为Model和View之间的...
MVVMLight是由GalaSoft开发的一个轻量级MVVM（Model-View-ViewModel）框架，它为WPF和UWP提供了很多便利，包括事件代理、依赖属性助手、以及简单易用的页面导航服务。 首先，我们需要理解MVVM模式。这是一种设计...
在本文中，我们将深入探讨如何使用MVVM（Model-View-ViewModel）模式和依赖属性来实现WPF（Windows Presentation Foundation）中的TreeView控件的多选功能。MVVM是一种设计模式，它鼓励分离关注点，使应用程序更易于...
本文将详细探讨在MVVM模式下如何实现窗体间的跳转、窗体的拖动以及窗口的显隐控制。 1. MVVM模式简介 MVVM模式的核心思想是解耦视图和业务逻辑，通过数据绑定将View与ViewModel连接，ViewModel再与Model交互。这样...
在本文中，我们将深入探讨如何使用WPF（Windows Presentation Foundation）框架结合MvvmLight库创建一个简单的导航实例。MvvmLight是由GalaSoft开发的轻量级MVVM（Model-View-ViewModel）库，它为WPF应用提供了一...
在“基于Prism的MVVM简单实例”压缩包中，你将找到源代码文件，包括View的XAML文件、ViewModel的C#文件以及可能的Model实体类。通过阅读和分析这些代码，你可以更好地理解Prism框架如何与MVVM模式结合，以及如何实现...
在本文中，我们将深入探讨如何在WPF（Windows Presentation Foundation）环境中使用MVVM（Model-View-ViewModel）架构实现DataGrid的分页功能。MVVM是一种流行的设计模式，它将业务逻辑、用户界面和数据模型分离，...
本篇主要讨论如何在MVVM框架下实现DataGrid控件的动态列以及编辑功能。 首先，理解MVVM模式的基本概念： 1. **Model**：模型层，负责业务数据的处理，不关心UI。 2. **View**：视图层，UI界面，用户交互的地方，...
- ViewModelBase：这是MVVM模式的核心，提供了INotifyPropertyChanged接口的实现，用于数据绑定和属性变更通知。 - RelayCommand：这是一个命令实现，允许视图与ViewModel之间的交互，支持CanExecute条件检查。 ...