<style>
        #parent{ width: 600px; height: 20px; background: #ccc; position: relative; margin: 20px auto;}
        #div1{ width: 20px; height: 20px; background: red; position: absolute; left: 0; top: 0;}
        #div2{width: 400px; height: 300px; border: 1px solid black; overflow: hidden; position: relative;}
        #div3{position: absolute; left: 0; top: 0;}
    </style>

<script>
        window.onload=function(){
            var oDiv=document.getElementById("div1");
            var oDiv2=document.getElementById("div2");
            var oDiv3=document.getElementById("div3");
            var oParent=document.getElementById("parent");
            var disX=0;
            oDiv.onmousedown=function(ev){
                var oEvent=ev||event;
                disX=oEvent.clientX-oDiv.offsetLeft;
                if(oDiv.setCapture){//兼容ie9以下
                    oDiv.onmousemove=mouseMove;
                    oDiv.onmouseup=mouseUp;
                    oDiv.setCapture();
                }else{//兼容其他浏览器
                    document.onmousemove=mouseMove;
                    document.onmouseup=function(ev){
                        this.onmousemove=null;
                        this.onmouseup=null;
                    };
                }
                return false;
            };
            function mouseMove(ev){
                var oEvent=ev||event;
                var l=oEvent.clientX-disX;
                if(l<0){
                    l=0;
                }else if(l>oParent.offsetWidth-oDiv.offsetWidth){
                    l=oParent.offsetWidth-oDiv.offsetWidth;
                }
                oDiv.style.left=l+"px";

                var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);
                document.title=scale*oDiv3.offsetHeight;
                oDiv3.style.top=-scale*(oDiv3.offsetHeight-oDiv2.offsetHeight)+"px";
            };
            function mouseUp(){
                this.onmousemove=null;
                this.onmouseup=null;
                if(oDiv.releaseCapture){
                    oDiv.releaseCapture();
                }
            }
        }
    </script>

<div id="parent">
        <div id="div1"></div>
    </div>
    <div id="div2">
        <div id="div3">
            前者我们详细地写了如何去操作dom节点的过程，我们命令什么，它就操作什么；
后者则是我们输入了数据状态，输出视图（我们不关心中间的过程，它们均由框架帮助我们实现）；
前者固然直接，但是当应用变得复杂则代码将难以维护，而后者框架帮我们实现了一系列的操作，无需管理过程，优势显然可见。

为了实现这一点，就是实现如何输入数据，输出视图，我们就会注意到上面的render函数，render函数的实现，主要在对dom性能的优化上，当然实现方式也多种多样，直接的innerHTML、使用documentFragment、还有virtual dom，在不同场景下性能上有所不同，但是框架追求的是在大部分场景中框架已经满足你的优化需求，这里我们也不加以赘述，后文会提到。

当然还有数据变化侦测，从而re-render视图，数据变化侦测中，值得一提的是数据生产者（Producer）和数据消费者（Consumer）之间的联系，这里，我们可以暂且将系统（视图）作为一个数据的消费者，我们的代码设置数据的变化，作为数据的生产者
我们这里可以分为系统不可感知数据变化和系统可感知数据变化

Rx.js中是将两者通信分成拉取（Pull)和推送（Push)，比较不好理解，这里我自己就分了个类
系统不可感知数据变化
像React／Angular这类框架并不知道数据什么时候变了，但是它视图什么时候更新呢，比如React就是通过setState发信号告诉系统有可能数据变了,然后通过virtual dom diff去渲染视图，angular则是有一个脏值检查流程，遍历比对
        </div>