原生js实现双向数据绑定
一、两个model之间的双向绑定
var o = {
a: 0
}
o.b = o.a + 1;
console.log(o.a); // "0"
console.log(o.b); // "1"
//更新o.a
o.a = 5;
o.b = o.a + 1;
console.log(o.a); // "5"
console.log(o.b); // "6"
//更新o.b
o.b = 10;
o.a = o.b / 5;
o.b = o.a + 1;
console.log(o.a); // "2"
console.log(o.b); // "3"
var o = {
a: 0
}
Object.defineProperty(o, "b", {
get: function () {
return this.a + 1;
},
set: function (value) {
this.a = value / 5;
}
});
console.log(o.a); // "0"
console.log(o.b); // "1"
// 更新o.a
o.a = 5;
console.log(o.a); // "5"
console.log(o.b); // "6"
// 更新o.b
o.b = 10;
console.log(o.a); // "2"
console.log(o.b); // "3"
二、model和view之间的双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生js实现数据双向绑定</title>
</head>
<body>
<input type="text" id="J_input">
<script>
//数据层Model
var dataObj = {
nkey:'camille'
}
//视图层view
var J_input = document.getElementById('J_input');
//逻辑层viewModel
function manualBind(nkey,nvalue){
dataObj.nkey = nvalue;
J_input.value = nvalue;//属性设置
//J_input.setAttribute('value',nvalue);会直接在dom中看到属性，属于添加属性的方法。
}
/**
* 功能：改变view，更新model
* 测试方法：在文本框输入不同内容，在控制台打印dataObj.nkey，即可看到dataObj.nkey最新值。
*/
J_input.addEventListener('keyup',function(e){
manualBind('nkey',e.target.value);
},false);
/**
* 功能：改变model，更新view
* 测试方法：
* 1、在控制台写dataObj.nkey = 'username';并手动调用manualBind('nkey',dataObj.nkey);
* 2、打印document.getElementById('J_input').value;即可看到view层的变化。
*/
// manualBind('nkey','camille666');
</script>
</body>
</html>
原生js实现双向数据绑定的更多相关文章
- 用原生 JS 实现双向绑定及应用实例
写在前面: 所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更也能实时展现到界面.angular封装了双向绑定的方法,使双向绑定变得十分简单.但是在有些场景下(比如下面那个场景),不能使用 ...
- 真正的原生JS数据双向绑定(实时同步)
真正的原生JS数据双向绑定(实时同步) 接触过vue之后我感觉数据双向绑定实在是太好用了,然后就想着到底是什么原理,今天在简书上看到了一位老师的文章 js实现数据双向绑定 然后写出了我自己的代码 wi ...
- 原生js实现数据双向绑定
最近接触了vue,在谈到vue等等的mvvm框架之前,先了解什么是数据双向绑定以及如何利用原生JS实现数据双向绑定 单向数据绑定 指先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HT ...
- 原生js实现数据的双向绑定
原生js实现数据的双向绑定 需要了解的属性是原色js的Object.definePrototype(obj,pop,descript); obj:被构造的对象 pop:被构造的对象的属性,创建对象或修 ...
- js实现一个简单的响应式双向数据绑定
一,基本原理 我们这里使用了对象中的一个特殊属性:访问器属性,这个属性不能在对象中设置,而是必须通过defineProperty()方法单独定义. 我们首先定义一个函数: var obj = { }; ...
- Angular JS - 3 - Angular JS 双向数据绑定
一 .数据绑定 1. 数据绑定: 数据从一个地方A转移(传递)到另一个地方B, 而且这个操作由框架来完成2. 双向数据绑定: 数据可以从View(视图层)流向Model(模型,也就是数据), 也可以从 ...
- 原生js实现 vue的数据双向绑定
原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...
- JS 双向数据绑定、单项数据绑定
简单的双向数据绑定 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- JavaScript实现简单的双向数据绑定
什么是双向数据绑定 双向数据绑定简单来说就是UI视图(View)与数据(Model)相互绑定在一起,当数据改变之后相应的UI视图也同步改变.反之,当UI视图改变之后相应的数据也同步改变. 双向数据绑定 ...
随机推荐
- A.02.01—功能定义—一般定义
二章将属于较轻松的内容,整个过程也会主要以文字描述为主. 最常见的功能定义为按使用操作来定义,如下面的例子是最普通的: 1)用户将雨刮开关打至高速档,雨刮以高速速率刮刷 2)在电源档位为OFF时,用户 ...
- 深入理解JVM(1)——栈和局部变量操作指令
将常量压入栈的指令 aconst_null 将null对象引用压入栈iconst_m1 将int类型常量-1压入栈iconst_0 将int类型常量0压入栈iconst_1 将int类型常量1压入栈i ...
- Oracle Database 快捷版 安装 连接
Oracle Database 快捷版 11g 第 2 版 下载地址:http://www.oracle.com/technetwork/cn/database/database-technologi ...
- linux usb总线驱动(一)
目录 linux usb总线驱动框架 USB 介绍 传输类型 控制器接口 2440接口 基本流程 alloc_dev choose_address hub_port_init usb_get_devi ...
- CMDB服务器管理系统【s5day91】：如何实现允许临时修改主机名
一.sn号唯一 & 如何实现允许临时修改主机名 1.物理机 1.sn,物理机唯一 2.后台管理: 买服务器,清单:SN号,硬盘,内存... 作业:python 读取excel,xldt 3.资 ...
- Linux性能优化实战：到底应该怎样理解平均负载（02）
一.平均负载与CPU使用率并没有直接关系 1.平均负载 单位时间内,系统处于可运行状态和不可终端状态的平均进程数也就是平均活跃进程数,它和cpu使用率并没有直接关系, 可运行状态: 正在使用的cpu或 ...
- Jenkins-在windows上配置自动化部署（Jenkins+Bonobo.Git.Server）
本文配置Jenkins.git服务器采用 Bonobo.Git.Server 1. 登录后,打开Jenkins界面,新建一个任务 2. 配置信息 3. 配置git项目地址,我们先进行其他配置,等会再继 ...
- css预编译语言 sass scss（变量$var, css嵌套规则，@import规则，@extend，@mixin）
什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...
- [物理学与PDEs]第1章第6节 电磁场的标势与矢势 6.2 电磁场的标势与矢势
1. 标势.矢势: $$\beex \bea \Div{\bf B}=0&\ra \exists\ {\bf A},\st {\bf B}=\rot{\bf A},\\ \rot{\bf ...
- Android Studio生成签名文件,自动签名,以及获取SHA1和MD5值
转载请标明出处:http://blog.csdn.net/donkor_/article/details/53487133 前言: 作为谷歌在2013年为开发者提供的IDE环境工具Android St ...