MVVM 是 Model-View-ViewModel 缩写，也就是把 MVC 中的 Controller 演变成 ViewModel。Model 层代表数据模型，View 代表 UI 组件，ViewModel 是 View 和 Model 层的桥梁，数据会绑定到 viewModel 层并自动将数据渲染到页面中，视图变化的时候会通知 viewModel 层更新数据。

  1. Model: 代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑。我们可以把 Model 称为数据层，因为它仅仅关注数据本身，不关心任何行为
  2. View: 用户操作界面。当 ViewModel 对 Model 进行更新的时候，会通过数据绑定更新到 View
  3. ViewModel： 业务逻辑层，View 需要什么数据，ViewModel 要提供这个数据；View 有某些操作，ViewModel 就要响应这些操作，所以可以说它是 Model for View.

总结： MVVM 模式简化了界面与业务的依赖，解决了数据频繁更新。MVVM 在使用当中，利用双向绑定技术，使得 Model 变化时，ViewModel 会自动更新，而 ViewModel 变化时，View 也会自动变化。

实现一个简易的 MVVM 分为这么几步来

1.类 Vue：这个类接收的是一个 options。
  1.    el属性：根元素的id
  2.    data属性：双向绑定的数据。
2.Dep 类：
  1.    subNode数组：存放所依赖这个属性  的依赖，
  2.    addSub方法：添加依赖的
  3.    removeSub方法：删除，
  4.    updata方法：遍历更新它subs中的所有依赖
  5.    target静态属性：用来表示 '当前的观察者' ，依赖收集的时候可以将它添加到dep. subNode中
  7.    静态的是指向类自身，而不是指向实例对象，主要是归属不同，这是静态属性的核心
3.observe 方法：监听数据变化(参数：data，也就是 options.data)
  1.    遍历data：使用Object.defineProperty()来重写它的get和set，
  2.    使用new Dep()：实例化一个dep对象，
  3.    get时：addSub 添加 '当前的观察者Dep.target' 完成依赖收集，
  4.    set时：dep.updata 通知每一个依赖它的观察者进行更新
4.compile 方法：来将 HTML 模版和数据结合起来(参数：node 节点)。
  1.    遍历它的所有子级，判断是否有firstElmentChild
  2.        有：进行递归调用compile方法，
  3.        没有：child.innderHTML用判断是否有（/\{\{(.*)\}\}/）需要双向绑定的数据，
  4.            有：new Reg('\\{\\{\\s*' + key + '\\s*\\}\\}', 'gm')替换msg变量。
5.将 Dep.target 指向当前的这个 child，
  1.   调用this.opt.data[key]：触发这个数据的get来对当前的child进行依赖收集，
  2.        目的：下次数据变化通知child进行视图更新，
  3.    将Dep.target指为null(其实在Vue中是有一个targetStack栈用来存放target的指向的)
6.监听 document 的 DOMContentLoaded
  1.    回调函数中实例化这个Vue对象就可以了

需要注意的点：

childNodes 会获取到所有的子节点以及文本节点(包括元素标签中的空白节点)

firstElementChild 表示获取元素的第一个字元素节点，以此来区分是不是元素节点，如果是的话则调用 compile 进行递归调用，否则用正则匹配

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <title>MVVM</title>
  8.   </head>
  9.   <body>
  10.     <div id="app">
  11.       <h3>姓名</h3>
  12.       <p>{{name}}</p>
  13.       <h3>年龄</h3>
  14.       <p>{{age}}</p>
  15.     </div>
  16.   </body>
  17. </html>
  18. <script>
  19.   document.addEventListener(
  20.     "DOMContentLoaded",
  21.     function () {
  22.       let opt = { el: "#app", data: { name: "等待修改...", age: 20 } };
  23.       let vm = new Vue(opt);
  24.       setTimeout(() => {
  25.         opt.data.name = "jing";
  26.       }, 2000);
  27.     },
  28.     false
  29.   );
  30.   class Vue {
  31.     constructor(opt) {
  32.       this.opt = opt;
  33.       this.observer(opt.data);
  34.       let root = document.querySelector(opt.el);
  35.       this.compile(root);
  36.     }
  37.     observer(data) {
  38.       Object.keys(data).forEach((key) => {
  39.         let obv = new Dep();
  40.         data["_" + key] = data[key];
  42.         Object.defineProperty(data, key, {
  43.           get() {
  44.             Dep.target && obv.addSubNode(Dep.target);
  45.             return data["_" + key];
  46.           },
  47.           set(newVal) {
  48.             obv.update(newVal);
  49.             data["_" + key] = newVal;
  50.           },
  51.         });
  52.       });
  53.     }
  54.     compile(node) {
  55.       [].forEach.call(node.childNodes, (child) => {
  56.         if (!child.firstElementChild && /\{\{(.*)\}\}/.test(child.innerHTML)) {
  57.           let key = RegExp.$1.trim();
  58.           child.innerHTML = child.innerHTML.replace(
  59.             new RegExp("\\{\\{\\s*" + key + "\\s*\\}\\}", "gm"),
  60.             this.opt.data[key]
  61.           );
  62.           Dep.target = child;
  63.           this.opt.data[key];
  64.           Dep.target = null;
  65.         } else if (child.firstElementChild) this.compile(child);
  66.       });
  67.     }
  68.   }
  70.   class Dep {
  71.     constructor() {
  72.       this.subNode = [];
  73.     }
  74.     addSubNode(node) {
  75.       this.subNode.push(node);
  76.     }
  77.     update(newVal) {
  78.       this.subNode.forEach((node) => {
  79.         node.innerHTML = newVal;
  80.       });
  81.     }
  82.   }
  83. </script>

