es5 간단한 데이터 납치 실현

코드에 의문점이 있으면 메모를 환영합니다.



    
        
        
    
    
        <input class="content" type="text" name="" value=""/>
        <div class="show"/>
        <script type="text/javascript">
            var input = document.getElementsByClassName('content')[0];
            var div = document.getElementsByClassName('show')[0];

            var data = {
                value:'wy'
            }

            input.oninput = function(){
                data.value = this.value;
            }

            function update(){
                div.innerText = data.value;
            }

            function observer(data){// data 
                if (!data || typeof data != 'object') {
                    return data;
                }else {
                    Object.keys(data).forEach(function(ele){
                        definedRective(data,ele,data[ele]);
                    })
                }
            }
            observer(data);

            function definedRective(data,key,val){
                Object.defineProperty(data,key,{
                    get:function(){
                        return val;
                    },
                    set:function(newVal){
                        val = newVal;
                        update();
                    }
                })
            }


        </script>
    

</code></pre> 
  <p> </p> 
 </div> 
</div>
                            </div>
                        </div>

es5 간단한 데이터 납치 실현

좋은 웹페이지 즐겨찾기