브라우저 성능이 향상되고 새로운 HTML5 프로그래밍 인터페이스의 꾸준한 채택으로 웹 페이지의 JavaScript 볼륨이 점차 증가하고 있습니다. 그러나 잘못 쓰여진 프로그램은 전체 웹 사이트를 중단하고 사용자를 좌절 시키며 잠재 고객을 몰아 낼 수있는 잠재력이 있습니다.
개발자는 코드의 품질을 향상시키고 모든 실행이 예측 가능하다는 것을 확신하기 위해 사용할 수있는 모든 도구와 기술을 사용해야합니다. 이것은 내 마음 속의 깊은 주제이며 수년간 개발 과정에서 따라야 할 일련의 단계를 찾기 위해 최고 품질의 코드 만 게시 할 수 있도록 노력해 왔습니다.
JavaScript 프로젝트의 품질을 크게 향상시키기 위해이 7 가지 단계를 따르십시오. 이 워크 플로를 사용하면 오류가 줄어들고 많은 처리 최적화가 이루어 지므로 사용자에게 즐거운 탐색 경험이 있습니다.
01. 코드
먼저, ECMAScript5의 엄격한 모드와 기능에서 "엄격한 모드"선언을 호출 하고이 모듈의 설계 모드를 사용하십시오. 자체 이행 함수 폐쇄에서 글로벌 변수 모듈을 명확하고 간결하게 유지하기 위해 샌드 박스 독립 코드 모듈과 외부 종속성을 통해 글로벌 변수의 사용을 최소화해야합니다. 확립 된, 입증 된, 잘 테스트 된, 잘 알려진 제 3 자 라이브러리 및 프레임 워크 만 사용하고, 기능을 작은 값으로 유지하여 모듈 작업 및 기타 뷰 레이어 코드에서 비즈니스 로직 또는 데이터를 분리하십시오.
다수의 개발자가있는 대규모 프로젝트는 Google의 JavaScript 스타일 가이드와 같은 확립 된 코딩 원칙 세트를 따라야하며 요구 사항과 같은 라이브러리를 통한 엄격한 종속성 관리, AMD (Asynchronous Module Defince)를 사용하여 패키지 관리를 사용하여 엄격한 의존성 관리를 포함하여 강력한 코드 관리 규칙을 요구하고, Bower 또는 JAM을 사용하여 패키지 관리 (클라이언트 라이브러리 관리 도구)를 사용하여 특정 버전을 참조하고 CONTERCERALONTION을 사용하여 PACKET MANCERATION을 사용하여 PACKATE MANCERANCE를 사용하고 CONTERCARULE PATURY를 사용하여 PACKET를 사용하여 강력한 코드 관리 규칙이 필요합니다. 다른 코드 모듈 간의 커뮤니케이션 결합. 이것은 또한 현명한 아이디어이기도합니다. GIT 또는 전복과 같은 코드 리포지토리 시스템 시스템을 사용하여 소스 코드 또는 마술 콩과 같은 일부 서비스를 통해 클라우드에서 코드를 백업하고 이전 버전으로 복원 할 수있는 기능을 제공하고 다른 기능을 수행하고 완성하기 전에 함께 병합 할 수 있습니다.
02. 파일
Yuidoc 또는 JSDOC와 같은 구조화 된 주석 블록 형식을 파일의 기능에 사용하므로 모든 개발자는 코드를 연구하지 않고도 목적을 이해할 수있어 오해를 줄일 수 있습니다. Markdown 구문을 사용하면 더 풍부하고 긴 의견과 설명이있을 수 있습니다. 관련 명령 줄 도구를 사용하여 웹 사이트에서 문서를 자동으로 생성합니다. 이러한 구조 의견을 기반으로 코드의 수정 사항과 일치합니다.
03. 트랙 분석
JSHINT 또는 JSLINT와 같이 정기적으로 코드에서 정적 코드 분석 도구를 실행하십시오. 이러한 검사는 알려진 코딩 결함 및 엄격한 패턴 사용을 잊거나 고령화되지 않은 변수를 참조하는 것과 같은 괄호 또는 반 콜론이 누락 된 것과 같은 잠재적 오류에 대한 검사를합니다. 코드의 품질을 향상시키기 위해 공구 제어 문제를 수정하십시오. 프로젝트 팀의 기본 옵션을 설정하여 각 줄을 공간별로 들여 쓰기, 곱슬 버팀대를 배치 할 위치, 코드 파일 전체에 단일 또는 이중 따옴표를 사용하는 것과 같은 코딩 표준을 향상시킵니다.
04. 테스트
단위 테스트는 작은 독립 함수에 의해 수행되는 함수 중 하나입니다. 특정 입력의 기본 코드 기반에서 함수 중 하나를 실행하여 예상 값을 출력합니다. 자신감을 높이기 위해 코드는 예상 및 예상치 못한 입력 매개 변수를 사용하여 각 기능 단위 테스트에 대해 Jasmine 또는 Qunit과 같이 예상대로 사용되는 프레임 워크를 작성합니다. 그러나 그 가장자리 상황을 잊지 마십시오!
이 테스트를 여러 운영 체제의 여러 브라우저에서 실행하여 브로우 스태 스케이션 또는 소스 실험실과 같은이 서비스를 활용하여 클라우드의 가상 머신에 대한 테스트를 가속화 할 수 있습니다. 이 두 서비스는 API를 제공하여 장치 테스트가 동시에 여러 브라우저에서 자동으로 실행될 수있게하며 일단 완료되면 결과를 피드백합니다. 보너스로 코드가 GitHub에 저장된 경우 코드를 제출할 때 단위 테스트를 자동으로 실행하는 도구 인 브라우저 warm을 사용할 수 있습니다.
05. 측정
이스탄불 측정과 같은 코드 범위 도구는 기능에서 장치 테스트를 실행할 때 실행되는 코드 라인을 실행하여 총 코드 줄 수의 백분율로보고합니다. 장치 테스트에서 코드 적용 범위 도구를 실행하고 추가 테스트를 추가하면 커버리지 점수가 100%로 증가하여 코드에 대한 신뢰가 높아질 수 있습니다.
함수의 복잡성은 Hallstead Complexity Metric : 1970 년대 컴퓨터 과학자 Morris Hallstead가 설정 한 방정식을 사용하여 측정 할 수 있습니다. 함수의 복잡성은 루프, 분기 및 기능이 포함 된 함수에 따라 정량화됩니다. 함수의 복잡성은 Halstead의 복잡성 측정을 사용하여 측정 할 수 있습니다. 이 복잡한 점수가 감소하면이 기능을 이해하고 유지하는 것이 더 쉬워 오류 가능성을 줄입니다. 명령 줄 도구 플라톤 측정 및 JavaScript 코드 복잡성의 생성 된 데이터를 시각화하면 이전 결과를 저장하면서 개선 될 수있는 기능을 결정하여 시간이 지남에 따라 품질 향상을 추적 할 수 있습니다.
06. 자동화
Grunt와 같은 작업 러너를 사용하여 파일 컴파일, 분석, 테스트, 적용 범위 및 복잡성 보고서 생성 프로세스를 자동으로 작동시켜 시간과 노력을 절약하고 발생하는 품질 문제를 해결할 가능성을 높입니다. 이 게시물에서 강조된 대부분의 도구 및 테스트 프레임 워크는 Grunt와 관련이있어 손가락을 움직일 필요없이 워크 플로 및 코드의 품질을 향상시키는 데 도움이됩니다.
07. 예외를 처리합니다
동시에, 어느 시점에서 코드는 실행될 때 오류가 발생합니다. 런타임 오류와 웹 사이트에 대한 동작 제한의 영향을 올바르게 처리하려면 "시도… 캐치"명령문을 사용하십시오. 네트워크 서비스를 사용하여 실행 중에 발생하는 오류를 기록하십시오. 이 정보를 사용하여 새로운 단위 테스트를 추가하여 코드를 개선하고 이러한 오류를 하나씩 제거하십시오.
성공 단계
이 7 단계는 지금까지 내 경력에서 가장 자랑스럽게 생각하는 코드를 만드는 데 도움이됩니다. 그들은 또한 미래를위한 좋은 기초입니다. 자신의 프로젝트에서는 이러한 단계를 사용하여 고품질 JavaScript 코드를 생성하여 네트워크를 개선하고 성공을 단계별로 이끌어 낼 수 있도록 약속합니다.