JGUI源码：实现简单MVVM单项绑定学习笔记(15)
前面几节都是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)的更多相关文章
- jQuery源码分析_工具方法（学习笔记）
expando:生成唯一JQ字符串(内部使用) noConflict():防止冲突 isReady:DOM是否加载完成(内部) readyWait:等待多少文件的计数器(内部) holdReady() ...
- zepto源码--核心方法(类数组相关)--学习笔记
从这篇起,在没有介绍到各类插件之前,后面将陆续介绍zepto对外暴露的核心方法.即$.fn={}里面的所有方法的介绍.会配合zepto的API进行介绍. 其实前面已经介绍了几个,如width,heig ...
- JGUI源码：从头开始，建一个自己的UI框架（1）
开篇 1.JGUI是为了逼迫自己研究底层点的前端技术而做的框架,之前对web底层实现一直没有深入研究,有了技术瓶颈,痛定思痛从头研究, 2.虽然现在vue技术比较火,但还在发展阶段,暂时先使用JQue ...
- Vue源码解析---数据的双向绑定
本文主要抽离Vue源码中数据双向绑定的核心代码,解析Vue是如何实现数据的双向绑定 核心思想是ES5的Object.defineProperty()和发布-订阅模式 整体结构 改造Vue实例中的dat ...
- JGUI源码：鼠标中键滚动再次优化(5)
//电脑端中键滚动事件 var mousewheel = getBrowserInfo() == "Firefox" ? "DOMMouseScroll" : ...
- 路由其实也可以很简单-------Asp.net WebAPI学习笔记（一） ASP.NET WebApi技术从入门到实战演练 C#面向服务WebService从入门到精通 DataTable与List<T>相互转换
路由其实也可以很简单-------Asp.net WebAPI学习笔记(一) MVC也好,WebAPI也好,据我所知,有部分人是因为复杂的路由,而不想去学的.曾经见过一位程序猿,在他MVC程序中, ...
- 从源码来理解slf4j的绑定，以及logback对配置文件的加载
项目中的日志系统使用的是slf4j + logback.slf4j作为一个简单日志门面,为各种loging APIs(像java.util.logging, logback, log4j)提供一个简单 ...
- JGUI源码：Accordion鼠标中键滚动和手机端滑动实现(2)
本文是抽屉组件在PC端滚动鼠标中键.手机端滑动时,滚动数据列表实现方法,没有使用iscroll等第三方插件,支持火狐,谷歌,IE8+等浏览器. 演示在:www.jgui.com Github地址:ht ...
- （二十三）原型模式详解（clone方法源码的简单剖析）
作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. 原型模式算是JAVA中最简单 ...
随机推荐
- 利用ZYNQ SOC快速打开算法验证通路（6）——利用AXI总线实时配置sysGen子系统
利用ZYNQ验证算法的一大优势在于,可以在上位机发送指令借助CPU的控制能力和C语言易开发特点,实时配置算法模块的工作模式.参数等对来对其算法模块性能进行全面的评估.最重要的是无需重新综合硬件模块. ...
- SQL server 2017使用教程
1.安装: 从https://www.microsoft.com/en-us/sql-server/sql-server-downloads官网下载sql server2017试用版 180天 安装完 ...
- DVWA-命令执行学习笔记
DVWA-命令执行 原理: web服务器没有对用户提交的数据进行严格的过滤,造成调用操作系统的命令或者在操作系统恶意拼接拼接命令,以达到攻击者的目的. 1.将DVWA的级别设置为low 1.2查看源代 ...
- 基于gdal的格网插值
格网插值就是使用离散的数据点创建一个栅格图像的过程.通常情况下,有一系列研究区域的离散点,如果我们想将这些点转换为规则的网格数据来进行进一步的处理,或者和其他网格数据进行合并 等处理,就需要使用格网插 ...
- javaEmail发邮件是问号乱码，已解决
寒假学习了ssm,就把之前看过的一个商城项目用ssm重构了. 然后在本地一切都正常,放到个人服务器上就凉了. 因为这个项目注册需要邮箱激活,然后就在发邮件的时候出了问题. 一.发送端口 因为源程序是用 ...
- 《重构》的读书笔记–方法列表
第5章 重构列表 5.1 重构的记录格式103 5.2 寻找引用点105 5.3 这些重构手法有多成熟106 第6章 重新组织函数 6.1 (P110)Extract Method(提炼函数) 6.2 ...
- 使用 Flask-Cache 缓存给Flask提速
https://blog.csdn.net/u013205877/article/details/78013289
- 014_zk路径过滤分析
一.线上zk访问延迟特别高需要统计一段时间内的zk写入路径top10,实现如下: #!/usr/bin/env python # -*- coding:utf-8 -*- import re,trac ...
- upstream timed out (110: Connection timed out) while reading response header from upstream, client:
遇到的问题 之前没配置下面这段,访问时候偶尔会出现 504 gateway timeout,由于偶尔出现,所以不太好排查 proxy_connect_timeout 300s;proxy_read_t ...
- phpcms不能批量更新栏目页和内容页
需要给网站根目录更加users用户的写入权限.