一、两个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实现双向数据绑定的更多相关文章

  1. 用原生 JS 实现双向绑定及应用实例

    写在前面: 所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更也能实时展现到界面.angular封装了双向绑定的方法,使双向绑定变得十分简单.但是在有些场景下(比如下面那个场景),不能使用 ...

  2. 真正的原生JS数据双向绑定(实时同步)

    真正的原生JS数据双向绑定(实时同步) 接触过vue之后我感觉数据双向绑定实在是太好用了,然后就想着到底是什么原理,今天在简书上看到了一位老师的文章 js实现数据双向绑定 然后写出了我自己的代码 wi ...

  3. 原生js实现数据双向绑定

    最近接触了vue,在谈到vue等等的mvvm框架之前,先了解什么是数据双向绑定以及如何利用原生JS实现数据双向绑定 单向数据绑定 指先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HT ...

  4. 原生js实现数据的双向绑定

    原生js实现数据的双向绑定 需要了解的属性是原色js的Object.definePrototype(obj,pop,descript); obj:被构造的对象 pop:被构造的对象的属性,创建对象或修 ...

  5. js实现一个简单的响应式双向数据绑定

    一,基本原理 我们这里使用了对象中的一个特殊属性:访问器属性,这个属性不能在对象中设置,而是必须通过defineProperty()方法单独定义. 我们首先定义一个函数: var obj = { }; ...

  6. Angular JS - 3 - Angular JS 双向数据绑定

    一 .数据绑定 1. 数据绑定: 数据从一个地方A转移(传递)到另一个地方B, 而且这个操作由框架来完成2. 双向数据绑定: 数据可以从View(视图层)流向Model(模型,也就是数据), 也可以从 ...

  7. 原生js实现 vue的数据双向绑定

    原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...

  8. JS 双向数据绑定、单项数据绑定

    简单的双向数据绑定 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. JavaScript实现简单的双向数据绑定

    什么是双向数据绑定 双向数据绑定简单来说就是UI视图(View)与数据(Model)相互绑定在一起,当数据改变之后相应的UI视图也同步改变.反之,当UI视图改变之后相应的数据也同步改变. 双向数据绑定 ...

随机推荐

  1. 爬虫保存cookies时重要的两个参数（ignore_discard和ignore_expires）的作用

    两个参数的作用: 官方的解释: ignore_discard: save even cookies set to be discarded. ignore_expires: save even coo ...

  2. MessagePack for C＃

    MessagePack for C# 快速序列化组件MessagePack介绍   简介 MessagePack for C#(MessagePack-CSharp)是用于C#的极速MessagePa ...

  3. Andrew Ng机器学习公开课笔记 -- 线性回归和梯度下降

    网易公开课,监督学习应用.梯度下降 notes,http://cs229.stanford.edu/notes/cs229-notes1.pdf 线性回归(Linear Regression) 先看个 ...

  4. decltype类型指示符

    C++11新标准引入第二种类型说明符decltype,它的作用是选择并返回操作数的数据类型. 编译器分析表达式并得到它的类型,却不实际计算表达式的值: decltype(f()) sum = x;// ...

  5. C# - 操作符

    操作符(Operator) C#的操作符是一种告诉编译器执行计算.逻辑判断的符号. default(x) 获取类型的默认值,x是类型.虽然可以为任意类型使用此操作符,但此操作符主要用于泛型,在不确定泛 ...

  6. Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column

    安装了mysql5.7.19后,执行语句中只要含有group by 就会报这个错 [Err] 1055 - Expression #1 of ORDER BY clause is not in GRO ...

  7. 【原创】大数据基础之Hadoop（3）yarn数据收集与监控

    yarn常用rest api 1 metrics # curl http://localhost:8088/ws/v1/cluster/metrics The cluster metrics reso ...

  8. nmap简介和使用

    文章链接:https://blog.csdn.net/m1585761297/article/details/80015726 参考链接:https://www.cnblogs.com/nmap/p/ ...

  9. iOS 中的特殊字面量表示方法

    转义字符\0(空字符).\\(反斜线).\t(水平制表符).\n(换行符).\r(回车符).\"(双引号).\‘(单引号).单字节 Unicode 标量,写成\xnn,其中nn为两位十六进制 ...

  10. Python--抽象类接口类

    一. 继承有两种用途: """ 一:继承基类的方法,并且做出自己的改变或者扩展(代码重用) 二:声明某个子类兼容于某基类,定义一个接口类Interface,接口类中定义了 ...