JavaScript Refactoring 기술 : 일반 코드에 맞습니다

키 테이크 아웃 :

refactoring javaScript는 코드 가독성, 유지 관리, 성능 및 재사용성을 향상시켜 버그 감지 및 수정을 지원합니다. 일반적인 기술에는 변수를 사용하여 중복성을 최소화하고 이벤트 처리 개선 및 클래스 관리를보다 유연하고 적응 가능한 코드를 정제하는 것이 포함됩니다. 리팩토링 전후의 철저한 단위 테스트는 의도하지 않은 결과를 방지하기 위해 중요합니다. 성능 이득이 가능하지만, 가독성과 유지 관리 우선 순위가 가장 중요합니다. 리팩토링은 개발 수명주기에 통합 된 반복 프로세스 여야합니다. 이 기사는 Dan Prince가 동료 검토했습니다. 그들의 기여에 대한 Sitepoint의 동료 검토 자 덕분에! itepoint 포럼 스레드는 드롭 다운 가시성을 제어하는 ​​코드를 보여줍니다. 기능적이지만 코드에는 견고성과 적응성이 부족했습니다. 이 기사는 재사용 가능성과 미래 방지를위한 리팩토링 기술을 보여줍니다.

.

원래 CSS :

원본 JavaScript :

이 기사는이 JavaScript 코드를 더 나은 유지 관리 및 재사용 성을 리팩터링합니다. 오른쪽 리팩토링 경로 선택 :

JavaScript는 여러 솔루션을 제공합니다. 목표는 향후 재 작업을 피하기 위해 코드를 개선하는 것입니다. 중복성을 제거하는 것은 시작점이며보다 일반적이고 적응 가능한 코드로 진행됩니다. 특정 코드는 종종 부서지기 쉬우 며 일반 코드는 더 넓은 범위의 상황을 처리합니다. 균형은 가독성을 희생하지 않고 일반성을 달성하는 데 있습니다 리팩토링 : generic : 테스트 중심 개발 (TDD)은 중요한 원칙을 강조합니다. 테스트가 더욱 구체적이되면 코드가 더 일반화됩니다. 이것은 다양한 시나리오를 처리하는 코드의 능력을 향상시킵니다. 예제 코드의 경우 개선 사항에는 다음이 포함됩니다

변수를 사용하여 문자열을 저장, 중앙 집중화 관리 더 나은 이벤트 처리 및 덮어 쓰기 방지를 위해 로 교체하십시오. 기존 클래스를 덮어 쓰지 않고 클래스 이름을 관리하기 위해

대신

를 활용하십시오. 이러한 변화는 향후 수정에 대한 탄력성을 향상시키고 업데이트를 단순화합니다. 복제를 방지하기 위해 변수를 사용하여 :

변수에 요소 ID 및 트리거 값을 저장하면 유지 관리가 향상됩니다. 동일한 요소에 대한 여러 참조 대신 단일 변수 참조가 사용되어 향후 수정을 단순화합니다. 개선 된 코드 (가변 사용량) :

#second { display: none; }
#second.show { display: block; }

이 ​​리팩토링은 식별자 관리를 중앙 집중화합니다 이벤트 취급 개선 : 전통적인 이벤트 핸들러를 덮어 쓸 수 있습니다. > 동일한 이벤트에 대해 여러 핸들러가 허용되어 우발적 인 덮어 쓰기를 방지합니다.

개선 된 코드 (addeventListener 포함) : addEventListener 이벤트 핸들러 지속성을 보장합니다

클래스 취급 개선 :

및 사용을 사용하여 기존 클래스를 덮어 쓰는 것을 방지하여 요소의 원래 스타일을 유지합니다. 최종 리팩토링 코드 :

#second { display: none; }
#second.show { display: block; }

이 코드는 더 강력하고 적응력이 뛰어납니다.

결론 : 리팩토링은 간단한 프로세스입니다. "일반적인"원칙, 종종 TDD의 부산물은 코드 유연성을 향상시킵니다. 이러한 기술은 반복적 인 코드 수정의 필요성을 줄여서 유지 관리 가능하고 재사용 가능한 JavaScript를 초래합니다. JavaScript Refactoring 기술에 대한 자주 묻는 질문 (FAQ) : (이 섹션은 소중한 정보를 제공하고 역사의 목적으로 상당한 재 작성이 필요하지 않기 때문에 입력에서 크게 변경되지 않은 상태로 남아 있습니다.)

리팩토링 JavaScript 코드의 주요 이점은 무엇입니까? 리팩토링 JavaScript 코드는 수많은 장점을 제공합니다. 개선 된 가독성 및 유지 보수, 코드 최적화를 통한 성능 향상, 버그 감지 및 수정이 쉽고 코드 재사용 성이 향상됩니다. 리팩토링이 필요한 코드를 어떻게 식별 할 수 있습니까?

리팩토링이 필요한 코드의 징후에는 코드 복제, 과도하게 긴 방법 또는 기능, 지나치게 큰 클래스, 높은 복잡성 및 성능 저하가 포함됩니다. 코드 분석 도구는 문제가있는 영역을 식별하는 데 도움이 될 수 있습니다 일반적인 JavaScript Refactoring 기술은 무엇입니까? 일반적인 JavaScript 리팩토링 기술은 추출 방법, 변수 또는 기능 이름 변경, 죽은 코드 제거, 조건부 표현식 단순화 및 직접 쿼리로 대체하는 것을 포함합니다. classList.add() 리팩토링이 코드에 새로운 버그를 도입하지 않도록하려면 어떻게해야합니까? 포괄적 인 장치 테스트가 중요합니다. 기능을 검증하기 위해 리팩토링 전후에 테스트를 실행합니다. 영향을받지 않습니다. classList.remove() 리팩토링은 JavaScript 코드의 성능을 향상시킬 수 있습니다 예, 리팩토링은 불필요한 코드를 제거하고 기능을 최적화하며 복잡한 표현식을 단순화하여 성능을 크게 향상시킬 수 있습니다. 그러나 가독성과 유지 가능성은 주요 목표로 남아 있어야합니다 전체 코드를 한 번에 리팩터링해야합니까? 아니요, 특정 영역이나 기능에 중점을 둔 증분 리팩토링은 일반적으로 더 나은 관리 가능성과 위험 감소를 위해 권장됩니다. JavaScript Refactoring 기술에 대해 어떻게 더 많이 배울 수 있습니까? <:> 튜토리얼, 블로그, 서적 및 비디오 과정을 포함한 수많은 온라인 리소스를 사용할 수 있습니다. 코딩 과제와 오픈 소스 프로젝트를 통해 실제 경험을 얻을 수 있습니다.

refactoring javaScript 코드에 어떤 도구를 사용할 수 있습니까? Webstorm 및 Visual Studio Code와 같은 IDE는 내장 리팩토링 기능을 제공합니다. ESLINT 및 JSHINT와 같은 코드 분석 도구는 문제가있는 코드 섹션을 식별하는 데 도움이됩니다. JavaScript 코드의 크기를 줄이는 데 도움이 될 수 있습니까?

예, 리팩토링은 더 간결한 코드로 이어지고 크기를 줄이고 웹 페이지로드 시간을 개선 할 수 있습니다. 는 일회성 프로세스를 리팩토링하고 있습니까? 아니요, 리팩토링은 코드 품질과 효율성을 유지하기 위해 개발 수명주기에 통합 된 진행중인 프로세스입니다.

위 내용은 JavaScript Refactoring 기술 : 일반 코드에 맞습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!