JavaScript_javascript 팁에서 코드 반복 실행을 방지하는 방법과 경험 공유

나는 일부 대형 웹사이트에 가서 원본 코드를 살펴보는 것을 좋아하며, 내 코드에 적용할 수 있는 몇 가지 패턴을 찾거나 이전에 들어본 적이 없는 몇 가지 도구와 기술을 발견하기를 희망합니다. 그런데 이런 대형 웹사이트의 소스코드를 보면 반복적인 코드실행과 반복적인 기능적 적용이라는 문제점을 종종 발견하게 됩니다. 다음은 소스 코드를 볼 때 발견된 몇 가지 문제입니다. 여러분이 JavaScript 코드를 더 간결하고 효율적으로 작성할 수 있기를 바랍니다.
중복 컬렉션 요소

JavaScript 코드에서 가장 흔히 볼 수 있는 문제는 중복 컬렉션 요소입니다. jQuery 선택기 엔진이나 querySelectorAll의 실행 속도는 매우 빠르지만, 반복되는 작업에는 더 많은 시간과 리소스가 소요됩니다. 이 문제는 매우 간단하며 해결 방법은 다음과 같습니다.

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

//
$$(".items").addClass("hide")
// ... 이후...
$$(".items"); .removeClass("hide") ;

//
var items = $$(".items")
// ... 여기서는 이 참조 변수를 사용하세요!

네 매일 반복적인 코드를 작성하는 프로그래머를 규탄하지만 그래도 강화해야 합니다. 물론 일부 반복 작업은 피할 수 없지만(예: ajax 페이지 로드) 이러한 상황에서는 콘텐츠를 직접 가져오는 대신 이벤트 프록시를 사용하는 것이 가장 좋습니다.
중복 조건부 평가

중복 조건부 평가는 흔히 발생하지만 일반적으로 이를 피하는 일반적인 패턴이 있습니다. 다음과 같이 작성된 코드를 볼 수 있습니다.

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

var PerformMiracle = function() {
// 브라우저가 기능 A를 지원하는 경우...
if(features.someFeature) {

}
// ... If
else {

}
};

이것은 작동하지만 가장 효율적인 코드는 아니며 위 조건은 여러 번 평가될 수 있습니다. 이렇게 작성하시면 좋을 것 같습니다.

코드를 복사하세요 코드는 다음과 같습니다.

var PerformMiracle = 기능 .someFeature ? function() {
// 계획 A 항목
} : function() {
// 계획 B 항목


조건은 하나인데, 조건부 계산이 완료되면 해당 메소드나 변수가 결과로 반환되었습니다!

중복 객체 생성

반복 작업에 비해 반복 객체 생성은 감지하기 어렵고 일반적으로 정규식으로 나타납니다. 아래 코드를 살펴보세요.

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

function cleanText(dirty ) {

// SCRIPT 태그 제거
clean = dirty.replace(/<script>]*>([sS]*?)</script>/gi, "");

// 공백 등을 더 정리합니다.

return clean
}


위 코드는 반복적으로 생성됩니다. 새로운(동일한) 정규식 개체 이 경우 이 함수 외부에서 이 개체를 생성하면 다음 상황을 피할 수 있습니다.

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

var scriptRegex = /<script>]*>([sS]*?)</script>> ;/gi ;

function cleanText(dirty) {
// SCRIPT 태그 제거
clean = dirty.replace(scriptRegex, "")// 좀 더 정리합니다. 아마도 공백일 수도 있습니다.

return clean;
}


위의 예에서 정규식 개체는 한 번만 생성되지만 여러 번 사용되므로 CPU 처리량이 많이 절약됩니다. .

이것은 다른 프로그래머가 작성한 반복적인 문제에 대해 제가 자주 보는 예 중 일부입니다. 이것도 찾으시나요?