<!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. fastadmin 后台管理中，权限设置，不同管理员，显示不同的数据

    1.https://doc.fastadmin.net/docs/controller.html

  2. Ubuntu 18.04安装Samba服务器及配置

    Ubuntu 18.04安装Samba服务器及配置 局域网下使用samba服务在Linux系统与Windows系统直接共享文件是一项很方便的操作.以Ubuntu为例配置samba服务,Linux服务器 ...

  3. LC 985. Sum of Even Numbers After Queries

    We have an array A of integers, and an array queries of queries. For the i-th query val = queries[i] ...

  4. iOS-ShareSDK的使用（转）

    官方下载ShareSDK iOS:http://sharesdk.cn/ ShareSDK社会化分享 包含“社会化分享组件”“社会化登录组件”“第三方评论和赞”三大模块,并有详尽的数据统计后台,助力移 ...

  5. DataFrame执行groupby聚合操作后，如何继续保持DataFrame对象而不变成Series对象

    刚接触pandas不久,在处理特征时,碰到一个恶心的问题:用groupby聚合后,之前的dataframe对象变成了series对象,聚合的字段变成了索引index,导致获取这些字段时很麻烦,后面发现 ...

  6. sonar汉化

  7. Spark2.4源码阅读1-Shuffle机制概述

    本文参考: a. https://www.jianshu.com/p/c46bfaa5dd15 1. shuffle及历史简介 shuffle,即"洗牌",所有采用map-redu ...

  8. 微信小程序 请求签名接口超时 踩坑路。。

    我们公司一般做开发都是先用测试机的接口调试功能,等功能都调试的差不多了,再换成线上的正式接口,因为正式接口要验证签名. 这几个功能都调试的差不多了,准备换成线上正式接口了,结果却出了问题,提示请求超时 ...

  9. 刀塔OMG塔防1.26b单机版使用方法

    使用方法 1.确保魔兽的版本为1.26以上(低版本会报错),如果版本不对用附件中的版本转换器转一下 2.把 omg.w3x 复制到 魔兽的MAPS文件夹 WarcraftIII 游戏根目录\Maps\ ...

  10. 02.02 lamp环境搭建笔记

    lamp环境 在linux中安装 apache.mysql.php三种软件环境,同时需要安装他 某些插件. cp /etc/apt/sources.list /etc/apt/sources.list ...