简单的双向绑定实现

作者: mochase | 来源:发表于2017-05-25 15:34 被阅读15次

js实现双向数据绑定
Vue源码（一）
简单实现双向绑定
双向绑定简单实现
Vue使用可编辑div进行数据双向绑定的尝试
深入Vue响应式原理
美团面试总结
小程序小方法
双向绑定的简单实现
简单的双向绑定实现

主要是使用到了订阅者模式.

<!--简单的双向绑定实现-->
<!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>
    <input type="text" data-model="demo">
    <p data-bind="demo" class="demo"></p>
    <h2 data-bind="demo"></h2>
    <span data-bind="demo"></span>
</body>
<script>
    //订阅者模式
    function Observer() {
        this.fns = []
    }

    Observer.prototype = {
        subscribe: function (fn) {
            this.fns.push(fn)
        },
        unsubscribe: function (fn) {
            this.fns = this.fns.filter(function(item) {
                return item !== fn
            })
        },
        publish: function (data, thisObj) {
            var _this = thisObj || this
            this.fns.forEach(function(item) {
                item.call(_this, data)
            })
        }
    }
    var o = new Observer
        
    var subscriber = function (data) {
        var i = document.querySelectorAll('*[data-bind="demo"]').length
        while (i--) {
            document.querySelectorAll('*[data-bind="demo"]')[i].innerHTML = data
        }
    }
    o.subscribe(subscriber)

    document.querySelector('*[data-model="demo"]').addEventListener('input', function(e) {
        e.preventDefault()
        o.publish(document.querySelector('*[data-model="demo"]').value)   
    })
</script>
</html>

这里订阅者模式还可以完善,引入"话题"参数,使得订阅者可以订阅不同的"话题",对应到双向绑定demo中,监听多处data-model