<!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. Mybatis 传入多个参数查询数据 (3种方法)

    第一种方案 DAO层的函数方法 public User selectUser(String name,String area); 对应的Mapper.xml <select id="s ...

  2. tomcat配置使用log4j管理日志

    从tomcat官网下载和tomcat对应的tomcat-juli.jar和tomcat-juli-adapters.jar,从log4j官网下载log4j的jar包(我用的是log4j-1.2.17. ...

  3. 在win10上使用premake工具和vs2017编译运行Box2D源码和Testbed

    1.从github上下载Box2D源码的zip包 2.解压缩zip包 3.从premake网站下载premake5工具,解压后得到premake5.exe 4.将premake5.exe拷贝到Box2 ...

  4. tf.contrib.layers.fully_connected参数笔记

    tf.contrib.layers.fully_connected 添加完全连接的图层. tf.contrib.layers.fully_connected(    inputs,    num_ou ...

  5. Vulnhub-XXE靶机学习

    ------------恢复内容开始------------ 前两天在微信公众号上看见了这个XXE靶场,就想试一试,虽然网上关于这个的文章已经写了太多太多了,但还是要写出来划划水,233333333, ...

  6. OpenCV.3.4.6_VS2015&cmake编译x86版本的bin&lib

    ZC:<<OpenCV3编程入门>> 的 2.2.2 中也有该内容的讲解 1.参考网址:opencv3.3.0+vs2015+cmake编译opencv x86 - wowo的 ...

  7. 通过IP得到IP所在地省市

    /// <summary> /// 通过IP得到IP所在地省市(Porschev) /// </summary> /// <param name="ip&quo ...

  8. linux中alarm函数和pause函数详解实例

    alarm(time);执行之后告诉内核,让内核在time秒时间之后向该进程发送一个定时信号,然后该进程捕获该信号并处理:pause()函数使该进程暂停让出CPU,但是该函数的暂停和前面的那个slee ...

  9. 在java web 工程中实现登录和安全验证

    登录验证代码 package security; import java.io.IOException; import javax.servlet.ServletException; import j ...

  10. last 和 lastb 命令

    NAME last - show listing of last logged in users 数据源:/var/log/wtmp 文件 lsstb - show listing of last l ...