前面几节都是jquery界面方面的东西，本节研究些数据方面的东西：MVVM。

MVVM由三部分组成：Model <=> ViewModel <=> View,当Model数据改变时，通知所有与Model关联的View进行数据更新。

以vuejs一个简单例子实现为例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例</title>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

</head>

<body>

<div id="app">

  <p>{{ message }}</p>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    message: 'Hello Vue.js!'

  }

})

</script>

</body>

</html>

显示效果如下

现在模拟实现这一过程，ES5,6语法以前也没怎么接触，在网上翻看大神的资料，看到一篇实现相对较完整的
https://segmentfault.com/a/1190000016236834

根据他的实现原理本文进行了简化，只模拟实现绑定过程（不能拿来用于生产环境），稍微有点javascript基础的应该都能看懂。下次面试时面试官问你原理你说可以手写一个。

网上许多文章都是观察者，订阅者一堆名词，把读者都看晕了，其实核心代码就像下面这段代码这么简单.

<body>

    <div id="app">

      <p>{{ message }}</p>

      <p>{{ message1 }}</p>

    </div>

    <div id="log"></div>

    <script>

      class JMVVM {

        constructor(p_obj) {

          this.init(p_obj);

        }

        init(p_obj) {

          $("#log").append("获取绑定对象初始化数据信息</br>");

          this.element = document.querySelector(p_obj.el);

          this.data = p_obj.data;

          $("#log").append("el:" + this.element.id + "</br>");

          for (let key in this.data) {

            let val = this.data[key];

            $("#log").append("key:" + key + "</br>");

            $("#log").append("1、给对象创建get,set方法</br>");

            let element=this.element;

            Object.defineProperty(this.data, key, {

              configurable: true,

              enumerable: true,

              get() {

                return val;

              },

              set(newVal) {

                val = newVal;

                let reg = eval("/{{([^}]*) "+key+" }}/g");

                // let reg1 =  /{{([^}]*) +key+ }}/g;

                let match;

                $("#log").append("2、替换模板</br>");//模拟，只查找一级。

                element.childNodes.forEach(childNode=>{

                    while ((match = reg.exec(childNode.textContent))) {

                        childNode.textContent=val;

                    }

                })

                // $("#log").append("2、替换模板</br>");

                // for(let children in element.childNodes)

                // while ((match = reg.exec(children.textContent))) {

                //   children.textContent=val;

                // }

              }

            });
　　　　　　　//触发set

            this.data[key] =val;

          }

        }

      }

    </script>

    <script>

    //   new Vue({

    //     el: "#app",

    //     data: {

    //       message: "Hello Vue.js!"

    //     }

    //   });

      new JMVVM({

        el: "#app",

        data: {

          message1: "Hello JMVVM.js!"

        }

      });

    </script>

  </body>

执行结果如下

上面写法比较简单，只能替换一次，因为替换后{{ message }}就不存在了，那么就应该在第一次替换成功时候将对应元素缓存下来，具体怎么实现有多种方法，如果理解的不对，欢迎大家指正。

演示地址：www.jgui.com

注释：

ES6 新增了let命令，用来声明局部变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效，而且有暂时性死区的约束。

后续:ES6对IE兼容性挺差的，如果是客户习惯使用低版本IE的话，尽量不要使用ES6或者让客户更换浏览器。

