位置: 编程技术 - 正文

JavaScript数据绑定实现一个简单的 MVVM 库(js绑定onchange)

编辑:rootadmin

推荐整理分享JavaScript数据绑定实现一个简单的 MVVM 库(js绑定onchange),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js三种绑定方式,javascript数据绑定,js绑定onchange,js绑定,js怎么绑定数据,js怎么绑定数据,javascript数据绑定,js怎么绑定数据,内容如对您有帮助,希望把文章链接给更多的朋友!

推荐阅读:

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

MVVM 是 Web 前端一种非常流行的开发模式,利用 MVVM 可以使我们的代码更专注于处理业务逻辑而不是去关心 DOM 操作。目前著名的 MVVM 框架有 vue, avalon , react 等,这些框架各有千秋,但是实现的思想大致上是相同的:数据绑定 + 视图刷新。出于好奇和一颗愿意折腾的心,我自己也沿着这个方向写了一个最简单的 MVVM 库 ( mvvm.js ),总共 多行代码,指令的命名和用法与 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 框架的实例化大同小异:

模块划分

我把 MVVM 分成了五个模块去实现: 编译模块 Compiler 、解析模块 Parser 、视图刷新模块 Updater 、数据订阅模块 Watcher 和 数据监听模块 Observer 。流程可以简述为:Compiler 编译好指令后将指令信息交给解析器 Parser 解析,Parser 更新初始值并向 Watcher 订阅数据的变化,Observer 监测到数据的变化然后反馈给 Watcher ,Watcher 再将变化结果通知 Updater 找到对应的刷新函数进行视图的刷新。

上述流程如图所示:

下文就介绍下这五个模块实现的基本原理(代码只贴重点部分,完整的实现请到我的 Github 翻阅)

1. 编译模块 Compiler

Compiler 的职责主要是对元素的每个节点进行指令的扫描和提取。因为编译和解析的过程会多次遍历整个节点树,所以为了提高编译效率在 MVVM 构造函数内部先将 element 转成一个文档碎片形式的副本 fragment 编译对象是这个文档碎片而不应该是目标元素,待全部节点编译完成后再将文档碎片添加回到原来的真实节点中。

vm.complieElement 实现了对元素所有节点的扫描和指令提取:

vm.compileAllNodes 方法将会对 this.$unCompileNodes 中的每个节点进行编译(将指令信息交给 Parser ),编译完一个节点后就从缓存队列中移除它,同时检查 this.$unCompileNodes.length 当 length === 0 时说明全部编译完成,可以将文档碎片追加到真实节点上了。

2. 指令解析模块 Parser

JavaScript数据绑定实现一个简单的 MVVM 库(js绑定onchange)

当编译器 Compiler 把每个节点的指令提取出来后就可以给到解析器解析了。每一个指令都有不同的解析方法,所有指令的解析方法只要做好两件事:一是将数据值更新到视图上(初始状态),二是将刷新函数订阅到 Model 的变化监测中。这里以解析 v-text 为例描述一个指令的大致解析方法:

3. 数据订阅模块 Watcher

上个例子,Watcher 提供了一个 watch 方法来对数据变化进行订阅,一个参数是模型字段 model 另一个是回调函数,回调函数是要通过 Observer 来触发的,参数传入新值 last 和 旧值 old , Watcher 拿到新值后就可以找到 model 对应的回调(刷新函数)进行更新视图了。model 和 刷新函数是一对多的关系,即一个 model 可以有任意多个处理它的回调函数(刷新函数),比如: v-text="title" 和 v-html="title" 两个指令共用一个数据模型字段。

添加数据订阅 watcher.watch 实现方式为:

当数据模型的 field 字段发生改变时,Watcher 就会触发缓存数组中订阅了 field 的所有回调。

4. 数据监听模块 Observer

Observer 是整个 mvvm 实现的核心基础,看过有一篇文章说 O.o (Object.observe) 将会引爆数据绑定革命,给前端带来巨大影响力,不过很可惜,ES7 草案已经将 O.o 给废弃了!目前也没有浏览器支持!所幸的是还有 Object.defineProperty 通过拦截对象属性的存取描述符(get 和 set) 可以模拟一个简单的 Observer :

然后还有个问题就是数组操作 ( push, shift 等) 该如何监测?所有的 MVVM 框架都是通过重写该数组的原型来实现的:

这个实现方式是从 vue 中参考来的,觉得用的很妙,不过数组的 length 属性是不能够被监听到的,所以在 MVVM 中应避免操作 array.length

5. 视图刷新模块 Updater

Updater 在五个模块中是最简单的,只需要负责每个指令对应的刷新函数即可。其他四个模块经过一系列的折腾,把最后的成果交给到 Updater 进行视图或者事件的更新,比如 v-text 的刷新函数为:

v-bind:style 的刷新函数:

双向数据绑定的实现

表单元素的双向数据绑定是 MVVM 的一个最大特点之一:

其实这个神奇的功能实现原理也很简单,要做的只有两件事:一是数据变化的时候更新表单值,二是反过来表单值变化的时候更新数据,这样数据的值就和表单的值绑在了一起。

数据变化更新表单值利用前面说的 Watcher 模块很容易就可以做到:

