首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onSeptember 17, 2019

前言

MVVM 是当前时代前端日常业务开发中的必备模式（相关框架如react，vue，angular 等）， 使用 MVVM 可以将开发者的精力更专注于业务上的逻辑，而不需要关心如何操作 dom。虽然现在都 9012 年了，mvvm 相关原理的介绍已经烂大街了，但出于学习基础知识的目的（使用 proxy 实现的 vue3.0 还在开发中）， 在参考了之前 vue.js 的整体思路之后，自己动手实现了一个简易的通过 proxy 实现的 mvvm。

本项目代码已经开源在github，项目正在持续完善中，欢迎交流学习，喜欢请点个 star 吧！

最终效果

<html>
 <body>
  <div id="app">
   <div>{{title}}</div>
  </div>
 </body>
</html>
import MVVM from '@fe_korey/mvvm';
new MVVM({
 view: document.getElementById('app'),
 model: {
  title: 'hello mvvm!'
 },
 mounted() {
  console.log('主程编译完成,欢迎使用MVVM！');
 }
});

结构概览

  • Complier 模块实现解析、收集指令，并初始化视图
  • Observer 模块实现了数据的监听，包括添加订阅者和通知订阅者
  • Parser 模块实现解析指令，提供该指令的更新视图的更新方法
  • Watcher 模块实现建立指令与数据的关联
  • Dep 模块实现一个订阅中心，负责收集，触发数据模型各值的订阅列表

流程为：Complier收集编译好指令后，根据指令不同选择不同的Parser，根据Parser在Watcher中订阅数据的变化并更新初始视图。Observer监听数据变化然后通知给 Watcher ，Watcher 再将变化结果通知给对应Parser里的 update 刷新函数进行视图的刷新。

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

模块详解

Complier

将整个数据模型 data 传入Observer模块进行数据监听

this.$data = new Observer(option.model).getData();

循环遍历整个 dom，对每个 dom 元素的所有指令进行扫描提取

function collectDir(element) {
 const children = element.childNodes;
 const childrenLen = children.length;

 for (let i = 0; i < childrenLen; i++) {
  const node = children[i];
  const nodeType = node.nodeType;

  if (nodeType !== 1 && nodeType !== 3) {
   continue;
  }
  if (hasDirective(node)) {
   this.$queue.push(node);
  }
  if (node.hasChildNodes() && !hasLateCompileChilds(node)) {
   collectDir(element);
  }
 }
}

对每个指令进行编译，选择对应的解析器Parser

const parser = this.selectParsers({ node, dirName, dirValue, cs: this });

将得到的解析器Parser传入Watcher，并初始化该 dom 节点的视图

const watcher = new Watcher(parser);
parser.update({ newVal: watcher.value });

所有指令解析完毕后，触发 MVVM 编译完成回调$mounted()

this.$mounted();

使用文档碎片document.createDocumentFragment()来代替真实 dom 节点片段，待所有指令编译完成后，再将文档碎片追加回真实 dom 节点

let child;
const fragment = document.createDocumentFragment();
while ((child = this.$element.firstChild)) {
 fragment.appendChild(child);
}
//解析完后
this.$element.appendChild(fragment);
delete $fragment;

Parser

在Complier模块编译后的指令，选择不同听解析器解析，目前包括ClassParser,DisplayParser,ForParser,IfParser,StyleParser,TextParser,ModelParser,OnParser,OtherParser等解析模块。

switch (name) {
 case 'text':
  parser = new TextParser({ node, dirValue, cs });
  break;
 case 'style':
  parser = new StyleParser({ node, dirValue, cs });
  break;
 case 'class':
  parser = new ClassParser({ node, dirValue, cs });
  break;
 case 'for':
  parser = new ForParser({ node, dirValue, cs });
  break;
 case 'on':
  parser = new OnParser({ node, dirName, dirValue, cs });
  break;
 case 'display':
  parser = new DisplayParser({ node, dirName, dirValue, cs });
  break;
 case 'if':
  parser = new IfParser({ node, dirValue, cs });
  break;
 case 'model':
  parser = new ModelParser({ node, dirValue, cs });
  break;
 default:
  parser = new OtherParser({ node, dirName, dirValue, cs });
}

不同的解析器提供不同的视图刷新函数update()，通过update更新dom视图

//text.js
function update(newVal) {
 this.el.textContent = _toString(newVal);
}

OnParser 解析事件绑定，与数据模型中的 methods字段对应

//详见 https://github.com/zhaoky/mvvm/blob/master/src/core/parser/on.ts
el.addEventListener(handlerType, e => {
 handlerFn(scope, e);
});

ForParser 解析数组

详见 https://github.com/zhaoky/mvvm/blob/master/src/core/parser/for.ts

ModelParser 解析双向绑定，目前支持input[text/password] & textarea,input[radio],input[checkbox],select四种情况的双向绑定，双绑原理：