JGUI源码：实现简单MVVM单项绑定学习笔记(15)的更多相关文章

  1. jQuery源码分析_工具方法（学习笔记）

    expando:生成唯一JQ字符串(内部使用) noConflict():防止冲突 isReady:DOM是否加载完成(内部) readyWait:等待多少文件的计数器(内部) holdReady() ...

  2. zepto源码--核心方法(类数组相关)--学习笔记

    从这篇起,在没有介绍到各类插件之前,后面将陆续介绍zepto对外暴露的核心方法.即$.fn={}里面的所有方法的介绍.会配合zepto的API进行介绍. 其实前面已经介绍了几个,如width,heig ...

  3. JGUI源码：从头开始，建一个自己的UI框架（1）

    开篇 1.JGUI是为了逼迫自己研究底层点的前端技术而做的框架,之前对web底层实现一直没有深入研究,有了技术瓶颈,痛定思痛从头研究, 2.虽然现在vue技术比较火,但还在发展阶段,暂时先使用JQue ...

  4. Vue源码解析---数据的双向绑定

    本文主要抽离Vue源码中数据双向绑定的核心代码,解析Vue是如何实现数据的双向绑定 核心思想是ES5的Object.defineProperty()和发布-订阅模式 整体结构 改造Vue实例中的dat ...

  5. JGUI源码：鼠标中键滚动再次优化(5)

    //电脑端中键滚动事件 var mousewheel = getBrowserInfo() == "Firefox" ? "DOMMouseScroll" : ...

  6. 路由其实也可以很简单-------Asp.net WebAPI学习笔记（一） ASP.NET WebApi技术从入门到实战演练 C#面向服务WebService从入门到精通 DataTable与List<T>相互转换

    路由其实也可以很简单-------Asp.net WebAPI学习笔记(一)   MVC也好,WebAPI也好,据我所知,有部分人是因为复杂的路由,而不想去学的.曾经见过一位程序猿,在他MVC程序中, ...

  7. 从源码来理解slf4j的绑定，以及logback对配置文件的加载

    项目中的日志系统使用的是slf4j + logback.slf4j作为一个简单日志门面,为各种loging APIs(像java.util.logging, logback, log4j)提供一个简单 ...

  8. JGUI源码：Accordion鼠标中键滚动和手机端滑动实现(2)

    本文是抽屉组件在PC端滚动鼠标中键.手机端滑动时,滚动数据列表实现方法,没有使用iscroll等第三方插件,支持火狐,谷歌,IE8+等浏览器. 演示在:www.jgui.com Github地址:ht ...

  9. （二十三）原型模式详解（clone方法源码的简单剖析）

    作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. 原型模式算是JAVA中最简单 ...

随机推荐

  1. selenium-日志文件的使用(十二)

    概述 在自动化测试中,如果测试失败需要对错误的错误的代码或者测试case进行分析,进行分析时最好的方法是在项目中添加日志文件,通过日志文件的分析定位出现错误的原因. 这样可以保持自动化测试用例的健壮性 ...

  2. 【SpringBoot笔记】SpringBoot整合Druid数据连接池

    废话少说,按SpringBoot的老套路来. [step1]:添加依赖 <!-- 数据库连接池 --> <dependency> <groupId>com.alib ...

  3. Swift 访问控制

    1.private private访问级别所修饰的属性或者方法只能在当前类里访问. 2.fileprivate fileprivate访问级别所修饰的属性或者方法在当前的Swift源文件里可以访问. ...

  4. socket.io 出现的WebSocket is closed before the connection is established

    WebSocket is closed before the connection is established 最近socket.io是挺流行的,幼麟棋牌和一些好的开源项目也使用这个框架,在搭建其平 ...

  5. #034Python选修课第二届Turtle绘图大赛

    Pythonturtle库选修课作业 目录 目录 代码效果 题目要求 合作同学 程序实现 最初目标 实现方式 代码如下 代码效果 题目要求 具体内容可参阅课程教学网站或超星学习通. 按照2人一组,结对 ...

  6. Mysql语句删除主键的自增

    ALTER TABLE 表名MODIFY COLUMN 字段名 int(2) NOT NULL FIRST ;

  7. 通过 docker 搭建自用的 gitlab 服务

    前言 git 是当下如日中天的版本管理系统.现在如果不是工作在 git 版本管理系统之下,几乎都不好意思和人打招呼了.有很多现成的互联网的 git 服务提供给大家使用,例如号称程序员社交网络的 Git ...

  8. P1177 【模板】快速排序 题解

    本质为sort,这里我们用优先队列(堆)解决. 什么是堆? 堆 堆是一个完全二叉树,而且是每层都有规律的二叉树 规律大概是: 小根堆:最上层数的大小最小,往下每层结点都比父亲结点大,比两个儿子结点小 ...

  9. 501. Find Mode in Binary Search Tree

    Given a binary search tree (BST) with duplicates, find all the mode(s) (the most frequently occurred ...

  10. Fedora中安装VMtools步骤

    第一次玩Fedora的系统,通过VMware工具安装的一个虚拟机,由于公司要求尽可能的留有足够空间,所以安装的时候就没选开发环境选项.安装成功后,又要准备安装VMware--tools工具,在此记录安 ...