<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1 class="disp"></h1>
    <h2 class="disp"></h2>
    <h3 id="d3" class='disp'></h3>
    <input type="text" id="inp1"></input>
    <input type="text" id='inp2'></input>
    <input type="text" id='inp3'></input>
    <script>
        var man = { name: 'zhang' , age: 1 };
        function bind(obj, key, selector, prop, event = undefined) {
            debugger
            var els = document.querySelectorAll(selector);
            var value_1 = obj[key];
            Array.prototype.slice.call(els).forEach(function (el) {
                if (event) { el.addEventListener(event, function () { obj[key] = el[prop]; }) }
                if (!obj.__ep__) obj.__ep__ = {};
                Object.defineProperty(obj, "__ep__", { enumerable: true });
                if (!obj.__ep__[key]) {
                    obj.__ep__[key] = [];
                    obj.__ep__[key].push({ el: el, prop: prop });
                    Object.defineProperty(obj, key, {
                        get: function () { return obj.__ep__[key].value },
                        set: function (value) {
                            obj.__ep__[key].value = value;
                            obj.__ep__[key].forEach(ep => { ep.el[ep.prop] = value });
                        }
                    })
                } else { obj.__ep__[key].push({ el: el, prop: prop }); }
                Object.defineProperty(obj, "__ep__", { enumerable: false });
            })
            obj[key] = value_1;
        }
        bind(man, 'name', '#inp1', 'value', 'input');
        bind(man, 'name', '#inp2', 'value', 'change');
        bind(man, 'name', '.disp', 'innerHTML');
        bind(man,'age','#inp3','value','input')
        bind(man,'age','#d3','innerHTML')
        //document.body.removeChild(document.querySelector('#inp1'))
    </script>
</body>
</html>

尝试 javascript 一对多 双向绑定器的更多相关文章

  1. javascript中的双向绑定

    阅读目录 一:发布订阅模式实现数据双向绑定 二:使用Object.defineProperty 来实现简单的双向绑定. 前言: 双向数据绑定的含义:可以将对象的属性绑定到UI,具体的说,我们有一个对象 ...

  2. JavaScript实现简单的双向绑定

    很多的前端框架都支持数据双向绑定了,最近正好在看双向绑定的实现,就用Javascript写了几个简单的例子. 几个例子中尝试使用了下面的方式实现双向绑定: 发布/订阅模式 属性劫持 脏数据检测 发布/ ...

  3. Angular11 模板表单、响应式表单（自定义验证器）、HTTP、表单元素双向绑定

    1 模板表单 模型通过指令隐式创建 技巧01:需要在模块级别引入 FormsModule ,通常在共享模块中引入再导出,然后在需要用到 FormsModule 的模块中导入共享模块就可以啦 impor ...

  4. JavaScript实现数据的双向绑定

    接触到Angulr.js和Vue.js后,提到最多的就是双向绑定 下面将用JavaScript实现数据的双向绑定 <!DOCTYPE html> <html> <head ...

  5. Vue双向绑定的实现原理系列（四）：补充指令解析器compile

    补充指令解析器compile github源码 补充下HTML节点类型的知识: 元素节点 Node.ELEMENT_NODE(1) 属性节点 Node.ATTRIBUTE_NODE(2) 文本节点 N ...

  6. Proxy-代理器（预计vue3.0实现双向绑定的方式）

    todo 常见的基于数据劫持的双向绑定有两种实现,一个是目前Vue在用的Object.defineProperty,另一个是ES2015中新增的Proxy,而Vue的作者宣称将在Vue3.0版本后加入 ...

  7. 【Vue】-- 数据双向绑定的原理 --Object.defineProperty()

    Object.defineProperty()方法被许多现代前端框架(如Vue.js,React.js)用于数据双向绑定的实现,当我们在框架Model层设置data时,框架将会通过Object.def ...

  8. 前端数据双向绑定原理:Object.defineProperty()

    Object.definedProperty方法可以在一个对象上直接定义一个新的属性.或修改一个对象已经存在的属性,最终返回这个对象. Object.defineProperty(obj, prop, ...

  9. Vue.js双向绑定的实现原理和模板引擎实现原理（##########################################）

    Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...

随机推荐

  1. 感知机和BP神经网络

    一.感知机 1.感知机的概念 感知机是用于二分类的线性分类模型,其输入是实例的特征向量,输出是实例的类别,类别取+1和-1二个值,+1代表正类,-1代表负类.感知机对应于输入空间(特征空间)中将实例分 ...

  2. 阿里云上搭建git

    这篇文章我就来介绍一下如何在一台全裸的阿里云主机上搭建自己的git服务器. 1. 安装git 首先安装git,一般而言,现在的服务器已经内置了git安装包,我们只需要执行简单的安装命令即可安装.比如: ...

  3. 01-背包---P2663 越越的组队

    P2663 越越的组队 题解 是这题数据水还是...(数据怎么知道我人数有没有超一半啊) 简化题目: 把n个数分成两组,使得较小的一组在不超过n个数总和一半的情况下和最大 (较小的一组之和肯定不超过总 ...

  4. 16Flutter中的路由 基本路由 基本路由跳转传值(上)

    /* Flutter中的普通路由.普通路由传值.命名路由.命名路由传值 Flutter中的路由通俗的讲就是页面跳转.在Flutter中通过Navigator组件管理路由导航. 并提供了管理堆栈的方法. ...

  5. 07-08 Flutter仿京东商城项目 商品分类页面布局：Flutter仿京东商城项目 商品分类页面数据渲染

    Flutter实战(交流群:452892873) 本项目是一个实战项目,根据目录建文件,并复制从第一节到最新更新的文章,可以构成完整的一个请求后台数据的项目: CateModel.dart class ...

  6. Shell脚本执行的四种方法

    (1).bash(或sh) [脚本的相对路径或绝对路径] [xf@xuexi ~]$ cat a.sh #!/bin/bash echo "hello world!" [xf@xu ...

  7. TreeView如何实现选中的节点上移或下移 [问题点数：20分，结帖人nww2002]

    在TreeView中,如何实现选中一节点,右键点击上移或下移 TTreeNode.MoveTo() 一.获得Tree上的结点var NowNode : TTreeNode;begin  NowNode ...

  8. Spring Boot后台运行

    #!/bin/bash nohup java -jar -Dspring.profiles.active=prop app-0.0.1.jar > app.log 2>&1 &am ...

  9. LomBok插件--模型类注解

    Data注解,ToString注解都是Lombok提供的注解. Lombok是一个实用的java工具,使用它可以消除java代码的臃肿,Lombok提供一系列的注解,使用这些注解可 以不用定义gett ...

  10. 【Python】机器学习之单变量线性回归 利用批量梯度下降找到合适的参数值

    [Python]机器学习之单变量线性回归 利用批量梯度下降找到合适的参数值 本题目来自吴恩达机器学习视频. 题目: 你是一个餐厅的老板,你想在其他城市开分店,所以你得到了一些数据(数据在本文最下方), ...