数据变化更新表单：跟其他指令更新视图一样，通过update方法触发更新表单的value

function update({ newVal }) {
 this.model.el.value = _toString(newVal);
}

表单变化更新数据：监听表单变化事件如input,change，在回调里set数据模型

this.model.el.addEventListener('input', e => {
 model.watcher.set(e.target.value);
});

Observer

MVVM 模型中的核心，一般通过 Object.defineProperty 的 get，set 方法进行数据的监听，在 get 里添加订阅者，set 里通知订阅者更新视图。在本项目采用 Proxy 来实现数据监听，好处有三：

Proxy 可以直接监听对象而非属性

Proxy 可以直接监听数组的变化

Proxy 有多达 13 种拦截方法，查阅

而劣势是兼容性问题,且无法通过 polyfill 磨平。查阅兼容性

注意 Proxy 只会监听自身的每一个属性，如果属性是对象，则该对象不会被监听，所以需要递归监听

设置监听后，返回一个 Proxy 替代原数据对象

var proxy = new Proxy(data, {
 get: function(target, key, receiver) {
  //如果满足条件则添加订阅者
  dep.addDep(curWatcher);
  return Reflect.get(target, key, receiver);
 },
 set: function(target, key, value, receiver) {
  //如果满足条件则通知订阅者
  dep.notfiy();
  return Reflect.set(target, key, value, receiver);
 }
});

Watcher

在 Complier 模块里对每一个解析后的 Parser 进行指令与数据模型直接的绑定，并触发 Observer 的 get 监听，添加订阅者（Watcher）

this._getter(this.parser.dirValue)(this.scope || this.parser.cs.$data);

当数据模型变化时，就会触发 -> Observer 的 set 监听 -> Dep 的 notfiy 方法(通知订阅者的所有订阅列表) -> 执行订阅列表所有 Watcher 的 update 方法 -> 执行对应 Parser 的 update -> 完成更新视图

Watcher 里的 set 方法用于设置双向绑定值，注意访问层级

Dep

  • MVVM 的订阅中心，在这里收集数据模型的每个属性的订阅列表
  • 包含添加订阅者，通知订阅者等方法
  • 本质是一种发布/订阅模式
class Dep {
 constructor() {
  this.dependList = [];
 }
 addDep() {
  this.dependList.push(dep);
 }
 notfiy() {
  this.dependList.forEach(item => {
   item.update();
  });
 }
}

后记

目前该 mvvm 项目只实现了数据绑定和视图更新的功能，通过这个简易轮子的实现，对 dom 操作，proxy，发布订阅模式等若干基础知识都进行了再次理解，查漏补缺。同时欢迎大家一起探讨交流，后面会继续完善！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

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

- Author -

可鱼不是鱼

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery.position()方法获取不到值的安全替换方法
Mar 13 Javascript
javascript密码强度校验代码（两种方法）
Aug 10 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
从0开始学Vue
Oct 27 Javascript
Json按某个键的值进行排序
Dec 22 Javascript
JS实现上传图片实时预览功能
May 22 Javascript
从零开始搭建一个react项目开发
Feb 09 Javascript
使用RN Animated做一个“添加购物车”动画的方法
Sep 12 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
微信小程序页面调用自定义组件内的事件详解
Sep 12 Javascript
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
ionic+html5+API实现双击返回键退出应用
Sep 17 #Javascript
Vue的属性、方法、生命周期实例代码详解
Sep 17 #Javascript
小程序的上传文件接口的注意要点解析
Sep 17 #Javascript
微信小程序实现蒙版弹出窗功能
Sep 17 #Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 #Javascript
ionic2.0双击返回键退出应用
Sep 17 #Javascript
三步实现ionic3点击退出app程序
Sep 17 #Javascript
HAM-2000(1) 西索(1) 波段(1) 通知(159) 实用文书(952) 申请书(21) 城市猎人(1) 文书(291) 观后感(479) AngularJS(2)
You might like
PHP使用数组实现队列
2012/02/05 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
清空上传控件input file的值
2010/07/03 Javascript
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
js查错流程归纳
2012/05/04 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
jQuery学习总结之jQuery事件
2014/06/30 Javascript
JS将滑动门改为选项卡（需鼠标点击）的实现方法
2015/09/27 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
详解js删除数组中的指定元素
2018/10/31 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
python无限生成不重复(字母,数字,字符)组合的方法
2018/12/04 Python
python 获取url中的参数列表实例
2018/12/18 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
python飞机大战游戏实例讲解
2020/12/04 Python
python 实现有道翻译功能
2021/02/26 Python
印尼旅游网站：via
2017/11/12 全球购物
工程部主管岗位职责
2013/11/17 职场文书
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
运动会铅球比赛加油稿
2014/09/26 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
股东协议书范本2016
2016/03/21 职场文书
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python
MySQL数据库Innodb 引擎实现mvcc锁
2022/05/06 MySQL