编程 Javascript

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

Posted in Javascript onJanuary 02, 2018

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

<!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最简单的双向绑定实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

专注前端30年

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

基于JQuery的6个Tab选项卡插件

Sep 03 Javascript

如何让div span等元素能响应键盘事件操作指南

Nov 13 Javascript

关于火狐(firefox)及ie下event获取的两种方法

Dec 27 Javascript

自己用jQuery写了一个图片的马赛克消失效果

May 04 Javascript

JavaScript中最简洁的编码html字符串的方法

Oct 11 Javascript

Bootstrap3制作图片轮播效果

May 12 Javascript

5分钟快速掌握JS中var、let和const的异同

Sep 19 Javascript

微信小程序实现无限滚动列表

May 29 Javascript

Vue实现一个无限加载列表功能

Nov 13 Javascript

详解Vue-cli3.X使用px2rem遇到的问题

Aug 09 Javascript

谈谈IntersectionObserver懒加载的具体使用

Oct 15 Javascript

webpack打包html里面img后src为“[object Module]”问题

Dec 22 Javascript

js 将canvas生成图片保存,或直接保存一张图片的实现方法

Jan 02 #Javascript

js原生方法被覆盖,从新赋值原生的方法

Jan 02 #Javascript

JS实现验证码倒计时的注册页面

Jan 02 #Javascript

使用socket.io实现简单聊天室案例

Jan 02 #Javascript

使用socket.io制做简易WEB聊天室

Jan 02 #Javascript

AngularJS实现的简单拖拽功能示例

Jan 02 #Javascript

AngularJS实现的锚点楼层跳转功能示例

Jan 02 #Javascript