<!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. Oracle导入数据时出错ORA-39143:转储文件可能是原始的转储文件

    dmp文件是使用exp命令导出的,所以使用impdp导入则会报错误. 正确的导入语句为:imp sde/salis@orcl file='E:\sde.dmp' full=y;

  2. 关于hexo-abbrlink链接undefined

    关于hexo-abbrlink hexo-abbrlink是一个hexo博客链接永久化的解决方案 支持使用不同的算法和进制对文章链接进行转换 算法 进制 生成链接 crc16 hex https:// ...

  3. eclipse远程连接hadoop单机模式出现的问题

    按照http://tydldd.iteye.com/blog/2007938配置单机模式 主要是 (1)配置hadoop-env.sh,指定jdk的安装路径 添加jdk路径 # The java im ...

  4. kotlin中匿名对象

    open class MyClass { private fun too()=object { var x : String ="x" } fun publictoo()=obje ...

  5. shell脚本中用到的计算

    在shell脚本中计算一般会涉及到let.$(()).$[].bc(另扩展expr).其中let.$(()).$[]都是用来做基本整数运算,bc可以用来做浮点运算. (1).let.$(()).$[] ...

  6. SQL 里ESCAPE的用法

    TABLES:makt. SELECT SINGLE * FROM makt AND maktx LIKE '%/_' ESCAPE '/' . SQL中escape的用法使用 ESCAPE 关键字定 ...

  7. 查看oracle数据库的链接数和用户

    http://www.cnblogs.com/is1988/archive/2012/11/21/2780067.html 1.查询oracle的连接数select count(*) from v$s ...

  8. 使用jquery 动态创建form 并提交

    $(document).ready(function(){    $("a.delete").click(function(event){        action = this ...

  9. 如何解决docker 官方镜像拉取慢的问题

    转自: http://skycity.today/?thread-307.htm 国内从 docker 官方 Registry 拉取 image 慢的解决,步骤如下: 1.注册一个阿里云账号. 2.阿 ...

  10. 最新 小米java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.小米等10家互联网公司的校招Offer,因为某些自身原因最终选择了小米.6.7月主要是做系统复习.项目复盘.LeetCode ...