前端MVVM框架设计及实现(一)
最近抽出点时间想弄个dom模块化的模板引擎,不过现在这种都是MVVM自带的,索性就想自己造轮子写一个简单的MVVM框架了
借鉴的自然还是从正美的avalon开始了,我记得还是去年6月写过一个系列的avalon源码分析的,不过那时候0.7版本,不够健全,现在已经好太多了
框架是面向一个领域,提供一套解决方案,那么我们用前端的MVVM能为我们带来什么便利?
- 关注点分离
- 操作数据即操作DOM
- 动态模板
关注点分离是MVVM与身俱来的,操作数据即操作DOM,是VM中的访问器带来的,动态模板是流程绑定实现的。
关于MV*的讨论太多了,这里不在讨论,我们重点就是分析如何实现前端MVMM框架
Avalon 地址 https://github.com/RubyLouvre/avalon
学会MVVM需要先会哪些东西?
1. javascript语言基础(作用域,原型链,闭包等等)
2. 简单设计模式,基本的数据结构
3. 阅读或者写过jQuery源码
为什么要这样说呢,因为avalon就是这些东东的综合体!
我是以avalon为蓝本,按照作者是思路模仿实现的,当然avalon的代码有4000多行,新手如果去学习的话估计无从下手,也力不从心
为什么呢?简单的说实现的手段有点另类,写的代码有点狂野(请原谅我不知道如何形容),不过用户体验倒是不错!
简单的看下代码结构
<div ms-controller="box"> <div style=" background: #a9ea00;" ms-css-width="w" ms-click="click"></div> <p>{{ w }}p> </div> <script> avalon.define("box", function(vm) { vm.w = 100; vm.click = function() { vm.w = parseFloat(vm.w) + 10; } }) </script>
针对这个代码结构,我们要明白:
1:为什么要自定义大量标记(声明式绑定)
这就是MVVM 最原始的意义,数据逻辑展现分离。表现就是 数据 js逻辑代码 htmlcss展现
所以再HTML里加结构是自然而然的事情,如果html都用js生成,那就跟mvvm搭不上边
2:avalon.define里面为什么不需要操作dom?
在MVVM中,数据是核心,由于VM与V之间的双向绑定,操作了VM中的数据(当然只能是监控属性),就会同步到DOM,我们透过DOM事件监控用户对DOM的改动,也会同步到VM。
本章我们就实现第一步:搭建基本的分层结构,实现双向通知机制
第一版实现:300行代码,请对照分析看源码 https://github.com/JsAaron/aaMVVM
针对上面2个问题,我们看看如何才能做到操作数据即操作dom呢?
简单的说一下实现是思路:大家可以down下git的aaMVVM对照下,比原版的4000行代码友爱多了!
我们知道在MVVM中,M只是一个过客,它与其他表示业务状态的东西融入VM(ViewModel)中。ViewModel是一个状态的集合,当然还拖家带口监控着大量的回调
所以ViewModel就承载的几乎所有的功能,在avalon中ViewModel就包含所有的数据与方法的定义,沟通着V与M,起到承上启下的作用~
视图模型如何与数据跟视图关联起来?
通过avalon.define定义的vm中的属性与方法都与对应的html结构中的标记有映射关系,所以改变vm中的数据与之关联的dom就会自动刷新
分析下
vm.w = 100
当模型的数据改变为100时,对应的视图中div的宽度为100, 文本<p>100</p> ,可见修改一个数据在同一个控制器内与之关联的2个映射动作都将会修改
一个是css操作,一个是text赋值
从这个操作我们可以大胆推测下vm.v中应该有一个列表,记录了当前控制器下对应的映射操作(多个)
为了实现set与get方法,avalon也类似emberjs,采用了Object.defineProperty
我用最简单的代码模拟下实现
也就是说
vm.w = 100 即要修改style也要修改p,就是一对多的关联方式
所以在avalon中针对每一个监控属性,都会生成set与get的访问控制器,那么在每一个监控属性的访问控制器里面都会有一个
accessor[subscribers] = [] //订阅者数组,这样的东东来存放与之相关的依赖
当我们触发 vm.w = 100时,就会触发w:set方法,取出accessor[subscribers]中的依赖,从而各执执行,这样就实现了依赖执行了
对应的方法:自动更新自身的依赖
//通知依赖于这个访问器的订阅者更新自身 function notifySubscribers(accessor) { var list = accessor[subscribers] if (list && list.length) { var args = [].slice.call(arguments, 1) for (var i = list.length, fn; fn = list[--i];) { var el = fn.element fn.handler(fn.evaluator.apply(0, fn.args || []), el, fn) } } }
上面只是简单的思路,真正实现的时候真要做到大而全的框架,考虑的问题可不是那么简单的事
1 框架是怎么解释声明式绑定的语法
2 如何把解析后的语法生成对应的处理句柄
3 用户的定义如何生成vm模型
4 如何收集这些依赖
5 如何自动更新依赖映射
GitHub上会同步更新最新的实现,。。。敬请关注~
相关文章
- 数据透视表上线!如何在纯前端实现这个强大的数据分析功能?
- 一个工业级、跨平台、轻量级的 tcp 网络服务框架:gevent
- 前端框架bootstrap和layui有什么区别
- Pytest(18)pytest接口自动化完整框架思维导图[通俗易懂]
- 前端框架:第三章:NodeJS的安装与配置
- 关于vue-admin-work后台前端管理框架重大升级
- 最新版后台前端管理系统框架: vue-admin-work-p
- 4-Bootstrap前端框架
- 支持JDK19虚拟线程的web框架,上篇:体验
- 支持JDK19虚拟线程的web框架,之三:观察运行中的虚拟线程
- 前端三大框架之Vue-day01
- 前端三大框架之Vue-day02
- 前端三大框架之Vue-day04
- 测试之路 pytest接口自动化框架扩展-创建用例文件
- 前端Vue框架面试题大全
- 【数据挖掘】数据挖掘简介 ( 6 个常用功能 | 数据挖掘结果判断 | 数据挖掘学习框架 | 数据挖掘分类 )
- 【Java 注解】自定义注解 ( 使用注解实现简单测试框架 )
- 调查:React 仍然是使用最广泛的前端框架,TypeScript 是优先选项
- Android 常用的ORM框架详解手机开发
- java中RESTful 的实现框架详解架构师
- 使用Oracle ADF框架来推动快速低成本应用开发(oracleadf框架)
- Linux驱动开发:简易框架使用指南(linux驱动使用)
- 使用 Yii 框架实现 Redis(yii使用redis)
- Spring框架问题分析
- 面向企业的Net框架开发与Oracle集成(net框架oracle)
- JS前端框架关于重构的失败经验分享
- Javascript前端UI框架Kit使用指南之kitjs事件管理
- jQuery前端框架easyui使用Dialog时bug处理