自己动手来做一个MVVM框架（mvvm框架的工作原理）
ccwgpt 2024-09-18 12:35 33 浏览 0 评论
1.MVVM模式
MVVM 模式是 MV* 模式的一个变种。
相对MVP模式，它采用双向绑定（data-binding）：View发生变动，自动反映在 ViewModel上，反之亦然。当下流行的Vue就是采用的这种模式。
2.MVVM具体实现
MVVM框架最常见的特性之一就是数据的双向绑定，效果如下：
代码如下：
常见的数据绑定方式有如下3种：
l发布者-订阅者模式（Backbone.js）--监听
l脏值检查（Angualr.js） --周期循环检查
l数据劫持（Vue.js） -- 数据劫持结合发布者-订阅者模式
2.1.实现MVVM结构
在原型上提供代理方法，采用Object.defineProperty来胁持值的获取和设值操作：
2.2.实现属性劫持
创建一个observer.js完成模型数据的胁持。
首先定义一个observe方法，接受模型数据。
定义一个defineReactive方法来完成模型属性的胁持：
2.3.实现模板解析
首先接MVVM中调用模板解析器。
接下来创建一个templateCompiler.js.
大概思路：
?准备需要的目标模板盒子和vm对象。
?把模板提取到内存fragment中，方便做批量编译
?执行初始化编译方法，逐行对fragment中的节点进行编译。
目前主要针对文本节点。例如:{{message}}
元素节点上的指令。例如：v-model
?最后把结果内容放回到页面。
在原型中实现方法：
使用documentFragment来创建内存代码片段，提高解析效率
初始化方法，逐行提取出模板盒子中每一个节点，根据类型做不同解析
提供2种解析方法，分别把“表达式”内容当成文本指令解析，和元素节点的“指令属性”解析。
提供指令解析对象。
根据不同指令，提供对应的更新规则。
OK，做到这一步，我们初步实现了对模板的解析，实现了初次模型渲染到视图。
但是目前还无法在对一次渲染之后的操作进行相应。所以，我们还需要一个“观察者”，对将来发生的变化进行响应！！
2.4.
实现变化监听
创建观察者构造，收集观察所需信息。
在原型上扩展观察者的获取和更新方法
联通订阅体系，首先回到observer.js中，定义发布对象。
在observe逻辑中
一切准备就绪，去为我们的表达式或者指令关注的属性，添加观察者。
一切就绪，双向绑定实现。
相关推荐
- 迈向群体智能 | 智源发布首个跨本体具身大小脑协作框架
-
允中发自凹非寺量子位|公众号QbitAI3月29日，智源研究院在2025中关村论坛“未来人工智能先锋论坛”上发布首个跨本体具身大小脑协作框架RoboOS与开源具身大脑RoboBrain，可实...
- 大模型对接微信个人号，极空间部署AstrBot机器人，万事不求百度
-
「亲爱的粉丝朋友们好啊！今天熊猫又来介绍好玩有趣的Docker项目了，喜欢的记得点个关注哦！」引言前两天熊猫发过一篇关于如何在极空间部署AstrBot并对接QQ消息平台的文章，不过其实QQ现在已经很少...
- Seata，让分布式事务不再是难题!实战分享带你领略Seata的魅力!
-
终身学习、乐于分享、共同成长！前言Seata是一款开源的分布式事务解决方案，致力于提供高性能和简单易用的分布式事务服务。Seata将为用户提供了AT、TCC、SAGA和XA事务模式，为用户打造一站式的...
- 常见分布式事务解决方案（分布式事务解决的问题）
-
1.两阶段提交（2PC）原理：分为准备阶段（协调者询问参与者是否可提交）和提交阶段（协调者根据参与者反馈决定提交或回滚）。优点：强一致性，适用于数据库层（如XA协议）。缺点：同步阻塞：所有参与者阻塞...
- 分布式事务:从崩溃到高可用，程序员必须掌握的实战方案!
-
“支付成功，但订单状态未更新！”、“库存扣减后，交易却回滚了！”——如果你在分布式系统中踩过这些“天坑”，这篇文章就是你的救命稻草！本文将手把手拆解分布式事务的核心痛点和6大主流解决方案，用代码实战+...
- 谈谈对分布式事务的一点理解和解决方案
-
分布式事务首先，做系统拆分的时候几乎都会遇到分布式事务的问题，一个仿真的案例如下：项目初期，由于用户体量不大，订单模块和钱包模块共库共应用（大war包时代），模块调用可以简化为本地事务操作，这样做只要...
- 一篇教你通过Seata解决分布式事务问题
-
1 Seata介绍Seata是由阿里中间件团队发起的开源分布式事务框架项目，依赖支持本地ACID事务的关系型数据库，可以高效并且对业务0侵入的方式解决微服务场景下面临的分布式事务问题，目前提供AT...
- Seata分布式事务详解(原理流程及4种模式)
-
Seata分布式事务是SpringCloudAlibaba的核心组件，也是构建分布式的基石，下面我就全面来详解Seata@mikechen本篇已收于mikechen原创超30万字《阿里架构师进阶专题合...
- 分布式事务最终一致性解决方案有哪些?MQ、TCC、saga如何实现?
-
JTA方案适用于单体架构多数据源时实现分布式事务，但对于微服务间的分布式事务就无能为力了，我们需要使用其他的方案实现分布式事务。1、本地消息表本地消息表的核心思想是将分布式事务拆分成本地事务进行处理...
- 彻底掌握分布式事务2PC、3PC模型（分布式事务视频教程）
-
原文：https://mp.weixin.qq.com/s/_zhntxv07GEz9ktAKuj70Q作者：马龙台工作中使用最多的是本地事务，但是在对单一项目拆分为SOA、微服务之后，就会牵扯出分...
- Seata分布式事务框架关于Annotation的SAGA模式分析
-
SAGAAnnotation是ApacheSeata版本2.3.0中引入的功能，它提供了一种使用Java注解而不是传统的JSON配置或编程API来实现SAGA事务模式的声明...
- 分布式事务，原理简单，写起来全是坑
-
今天我们就一起来看下另一种模式，XA模式！其实我觉得seata中的四种不同的分布式事务模式，学完AT、TCC以及XA就够了，Saga不好玩，而且长事务本身就有很多问题，也不推荐使用。S...
- 内存空间节约利器redis的bitmap(位图)应用场景有哪些你知道吗
-
在前面我们分享过一次Redis常用数据结构和使用场景，文章对Redis基本使用做了一个简单的API说明，但是对于其中String类型中的bitmap（位图）我们需要重点说明一下，因为他的作用真的不容忽...
- 分布式事务原理详解(图文全面总结)
-
分布式事务是非常核心的分布式系统，也是大厂经常考察对象，下面我就重点详解分布式事务及原理实现@mikechen本文作者：陈睿|mikechen文章来源：mikechen.cc分布式事务分布式事务指的是...
- 大家平时天天说的分布式系统到底是什么东西?
-
目录从单块系统说起团队越来越大，业务越来越复杂分布式出现：庞大系统分而治之分布式系统所带来的技术问题一句话总结：什么是分布式系统设计和开发经验补充说明：中间件系统及大数据系统前言现在有很多Java技术...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- MVC框架 (46)
- spring框架 (46)
- 框架图 (58)
- bootstrap框架 (43)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- jpa框架 (47)
- laravel框架 (46)
- express框架 (43)
- springmvc框架 (49)
- 分布式事务框架 (65)
- scrapy框架 (52)
- java框架spring (43)
- grpc框架 (55)
- orm框架有哪些 (43)
- ppt框架 (48)
- 内联框架 (52)
- winform框架 (46)
- gui框架 (44)
- cad怎么画框架 (58)
- ps怎么画框架 (47)
- ssm框架实现登录注册 (49)
- oracle字符串长度 (48)
- oracle提交事务 (47)