原生js实现数据双向绑定
最近接触了vue，在谈到vue等等的mvvm框架之前，先了解什么是数据双向绑定以及如何利用原生JS实现数据双向绑定
单向数据绑定
指先把模板写好，然后把模板和数据（数据可能来自后台）整合到一起形成HTML代码，然后把这段HTML代码插入到文档流里
缺点：一旦HTML代码生成就没有办法改变，如果有新数据重新传入，就必须重新把模板和数据整合到一起插入到文档流中
数据双向绑定
数据模型和视图之间的双向绑定，用户在视图上的修改会自动同步到数据模型中，同样的，如果数据模型中的值发生变化，也会同步到视图中去。
优点：无需进行类似单向数据绑定的那些CRUD操作。
最经常应用的场景：表单
缺点：应用场景有限
框架：angular js,Vue js
底层实现大概有两种：
1.手动绑定，同时使用dirty check去循环监听。（代表angular js）
2.前端数据劫持，使用define Property,(代表Vue js)
以下是一个简单的小例子，在input框里输入什么，后面就会显示什么
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="aa"/>
<span id="bb">{{hello}}</span>
<script>
var obj = {};
Object.defineProperty(obj,'hello',{
set:function(val){
document.getElementById('bb').innerHTML = val;
document.getElementById('aa').value = val;
}
});
document.getElementById('aa').onkeyup = function(e){
obj.hello = e.target.value;
};
obj.hello = "";
</script>
</body>
</html>
运行效果如下
原生js实现数据双向绑定的更多相关文章
- JS实现数据双向绑定
本文参考https://www.cnblogs.com/tianhaining/p/8425345.html 首先先说个面试题哈,就是vue中的v-model是如何实现双向数据绑定的咳咳,下面开始背诵 ...
- 原生js实现数据单向绑定
Object.defineProperty()方法直接在对象上定义一个新属性,或修改对象上的现有属性,并返回该对象. Object.defineProperty(obj, prop, descript ...
- 真正的原生JS数据双向绑定(实时同步)
真正的原生JS数据双向绑定(实时同步) 接触过vue之后我感觉数据双向绑定实在是太好用了,然后就想着到底是什么原理,今天在简书上看到了一位老师的文章 js实现数据双向绑定 然后写出了我自己的代码 wi ...
- 原生js实现数据的双向绑定
原生js实现数据的双向绑定 需要了解的属性是原色js的Object.definePrototype(obj,pop,descript); obj:被构造的对象 pop:被构造的对象的属性,创建对象或修 ...
- 原生js实现 vue的数据双向绑定
原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...
- 如何在原生微信小程序中实现数据双向绑定
官网:https://qiu8310.github.io/minapp/ 作者:Mora 在原生小程序开发中,数据流是单向的,无法双向绑定,但是要实现双向绑定的功能还是蛮简单的! 下文要讲的是小程序框 ...
- angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制
Angular.js 中的特性,双向绑定. 让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $ap ...
- vue中数据双向绑定的实现原理
vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...
- Vue数据双向绑定原理及简单实现
嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...
随机推荐
- Thrift序列化与反序列化的实现机制分析
Thrift是如何实现序死化与反序列化的,在IDL文件中,更改IDL文件中的变量序号或者［使用默认序号的情况下,新增变量时,将新增的变量不放在IDL文件的结尾,均会导致Thrift文件的反序列后无法做 ...
- web从入门开始（6）-----框架
普通框架 框架概念:就是将一个页面分割成小窗口,每个窗口都是一个网页 框架集和框架页 框架集:<frameset>:主要用来划分窗口的 框架页:<frame>:主要用来指定窗口 ...
- 转载 感受K2.Net 2003工作流解决方案
接触SourceCode公司的工作流产品K2.NET 2003有一段时间了,想把一些心得分享出来,和各位共同探讨一下,抛砖引玉,希望能对相关人士以启发. K2.Net 2003是基于微软.Net Fr ...
- 设置iPhone网页固定到桌面上的图标
<!--IOS Icon--> <link rel="apple-touch-icon-precomposed" href="@Url.Content( ...
- 模拟在内存中的数据库DataSet相关的类
这篇连着上一篇DataReader相关类. 下面两段话是在msdn官网摘下来: .NET Framework 数据提供程序是专门为数据操作以及快速.只进.只读访问数据而设计的组件.Conn ...
- mybatis的学习笔记
前几天学习了mybatis,今天来复习一下它的内容. mybatis是一个基于Java的持久层框架,那就涉及到数据库的操作.首先来提出第一个问题:java有jdbc连接数据库,我们为什么还要使用框架呢 ...
- python自动化框架(unnitest+selenium+htmlreport)
上一篇零零散散的写了一些python unnitest的一些知识,这里讲讲我在实际中使用到的自动化测试框架,算是上篇记录的补充!其实我觉得:什么框架都无所谓,关键是当如果用你的框架发现了bug,能尽量 ...
- git 远程仓库管理
要参与任何一个 Git 项目的协作,必须要了解该如何管理远程仓库.远程仓库是指托管在网络上的项目仓库,可能会有好多个,其中有些你只能读,另外有些可以写.同他人协作开发某 个项目时,需要管理这些远程仓库 ...
- 如何给sublime text3安装汉化包？so easy 哦
这是我本人亲身测试过的,肯定有效,没用的话怪我咯. 首先安装package control,然后安装汉化包即可,很简单哦!!! 1.安装package control:打开sublime,使用快捷键: ...
- C# 索引同时含有数字和字符串的集合 同时具备IList和IDictionary的特点
同时具备IList和IDictionary的特点的集合 [Serializable] public class MyCollection:IList { private readonly Dictio ...