js最简单的双向绑定实例讲解

 更新时间:2018年01月02日 14:26:10   转载 作者:专注前端30年  
下面小编就为大家分享一篇js最简单的双向绑定实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

把代码复制放到页面里面运行看一下效果就好了

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<input type="text" id="myinput" >
<script>
  function watch(obj,key,callback) {
    var old = obj[key];
    Object.defineProperty(obj,key,{
      set:function(val){
        var oldVal = old;
        old = val;
        callback(val,oldVal,this);
      },
      get:function(){
        return old;
      }
    });
  }
  var input = document.getElementById("myinput");
  var obj = {};
  watch(obj, "input",function (val) {
    input.value = val;
    console.log("这里是不管view层,还是module层修改后的回调,最后设置的值是"+val);
  });
  input.onkeyup = function () {
    obj.input = input.value;
  };
</script>
</body>
</html>

代码测试

修改了input内的值,会看到控制台打印出新的值

在控制台修改obj.input的值,input框内的值也会跟着改变,也会触发事件,获取新值

以上这篇js最简单的双向绑定实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • JavaScript如何获取数组最大值和最小值

    JavaScript如何获取数组最大值和最小值

    这篇文章主要介绍了JavaScript如何获取数组最大值和最小值,需要的朋友可以参考下
    2015-11-11
  • JS制作图形验证码实现代码

    JS制作图形验证码实现代码

    这篇文章主要为大家详细介绍了JS制作图形验证码实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • 浅谈Webpack核心模块tapable解析

    浅谈Webpack核心模块tapable解析

    这篇文章主要介绍了浅谈Webpack核心模块tapable解析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • JS本地刷新返回上一页代码

    JS本地刷新返回上一页代码

    返回上一页并刷新在此功能有利于用户的体验,是每一个web开发人员所必备的一项,这篇文章主要介绍了JS本地刷新返回上一页代码,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • Cpage.js给组件绑定事件的实现代码

    Cpage.js给组件绑定事件的实现代码

    Cpage.js是一款轻量级的Mvvm框架,使用TypeScript(JavaScript的超集)开发。下面通过本文给大家分享Cpage.js给组件绑定事件的实现代码,需要的的朋友参考下吧
    2017-08-08
  • Javascript变量函数浅析

    Javascript变量函数浅析

    在javascript变量中可以存放两种类型的值:原始值和引用值。原始值存储在栈上的简单字段,也就是值直接存储在变量所标示的位置内。
    2011-09-09
  • JavaScript实现二分查找实例代码

    JavaScript实现二分查找实例代码

    二分查找的前提为:数组、有序。这篇文章主要介绍了JavaScript实现二分查找实例代码,需要的朋友可以参考下
    2017-02-02
  • webpack4 处理SCSS的方法示例

    webpack4 处理SCSS的方法示例

    这篇文章主要介绍了webpack4处理SCSS的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 嵌入式iframe子页面与父页面js通信的方法

    嵌入式iframe子页面与父页面js通信的方法

    这篇文章主要介绍了嵌入式iframe子页面与父页面js通信的方法,实例分析了嵌入式iframe子页面与父页面js通信的常用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-01-01
  • 一个Js文件函数中调用另一个Js文件函数的方法演示

    一个Js文件函数中调用另一个Js文件函数的方法演示

    这篇文章主要介绍了一个Js文件函数中调用另一个Js文件函数的方法,两个javascript文件中相互调用函数,主要是将引入的Js文件代码放在</body>下面。具体操作方法可查看下文,需要的朋友可以参考下
    2017-08-08

最新评论