码迷,mamicode.com
首页 > Web开发 > 详细

js 一对多 双向绑定器

时间:2019-10-12 22:41:54      阅读:94      评论:0      收藏:0      [点我收藏+]

标签:for   text   push   round   hang   prototype   绑定   document   style   

<!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 class=‘disp‘></h3>

    <input type="text" id="inp1"></input>
    <input type="text" id=‘inp2‘></input>
    <script>
        var man = { name: zhang };
        function bind(obj, key, selector, prop, event = undefined) {
            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);
        //document.body.removeChild(document.querySelector(‘#inp1‘))
    </script>
</body>

</html>

 

js 一对多 双向绑定器

标签:for   text   push   round   hang   prototype   绑定   document   style   

原文地址:https://www.cnblogs.com/allofalan/p/11664154.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!