10分钟了解MVVM，实现简易MVVM的更多相关文章

  1. 不用搭环境的10分钟AngularJS指令简易入门01（含例子）

    不用搭环境的10分钟AngularJS指令简易入门01(含例子) `#不用搭环境系列AngularJS教程01,前端新手也可以轻松入坑~阅读本文大概需要10分钟~` AngularJS的指令是一大特色 ...

  2. 【云开发】10分钟零基础学会做一个快递查询微信小程序，快速掌握微信小程序开发技能（轮播图、API请求）

    大家好,我叫小秃僧 这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...

  3. 【MySQL】花10分钟阅读下MySQL数据库优化总结

    1.花10分钟阅读下MySQL数据库优化总结http://www.kuqin.com2.扩展阅读:数据库三范式http://www.cnblogs.com3.my.ini--->C:\Progr ...

  4. 对iOS后台模式最多10分钟运行时间的进一步理解

    在app进入后台时,系统初始默认是只有10s的处理时间,但如果10s不够,我们可以主动申请,网上流传最多的一个说法是10分钟. 但这种说法有个前提: 那就是iOS7之前,是这样 但从iOS7开始,我们 ...

  5. Apache Shiro系列三，概述 —— 10分钟入门

     一.介绍 看完这个10分钟入门之后,你就知道如何在你的应用程序中引入和使用Shiro.以后你再在自己的应用程序中使用Shiro,也应该可以在10分钟内搞定. 二.概述 关于Shiro的废话就不多说了 ...

  6. 破解YunFile下载间隔10分钟/下载等待30秒

    [破解10分钟间隔] 可以采用断网重连等方法重新获取IP地址,就不用再等十分钟了 [破解30秒等待] 收藏一个书签,书签地址如下 javascript:var downpage_link = docu ...

  7. JavaScript 10分钟入门

    JavaScript 10分钟入门 随着公司内部技术分享(JS进阶)投票的失利,先译一篇不错的JS入门博文,方便不太了解JS的童鞋快速学习和掌握这门神奇的语言. 以下为译文,原文地址:http://w ...

  8. emacs最简单入门，只要10分钟

    macs最简单入门,只要10分钟  windwiny @2013    无聊的时候又看到鼓吹emacs的文章,以前也有几次想尝试,结果都是玩不到10分钟就退出删除了. 这次硬着头皮,打开几篇文章都看完 ...

  9. UWP开发入门（十九）——10分钟学会在VS2015中使用Git

    写程序必然需要版本控制,哪怕是个人项目也是必须的.我们在开发UWP APP的时候,VS2015默认提供了对微软TFS和Git的支持.考虑到现在Git很火,作为微软系的程序员也不得不学一点防身,以免被开 ...

  10. U盘10分钟安装linux系统

    说来可能不信,10分钟包括创建U盘启动盘,用U盘启动,安装,不联网,不更新,不安装语言包,等装好系统再更新. Windows系统硬盘分区 如果你用的是Windows系统,现有的硬盘没有未分配的空间,需 ...

随机推荐

  1. java 分布式游戏服务器框架，集群游戏服务器框架，游戏服务器网关框架 ioGame 网络游戏服务器框架

    ioGame 国内首个基于蚂蚁金服 SOFABolt 的 java 网络游戏服务器框架:无锁异步化.事件驱动的架构设计 通过 ioGame 可以很容易的搭建出一个集群无中心节点.有状态多进程的分步式游 ...

  2. orcl between and 时间

    在网上查阅,大家都说between and两边都会包含,但是对于时期来讲,他会包含前者,不会包含后者. 也就是说求一个时间介于上周六到本周五的区间,用between and 需要计算出上周六的时间和本 ...

  3. Nginx rewrite 详解

    Nginx rewrite 详解 本篇主要介绍 nginx 的 rewrite 重定向这个功能进行 详解介绍, 以及介绍它的使用场景 1. rewrite 基本介绍 rewrite是实现URL重写的关 ...

  4. Kubernetes(k8s)存储管理之数据卷volumes(一)：volumes的引入和emptyDir数据卷

    目录 一.系统环境 二.前言 三.Docker数据卷volumes 四.Kubernetes 数据卷volumes 4.1 有状态容器和无状态容器 4.2 Kubernetes 数据卷volumes解 ...

  5. JS传值与应用

    问题提出:在进行页面书写的时候,有时候需要进行动态页面拼接,在动态拼接的时候,涉及到函数的调用,函数的传值可能是HTML标签,或者含有json的标签,这样在传值时就有可能出现问题,由于"&q ...

  6. 第四篇:前端之BOM与DOM

    前端基础之BOM和DOM   前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互 ...

  7. 手动解析word Table模块内容

    最近来了一个需求, 需要手动解析word ( 好处就是不需要安装office 以及不会有office解析的线程残留),然后就是可以自定义解析规则,比较方便 比如解析这个word里面的内容: 标题,表格 ...

  8. 【转载】EXCEL VBA 自定义排序的三种方法

    何谓自定义排序,就是按指定的顺序对数据源进行排序呗.   共分享了三种方法: 第1种方法是系统自带的OrderCustom,优点是代码简洁,缺点是自定义序列有字符长度限制(255个). 第2种方法是字 ...

  9. [机器学习] Yellowbrick使用笔记6-分类可视化

    分类模型试图在一个离散的空间中预测一个目标,即为一个因变量实例分配一个或多个类别. 代码下载 分类分数可视化工具显示类之间的差异以及一些特定于分类器的可视化评估.我们目前已经实施了以下分类器评估: 分 ...

  10. Maven初学习

    Maven初学习 摘要:本篇笔记记录了我在初学Maven是认为比较重要的一些知识点. 目录 Maven初学习 1.Maven简介 1.1.项目构建 Ant Maven Gradle 1.2.总结 2. ...