MVVM
MVVM
2023-09-11 14:19:06 时间
(1)传统开发模式MVP
案例:jQuery操作-面向对象
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-compatible" content="IE=Edg,chrome=1"> <meta name="render" content="webkit"> <title>demo</title> <script type="text/javascript" src="./jquery.min.js"></script> </head> <body> <div id="app"> <input type="text" id="input"> <button id="btn">提交</button> <ul id="showList"></ul> </div> <script type="text/javascript"> function List(){ } $.extend(List.prototype,{ init(){ this.bindEvent(); }, bindEvent(){ var btn = $('#btn'); /* 将this.handleBtnClick中this绑定到了this的Page实例引用 */ btn.on('click',$.proxy(this.handleBtnClick,this)); }, handleBtnClick(){ console.log(666) var inputValue = $('#input').val(); var showList = $('#showList'); showList.append("<li>"+inputValue+"</li>") $('#input').val('') } }) var list = new List(); list.init(); </script> </body> </html>
分析:
jQuery代码符合MVP模式
M:与AJAX交互,获取远程数据 V:视图层---DOM结构 P:控制器层---大部分都是DOM操作
对比MVVM实现方式,可以减少DOM操作代码30%以上
.
相关文章
- iOS开发之浅谈MVVM的架构设计与团队协作
- 轻量级前端MVVM框架avalon源码分析-总结
- MVVM 小雏形 knockout
- MVC、MVP和MVVM的异同
- iOS MVC-MVVM再学习(设计模式,组织代码的权威范式)
- ios swift MVVM实例(Model-View-ViewModel)
- Android kotlin 进阶之用Retrofit+OkHttp+协程+LiveData搭建MVVM来实现网络请求(网络数据JSON解析)显示在RecyclerView
- Vue学习之--------el与data的两种写法、MVVM模型、数据代理(2022/7/5)
- [1] MVC & MVP &MVVM
- Android 程序架构: MVC、MVP、MVVM、Unidirectional、Clean...
- WPF – MVVM: how to draw a movable Rectangle with mouse(根据不同的实例画不同的图形)
- C# prism 框架 MVVM框架 Prism系列之事件聚合器
- .NET Core 3 WPF MVVM框架 Prism系列之事件聚合器
- Android 用MVVM框架模式+DataBinding+JSON来查询杭州天气信息(更新中)
- Android进阶之MVVM+DataBinding框架模式(更新中)
- WPF MVVM从入门到精通5:PasswordBox的绑定
- MVVM 模式下 WPF Password 控件的数据绑定解析