어떻게 JS로 간단한 데이터 감청을 실현합니까
개요
주로 Object를 사용합니다.defineProperty는 vue와 유사한 데이터 바인딩을 실현합니다.
첫걸음
const data = {
name: "tom",
age: 14
}
Object.defineProperty(data, "name", {
get(){
return "name "
},
set(val){
console.log(‘ ‘,val)
}
})
//
console.log(data.name )두 번째 단계
const _data = { ...data }
for(let i in data){
Object.defineProperty(data, i, {
get(){
return _data[i]+" js "
},
set(val){
_data[i] = val;
}
})
}왜 단독_data？
대답: 데이터의 필드를 감청하고 필드의 반환 속성을 수정했습니다. 이로 인해 영향은 데이터에서 감청된 필드를 가져올 때마다 브라우저는 get에서 반환된 값을 호출합니다. 만약에 get에서 return 데이터 [i]를 직접 되돌리면 브라우저가 끊임없이 get 방법을 호출하여 사순환에 들어가게 됩니다.
데이터에 데이터를 좀 더 추가하다
const data = {
name: "tom",
age: 14,
friend: {
"name1": " ",
"name2": " ",
"name3": " ",
"name4": " "
},
}초기 값 포맷
const createNewWatch = (val, path, parentKey, event) => {
// object ，
if(typeof val != ‘object‘) return val;
// object ， WatchObject，
//WatchObject
return WatchObject(val,path.concat(parentKey), event)
}
https://www.houdianzi.comobject 대상 포맷, 감청 값
const WatchObject = (data, path, event) => {
function WatchObject(){
for(var key in data){
// ， val
data[key] = createNewWatch(data[key], path, key, event)
// key
defineProperty(this, key, data[key], path.concat(key), event)
}
}
return new WatchObject()
}
const b = WatchObject(data,[],{
set(path,val){
console.log(path,val)
}
})이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JS 판단 수조 네 가지 실현 방법 상세그러면 본고는 주로 몇 가지 판단 방식과 방식 판단의 원리를 바탕으로 문제가 있는지 토론하고자 한다. 예를 들어 html에 여러 개의 iframe 대상이 있으면 instanceof의 검증 결과가 기대에 부합되지 않을...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