表单变化更新数据只需要实时监听表单的值得变化事件并更新数据模型对应字段即可:

其他表单 radio, checkbox 和 select 都是一样的原理。

以上,整个流程以及每个模块的基本实现思路都讲完了,第一次在社区发文章,语言表达能力不太好,如有说的不对写的不好的地方,希望大家能够批评指正!

结语

折腾这个简单的 mvvm.js 是因为原来自己的框架项目中用的是 vue.js 但是只是用到了它的指令系统,一大堆功能只用到四分之一左右,就想着只是实现 data-binding 和 view-refresh 就够了,结果没找这样的 javascript 库,所以我自己就造了这么一个轮子。

虽说功能和稳定性远不如 vue 等流行 MVVM 框架,代码实现可能也比较粗糙,但是通过造这个轮子还是增长了很多知识的 ~ 进步在于折腾嘛!

目前我的 mvvm.js 只是实现了最本的功能,以后我会继续完善、健壮它,如有兴趣欢迎一起探讨和改进~

Javascript实现苹果悬浮虚拟按钮 Javascript实现苹果悬浮虚拟按钮直接引入代码到页面即可代码有部分冗余的地方,有兴趣的小伙伴可也自己修改如果有什么BUG记得评论告诉我哦web-touch.jsvar

javascript原生ajax写法分享 ajax:一种请求数据的方式,不需要刷新整个页面;ajax的技术核心是XMLHttpRequest对象;ajax请求过程:创建XMLHttpRequest对象、连接服务器、发送请求、接收

JavaScript实现图片自动加载的瀑布流效果 先给大家展示下效果图:向下滑动网页的时候能够自动加载图片并显示。盛放图片的盒子模型如下:divclass="box"divclass="box_img"imgsrc="Img/8.jpg"/div/div设置img-

标签: js绑定onchange

本文链接地址:https://www.jiuchutong.com/biancheng/373419.html 转载请保留说明!

上一篇:JS表单验证的代码(常用)(js表单验证代码Email)

下一篇:Javascript实现苹果悬浮虚拟按钮(js实现apply函数)

  • 增值税销项进项什么意思
  • 所得税可以弥补几年
  • 新车车船税怎么交
  • 债券的利益
  • 红字冲回账务处理
  • 计提工资时金额是应发工资还是实发工资
  • 股东投入资金大,但不想成为法人
  • 劳动仲裁经济补偿金的事实和理由
  • 企业期货投资收益何时记账的
  • 所有的企业都能采用免费策略
  • 买房报销
  • 事业单位收到增值税专用发票抵扣联怎么办
  • 营改增后建筑业怎么开票
  • 专票丢了可以拿复印件在所得税前列支吗
  • 集体公司改制
  • 公益性生物资产有哪些
  • 普票需要缴纳印花税吗
  • 在租的土地上建房
  • windows全部禁用
  • 小规模减免的增值税汇算清缴
  • 暂估应付账款是什么科目
  • 1000元的打印机双十一满减可以减150吗少
  • 房产税从租计征按月还是按季
  • 如何制作win7系统u盘安装盘
  • 固定资产计提折旧的原则
  • 什么票据行为是合法的
  • 特许权使用费税前扣除标准
  • PHP:imagetruecolortopalette()的用法_GD库图像处理函数
  • 职工教育经费支出包括哪些内容
  • 废旧物资发票抵扣
  • vuewatch监听对象及对应值的变化
  • 企业经费独立使用的原因
  • 房贷计算器搜房网
  • opencv.
  • 前端传给后端
  • 【深度学习】详解 MAE
  • php中&&什么意思
  • 职工补贴包括哪些?
  • 企业和银行对账多久对一次
  • 开票显示税收分录怎么办
  • 国外公司给国内个人汇款
  • phpcms怎么样
  • SQLserver数据库的while附近有语法错误,应为AS
  • 帝国cms会员发布信息数量
  • 累计增长率如何计算公式
  • 离岸价的含义
  • sql server 2008数据库没有备份文件恢复
  • 教育培训行业成功案例
  • 员工公交费补贴怎么入账
  • 偶然所得代扣代缴个人所得税会计分录
  • 员工请假扣款怎么做分录
  • 商贸企业如何结转已销商贸成本
  • 结转费用后利润怎么算
  • 发票金额与实际金额不符怎么举报
  • 实缴出资未注明投资款
  • 企业防止股权收益的措施
  • 飞机票退票费如何开票
  • 车票抵扣填在申请表哪里
  • 旅行社代订的机票可以抵扣吗
  • aspnet开发和运行环境
  • mac怎么使用自动切换输入法
  • centos怎么看硬盘
  • freebsd怎么安装软件
  • 键盘设施
  • 服务器centos版本选择
  • 电脑运行慢怎么办?
  • win10怎么设置开机启动软件
  • win10正版免费升级
  • win7系统搜索在哪
  • unity3d 游戏开发 消息通信
  • 初识年岁尚温柔 小说 免费
  • 浅谈jquery中next与siblings的区别
  • shell打开日志文件
  • jquery 遍历
  • 刷医保的网络可以用外网吗
  • 南通买房首付规定
  • 北京社保三方协议
  • 买车没有按时交车怎么办
  • 全国城管改革什么时候结束
  • 商住两用房出售要交契税吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设