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>
相关推荐
模仿vue的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源于MVC(Model-View-Controller)模式,...MVVM本质就是基于操作数据来操作视图进而操作DOM,借助于MVVM无需直接操作DOM,开发者只需完成包含声明绑定的视图模板,编写ViewModel中有业务,使得View完全实现自动化。
剖析vue实现原理,自己动手实现mvvm
C# 语言开发,前端WPF 实现,运用MVVM框架实现简单的登录功能
MVVM简单例子 MVVM简单例子 MVVM简单例子 MVVM简单例子
主要是学习了MVVM框架,使得View层和ViewModel解耦,减少View层的代码,不需要对每个控件进行刷新,全部使用DataBingding来进行实现
TreeView+MVVM实现TreeView“多选”,使用MVVM模式和依赖属性
vue,mvvm双向绑定原理和实现 1.实现compile,进行模板的编译。指令和watcher更新函数; 2.实现Observe,监听所有的数据,并对变化数据发布通知; 3.实现watcher,作为一个中枢,接收到observe发来的通知,并执行...
Wpf Mvvm模式下窗口ShowDialog的实现
MVVM的简单实例,适合初学者学习,很简单。
MVVM中的,如何通过命令实现窗体之间的跳转、拖动以及显隐控制一直是困扰初学者的一个难题,本程序通过简单的示例代码,实现了这些功能,可以帮助初学者快速掌握这些基础操作。
MVVM实现数据双向绑定
Android 设计架构实践,对现在流行的MVC、MVP、MVVM架构简单实现
本实例是一个基于Prism的MVVM的简单实例,实现对数据的添加,修改,删除,并通知UI界面显示.也就是常说的数据驱动UI. 修改与删除需要选中行进行操作.
MVVM原理实现代码vue1.js
WPF MVVM 实现进度条
MVVM示例