5장은 챕터가 많기 때문에 반으로 나누어 요약 정리한다.
5.12 순수 루프 작성하기
$.each( array, function(){ // this로 실행
}
$('.lotsOfElements').each( function() {
// this 또는 $(this)로 실행
});
::위 호출은 매번 호출을 해야해서 로드 시간이 길어진다.
for( var item, i = -1; item = array[++i] ) {
// item을 사용하여 작업
}
:: 문제는 배열중 false요소를 가지게 되면 루프가 돌지 않는다.
:: null값이 없다 확신할때 가장 빠른 방법
for( var i = -1, n = array.length; ++i<n;){
var item = array[i];
// item으로 직업 수행
}
::모든 배열에서 잘 작동하는 루프
:: 배열길이 캐시, ++i사용으로 더욱 빠름
:: for in 루프도 사용할 수 있으나 개체 반복하기 위한 목적은 문제가 있다 사용자제
5.13 이름 조회 줄이기
루프안쪽에서 나타나는 잉름을 모두 조사하고 조회하는것은 능률상 안좋다
따라서 개체참조를 지역적으로 캐시하거나 중첩 함수를 최소로 사용하여 이름 조회 회수를 줄여야한다.
자바스크립트는 우선 지역범위 내에서 이름을 찾고 이름이 발견되지 않으면 부모 중첩 함수에서 다시 찾으며, 마지막으로 전역 변수에서 찾는다.
# 코드1
=================================================
//지역 범위를 얻기위한 전형적인 함수 래퍼
(function() {
// 숫자 배열에서 가장 큰 절대값 찾기
function maxMagnitude( array ) {
var largest = -Infinity;
$.each( array, function() {
largest = Math.max( largest, Math.abs(this) );
});
return largest;
}
// 배열에 대해 maxMargintude를 호출하는 코드가 여기온다.
})();
# 코드2
=================================================
//지역 범위를 얻기위한 전형적인 함수 래퍼
(function() {
// 숫자 배열에서 가장 큰 절대값 찾기
function maxMagnitude( array ) {
var abs = Math.abs, max = Math.max;
var largest = -Infinity;
for( var i = -1, n=array.length; ++i <n;){
largest = max( largest, abs(array[i]) );
}
return largest;
}
// 배열에 대해 maxMargintude를 호출하는 코드가 여기온다.
})();
5.14 innerHTML을 사용하여 DOM을 빠르게 업데이트하기
기존에는 $('#mydiv').html(myhtml);등을 사용했는데 .html()이 생각보다 오래걸린다
따라서 빠른 DOM업데이트를 위해서 $('#mydiv')[0].innerHTML = myhtml; 을 사용하는것이 좋다.
.html같은경우 self-closing태그들(닫는태그를 요구하지 않는녀석들)을 찾는 정규표현식이 존재한다
따라서 닫아야할 태그들이 존재할때 자동으로 닫아주는데 이때 시간이 오래걸린다
그래서 직접 .innerHTML로 넣어 줄 수 있다.
5.15 체인이 끊어진 부분을 알아내기
개체 부분을 console.log(); 등을 이용해서 검사하면됨
나머지는 패스