JavaScript 스타일 가이드

GitLab 프론트엔드 개발에서 사용하는 JavaScript 코딩 스타일 규칙과 모범 사례를 설명합니다.

GitLab은 JavaScript 스타일 가이드라인 대부분을 Airbnb JavaScript 스타일 가이드 와 그에 딸린 린터로 관리합니다. Airbnb가 정한 스타일 가이드라인에 더해, 아래와 같은 몇 가지 별도 규칙이 있습니다. Note yarn run lint:eslint:all 또는 yarn run lint:eslint $PATH_TO_FILE 을 실행하면 로컬에서 ESLint를 실행할 수 있습니다. 준비 완료 신호 # 기능 테스트가 JavaScript 초기화를 기다려야 한다면 사용자에게 보이는 결과를 관찰하는 방식을 우선합니다. 페이지에 단언할 만한 UI 상태가 없을 때만 준비 완료 신호를 추가합니다. 해당 이니셜라이저가 완료될 때 설정되는, 범위가 정확한 data-* 속성을 사용합니다. document . body . dataset . rightSidebarInitialized = 'true' ; page-initialised 처럼 타이머에 기반한 클래스를 완료 신호로 사용하지 않습니다. 타임아웃은 초기화가 끝났다는 증거가 되지 않습니다. 기능 테스트 동기화 패턴은 wait_for_requests 나 wait_for_all_requests 를 사용하지 않습니다 를 참고합니다. forEach 사용 지양 # 데이터를 변경할 때는 forEach 를 피합니다. 데이터를 변경할 때는 forEach 대신 map , reduce , filter 를 사용합니다. 이렇게 하면 함수 안의 변경이 줄어들며, 이는 Airbnb 스타일 가이드 와도 부합합니다. // bad users. forEach ( ( user, index ) => { user. id = index; }); // good const usersWithId = users. map ( ( user, index ) => { return Object . assign ({}, user, { id : index }); }); 매개변수 수 제한 # 함수나 메서드의 매개변수가 3개를 넘으면 매개변수 대신 객체 하나를 사용합니다. // bad function a ( p1, p2, p3, p4 ) { // ... }; // good function a ( { p1, p2, p3, p4 } ) { // ... }; DOM 이벤트 처리 시 클래스 사용 지양 # 클래스의 유일한 목적이 DOM 이벤트를 바인딩하고 콜백을 처리하는 것이라면 함수를 사용합니다. // bad class myClass { constructor ( config ) { this . config = config; } init ( ) { document . addEventListener ( 'click' , () => {}); } } // good const myFunction = ( ) => { document . addEventListener ( 'click' , () => { // handle callback here }); } 생성자에 엘리먼트 컨테이너 전달 # 클래스가 DOM을 조작한다면 엘리먼트 컨테이너를 매개변수로 받습니다.