JavaScript数据绑定实现一个简单的MVVM库

mvvm

7 浏览量 2020-11-23 18:05:44 上传评论 1 收藏 142KB PDF 举报

资源详情

资源评论

资源推荐

JavaScript数据绑定实现一个简单的数据绑定实现一个简单的 MVVM 库库

推荐阅读：推荐阅读：

实现非常简单的js双向数据绑定

MVVM 是 Web 前端一种非常流行的开发模式，利用 MVVM 可以使我们的代码更专注于处理业务逻辑而不是去关心 DOM 操

作。目前著名的 MVVM 框架有 vue, avalon , react 等，这些框架各有千秋，但是实现的思想大致上是相同的：数据绑定 + 视

图刷新。出于好奇和一颗愿意折腾的心，我自己也沿着这个方向写了一个最简单的 MVVM 库 ( mvvm.js )，总共 2000 多行代

码，指令的命名和用法与 vue 相似，在这里分享一下实现的原理以及我的代码组织思路。

思路整理思路整理

MVVM 在概念上是真正将视图与数据逻辑分离的模式，ViewModel 是整个模式的重点。要实现 ViewModel 就需要将数据模型

（Model）和视图（View）关联起来，整个实现思路可以简单的总结成 5 点：

实现一个 Compiler 对元素的每个节点进行指令的扫描和提取；

实现一个 Parser 去解析元素上的指令，能够把指令的意图通过某个刷新函数更新到 dom 上（中间可能需要一个专门负责视图

刷新的模块）比如解析节点 <p v-show=”isShow”></p> 时先取得 Model 中 isShow 的值，再根据 isShow 更改

node.style.display 从而控制元素的显示和隐藏;

实现一个 Watcher 能将 Parser 中每条指令的刷新函数和对应 Model 的字段联系起来；

实现一个 Observer 使得能够对对象的所有字段进行值的变化监测，一旦发生变化时可以拿到最新的值并触发通知回调；

利用 Observer 在 Watcher 中建立一个对 Model 的监听，当 Model 中的一个值发生变化时，监听被触发，Watcher 拿到新值

后调用在步骤 2 中关联的那个刷新函数，就可以实现数据变化的同时刷新视图的目的。

效果示例效果示例

首先粗看下最终的使用示例，与其他 MVVM 框架的实例化大同小异：

<ul>

</li>

</ul>

</div>

var element = document.querySelector('#mobile-list');

var vm = new MVVM(element, {

'title' : 'Mobile List',

'showRank': true,

'brands' : [

{'name': 'Apple', 'rank': 1},

{'name': 'Galaxy', 'rank': 2},

{'name': 'OPPO', 'rank': 3}

] });

vm.set('title', 'Top 3 Mobile Rank List'); // => <h1>Top 3 Mobile Rank List</h1>

模块划分模块划分

我把 MVVM 分成了五个模块去实现：编译模块 Compiler 、解析模块 Parser 、视图刷新模块 Updater 、数据订阅模块

Watcher 和数据监听模块 Observer 。流程可以简述为：Compiler 编译好指令后将指令信息交给解析器 Parser 解析，Parser

更新初始值并向 Watcher 订阅数据的变化，Observer 监测到数据的变化然后反馈给 Watcher ，Watcher 再将变化结果通知

Updater 找到对应的刷新函数进行视图的刷新。

上述流程如图所示：

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

评论收藏

内容反馈

weixin_38540819

粉丝: 7
资源: 830

JavaScript数据绑定实现一个简单的 MVVM 库

评论0

最新资源

JavaScript数据绑定实现一个简单的 MVVM 库

评论0

js实现一个简单的MVVM框架示例

helix是一个精简的前端MVVM框架具有数据双向绑定和组件化实现等功能

HtmlJsHTML渲染引擎和数据绑定MVVM

Kero是一个用于扩展MVVM架构中数据模型的JS类库

自己动手简单实现的MVVM实例,实现界面和数据的双向绑定

MVVM实现数据双向绑定

Vue双向数据绑定(MVVM)的原理

htmljs:HTML呈现引擎和数据绑定（MVVM）

jsp中将后台传递过来的json格式的list数据绑定到下拉菜单select

Emberjs一个JavaScript创建web应用的MVVM框架

如何实现Vue的MVVM框架

first_ArchitecturePattern_MVVM：如何通过简单的方式将MVVM与数据绑定一起使用

MVVM-Data-Binding-Demo:一个使用MVVM +数据绑定的简单Android应用程序项目

mvvm:仿Vue实现MVVM双数据绑定

android-mvvm-databinding-kotlin:一个简单的Android应用程序项目，使用MVVM +数据绑定+改造+ RxJava并用Kotlin编写

rx-mvvm-android, 使用RxJava和新的Android数据绑定实现MVVM的方法.zip

vue数据双向绑定的实现与原理解析（核心完整代码）

domod:一种轻量级的数据绑定（或所谓的mvvm）方法，提供声明性和命令性方式

mvvm:多种方式实现mvvm

【JavaScript源代码】Vue2.x 的双向绑定原理及实现.docx

MVVM和MVC区别，v-model详解教学课件

手写Vue源码实现MVVM的响应式原理以及数据的双向绑定

TWVMCommand:一个简单的MVVM轻量类，可以简单的用原生实现MVVM编程

如何使用proxy实现一个简单完整的MVVM库的示例代码

mvvm:Flutter MVVM（Model-View-ViewModel）实现。 它使用基于属性的数据绑定在ViewModel和View之间建立连接，并通过ViewModel驱动View更改

JavaScript的MVVM库Vue.js入门学习笔记

最新资源

mvvm:Flutter MVVM（Model-View-ViewModel）实现。它使用基于属性的数据绑定在ViewModel和View之间建立连接，并通过ViewModel驱动View更改