JS_javascript 기술에서 ajax 응답 객체를 검색하기 위해 hasOwnProperty 메소드를 사용하는 예

Baidu 검색을 자주 사용하는 학생들은 입력 상자의 드롭다운 인덱스를 절대 무시하지 않을 것입니다. 그러나 이 비동기 기술은 고유한 조건으로 인해 동시 서버 요청이 프런트 엔드를 촉발하게 됩니다. . Siege 엔지니어는 Ajax 메시지 수를 최대한 줄여야 합니다. 이 기사와 관련이 없는 것처럼 들릴 수도 있지만 그렇지 않습니다. 우선 바이두(Baidu) 무료 광고를 만들어 보겠습니다. 바이두 홈페이지에서 "front-end"라는 단어를 입력하고 크롬버그를 사용하면 전송된 응답을 쉽게 확인할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

window.bdsug.sug({q:'프런트 엔드';,p:false,s:['프런트 엔드 개발','프런트 엔드 엔지니어','프런트 엔드 버스','프런트 엔드 개발 엔지니어 ','프런트엔드 프레임워크','프런트엔드 버스 빈도', '프런트엔드 인터뷰 질문', '프런트엔드 분석', '프런트엔드 개발 도구', '프런트엔드 관찰']});

Baidu는 obj 매개변수를 사용하여 sug 메소드를 반환하여 드롭다운 데이터를 렌더링하려고 시도합니다. 페이지를 새로 고치지 않고 다시 "프런트 엔드"를 입력하면 유사한 요청이 발생하지 않으며 이는 매우 캐시 개체임을 나타냅니다. 그 기능은 요청된 객체를 임시로 저장하는 것입니다. 나중에 동일한 단어가 입력되면 캐시 객체의 키가 먼저 검색됩니다. 일치가 성공한 후 객체의 값을 직접 읽습니다. 더 많은 요청이 서버로 전송되므로 비용을 효과적으로 절약할 수 있습니다.

실제 주인공인 hasOwnProperty 메소드에 대해 이야기해 보겠습니다.

저는 jser가 hasOwnProperty에 대해 낯선 사람이 아니라고 믿습니다. 저는 여기 강가에서 물을 팔고 있을 뿐입니다.

객체에만 적용되며 객체의 키에 속성이 존재하는지 확인하는 데 사용됩니다. 반환 값은 부울 값입니다. 예를 들면 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

var test0 = Array.prototype.hasOwnProperty('split'); //false, 분할 메소드가 배열에 존재하지 않기 때문입니다
var test1 = String.prototype.hasOwnProperty('split'); //true, 왜냐하면 Split은 String 객체의 내장 메소드이기 때문입니다

이 사실을 알게 되면 hasOwnProperty의 힘을 보는 것만으로는 충분하지 않은 것 같으므로 간단히 Baidu 드롭다운 예를 재현해 보겠습니다.

코드 복사 코드는 다음과 같습니다.

var 데이터 = {}, saveObj = 함수(val){
if(data.hasOwnProperty(val)){ //제출된 값이 데이터 객체에 존재할 경우 요청이 전송되지 않습니다
var len = 데이터[발].길이;
for(var i = 0; i console.log(data[val][i]);
}
}그밖에{
var url = 'http://suggestion.baidu.com/su?wd=' val;
$.ajax({ //명확성을 위해 여기에서는 jquery의 ajax를 예로 사용합니다
url: url '&p=3&cb=window.bdsug.sug&sid=1421_1513_1541_1542_1582&t=1353756355137', //마지막 매개변수 t는 타임스탬프입니다
데이터 유형: 'jsonp',
유형: 'GET',
성공 : 함수(res){
var msg = res.data, len = msg.length;
msg == null && (msg = []);
If(len > 0){
data[val] = msg; //검색결과 캐시
for(var i = 0; i console.log(msg[i]); //요청 결과를 출력합니다
}
}
}, 오류: 함수(){
경고('오류');
}
});
}
};

이렇게 하면 키 값이 많이 저장될수록 캐시된 객체 데이터가 차지하는 메모리가 늘어나는 게 아닌가 하는 의문을 제기하는 동료도 있었습니다. 그러면 이것이 불가피하다고 말하고 싶습니다. 서버 측 요청을 저장하려면 다른 것을 희생해야 합니다. 실제로 캐시 개체가 차지하는 공간은 일단 페이지에 상주하지 않기 때문에 무시할 수 있습니다. 새로 고쳐지면 파괴될 것입니다. 그러나 다른 해결책을 제공하고 이 객체의 최고 값에 동의할 수 있습니다. 예를 들어 최대 100개의 키-값 쌍만 저장할 수 있습니다. 숫자가 100을 초과하면 삭제 연산자를 통해 처음 10개의 저장된 키를 삭제합니다. 또는 이 문제를 피하기 위해 단순히 저장하지 않을 수도 있습니다.

hasOwnProperty 메소드는 특히 객체 감지에 일반적으로 사용됩니다. 물론 관심 있는 학생들은 hasOwnProperty의 향상된 버전이며 자체 속성과 속성의 열거 가능성을 감지할 수도 있습니다. 더 이상 자세히 설명하지 않겠습니다.