<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>
