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>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

JavaScript(및 React)에서 `reduce` 메서드를 사용하는 방법

배열과 함께 사용할 수 있는 for..each 및 map와 같은 JavaScript의 ES5 메서드입니다. 차이점은 다음과 같습니다. 이름에서 알 수 있듯이 배열의 값 수를 하나로 줄입니다. 배열의 현재 값 및 인덱...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

es5 간단한 데이터 납치 실현

좋은 웹페이지 즐겨찾기