필요한 경우 설명 추가
좋은 의견은 개발자가 코드의 논리, 기능 및 구현을 이해하고 유지 관리 비용을 줄이며 코드 품질과 유지 관리 가능성을 향상시키는 데 도움이 될 수 있습니다.
프런트 엔드 코드 주석에 대한 몇 가지 모범 사례는 다음과 같습니다.
- 주석은 명확하고 간결해야 합니다. 주석은 간결해야 하며 코드의 논리와 기능을 간단하고 이해하기 쉬운 언어로 설명해야 합니다. 주석을 과도하게 사용 하면 코드가 중복되고 읽기 어려워질 수 있습니다.
- 코드의 의도를 선언하고 함수의 동작을 정확하게 설명합니다 .
- 매개변수와 반환 값, 입력 매개변수가 나타내는 내용, 출력 매개변수가 나타내는 내용에 주석을 답니다 .
- 특별한 상황을 설명하기 위해 입력/출력 예제를 사용합니다.
- 코드가 완료되지 않았을 때 할일 주석을 사용하여 주석을 달 수 있습니다.
- 일관된 스타일을 사용하세요.
vscode 플러그인 마켓에서 koroFileHeader를 다운로드하여 설치할 수 있으며, 한 번의 클릭으로 주석 형식을 생성할 수 있습니다.
통일된 코딩 스타일
통합된 프런트 엔드 코드 스타일 사양을 사용하면 프런트 엔드 개발을 더욱 효율적이고 유지 관리하기 쉽게 만들 수 있습니다. 일관된 들여쓰기 및 공백, 줄 너비 제한, 명령문 종결자, 명령문 블록, 명명 규칙, 주석, 파일 명명, 모듈화 및 구성 요소화와 같은 사양을 따르면 프런트엔드 개발이 더욱 표준화되고 읽기 및 유지 관리가 더 쉬워질 수 있습니다. 동시에 코드 품질 검사 도구(예: ESLint)를 사용하면 팀이 코드 문제를 발견 및 수정하고 코드 품질을 향상시키는 데 도움이 될 수 있습니다.
다음은 프런트엔드 코드 스타일 표준을 통합하기 위한 몇 가지 모범 사례입니다.
- 명명 규칙: 변수와 함수에 의미 있는 이름을 사용하고, 코드를 더 쉽게 읽고 이해할 수 있도록 카멜 표기법이나 밑줄 명명법을 따릅니다.
일반적으로 일반적인 명명 규칙은 다음과 같습니다.
- 변수: 작은 혹, 의미 있는 영어 이름 사용 ( 예: newsDetail)
- 기능: 작은 고비, getNewsDetail과 같이 동사 + 명사의 형태여야 합니다.
- 클래스 이름: EventBus와 같은 대형 낙타 케이스
- 상수: 대문자 + 밑줄로 구분됨(예: NEWS_STATUS)
- 디렉터리: 소문자 + 대시로 구분(예: 파일 이름)
- 파일: 소문자 + 대시 구분(예: event-bus.js), 팀 내에서 통합하면 됩니다.
- 구성 요소: 구성 요소 이름은 항상 첫 글자가 대문자인 camelCase를 사용해야 합니다.
- 코드 들여쓰기: 코드 가독성을 높이기 위해 일반적으로 2~4개의 공백으로 일관된 코드 들여쓰기를 사용합니다.
- 줄 너비: 코드 줄의 길이를 제한합니다. 일반적으로 80자 이하입니다.
- 브래킷 위치: 모든 브래킷을 줄의 시작 부분에 배치할지 아니면 끝 부분에 배치할지 등 브래킷 위치를 통일합니다.
- 문자열 따옴표에는 작은 따옴표 사용
- 루프 판단은 3단계를 초과할 수 없습니다.
기능
프로그래밍에서 함수는 코드를 모듈화하고 재사용하는 데 중요한 도구입니다. 함수를 깔끔하고 읽기 쉽게 유지하는 것은 코드 유지 관리 및 확장성에 매우 중요합니다. 다음은 함수를 깔끔하게 유지하는 방법에 대한 몇 가지 모범 사례입니다.
- 함수는 짧고 간결해야 합니다 . 함수는 한 가지 작업만 수행해야 하며 해당 작업은 함수 이름에 명확하게 표현되어야 합니다. 함수가 너무 복잡해지거나 너무 길어지기 시작하면(일반적으로 80줄 이하 ) 더 작은 함수로 나누는 것을 고려해야 할 때입니다.
- 중복 방지 : 여러 함수에서 동일한 코드를 반복하지 마세요. 여러 위치에서 동일한 코드를 반복하고 있다면 아마도 해당 코드 섹션을 추출하고 새 함수를 만들어야 할 때일 것입니다.
- 설명이 포함된 이름을 사용하세요 . 함수 이름은 함수가 수행하는 작업을 명확하게 설명해야 합니다. 이름은 간결하고 간결해야 하며, 널리 사용되는 약어가 아닌 이상 약어를 사용하지 마십시오.
- 매개변수 목록은 간결해야 합니다 . 매개변수 목록은 너무 길어서는 안 됩니다. 매개변수 목록이 너무 길면 일부 매개변수를 객체로 캡슐화하거나 다른 디자인 패턴을 사용하여 인터페이스를 단순화하는 것을 고려해야 할 때입니다.
- 전역 변수 사용 최소화 : 전역 변수는 코드를 이해하고 유지 관리하기 어렵게 만들 수 있습니다. 가능하다면 지역변수를 사용해 보세요.
- 주석은 적절해야 합니다 . 주석은 코드를 대체하는 것이 아니라 보완해야 합니다. 코드 자체가 충분히 명확하다면 주석이 필요하지 않을 수도 있습니다. 복잡한 코드 조각 앞에 주석을 추가하면 독자가 코드의 목적과 작동 방식을 이해하는 데 도움이 됩니다.
- 함수는 "순수"해야 합니다 . 순수 함수는 동일한 입력이 주어지면 항상 동일한 출력을 반환하고 부작용이 없는 함수입니다. 이러한 유형의 함수는 일반적으로 테스트하고 이해하기가 더 쉽습니다.
- 오류 처리 : 모든 함수는 오류가 호출 스택의 맨 위로 전파되는 대신 오류를 처리할 수 있어야 합니다. 모든 함수에는 명확하게 정의된 오류 처리 전략이 있어야 합니다.
독서습관에 맞춰
코드를 작성하는 것도 표현의 과정인데 표현의 형태는 다르지만 인간의 자연스러운 언어습관에 맞는 표현습관을 활용하여 코드를 작성할 수 있다면 코드를 읽는 사람들이 우리의 코드를 이해하는 데 큰 도움이 될 것입니다.
조건문의 긍정 및 부정 논리
일부 긍정 및 부정 논리를 판단할 때는 if(!result) 대신 if(result)를 사용하는 것이 좋습니다.
if/else 문 블록의 순서
if/else 문을 작성할 때 상호 배타적인 상황(많은 elseif)이 있을 수 있습니다. 그렇다면 이러한 상호 배타적인 사례는 어떤 순서를 따를 수 있습니까?
- 간단한 상황을 먼저 처리하고 복잡한 상황을 처리하십시오 . 이렇게 하면 처음부터 뚱뚱한 남자를 잡아먹고 많은 에너지를 소비하는 대신 코드를 읽는 사람들이 논리를 단계별로 이해하는 데 도움이 됩니다.
- 특별하거나 의심스러운 상황을 먼저 처리하고 정상적인 상황을 처리합니다 . 이는 코드를 읽는 사람들이 현재 로직의 경계 조건과 주의가 필요한 사항을 즉시 확인할 수 있도록 도와줍니다.
일찍 반납하려면 반납을 이용하세요
함수나 메소드에는 상대적으로 특별하거나 극단적인 상황이 있을 수 있으며, 이는 결과에 큰 영향을 미치거나 심지어 프로세스를 종료하기도 합니다. 이러한 상황이 존재하는 경우 먼저 작성하고 return을 사용하여 조기에 반환(또는 반환해야 하는 반환 값을 반환)해야 합니다.
이것의 장점은 if/else 문의 중첩을 줄일 수 있고 "어떤 상황이 예외를 발생시키는지"를 명확하게 반영할 수 있다는 것입니다.
매직 넘버를 리터럴 상수로 대체
매직 넘버의 경우 열거 객체나 상수를 사용하여 가시적인 의미를 부여해야 합니다. 이런 식으로 사용해보면 그 의미가 무엇인지 명확하게 알 수 있을 것입니다.
더욱이, 요구 사항이 변경되면 한 곳만 변경하면 됩니다.
const LOGIN_SUCCESS = '3756'; // 为业务常量命个名，看起来就非常清晰易读
if (res.code === LOGIN_SUCCESS) {
// todos
}
논리를 단순화하라
함수 또는 메서드 사용
복잡한 논리 블록을 별도의 함수나 메소드로 캡슐화합니다. 이렇게 하면 기본 프로그램이 더욱 간결해질 뿐만 아니라 코드가 더욱 모듈화되고 유지 관리 및 테스트가 쉬워집니다.
// not-recommended ❌
// 下面这个if里面的判断条件，需要花一番精力才能知道作者要表达的是什么；
let getPrice = function( price ){
let date = new Date();
if ( date.getMonth() >= 6 && date.getMonth() <= 9 ){
// 夏天
return price * 0.8;
}
return price;
};
// recommended ✅
// 提炼成单独的函数就能做到一目了然了；
let isSummer = function(){
let date = new Date();
return date.getMonth() >= 6 && date.getMonth() <= 9;
};
let getPrice = function( price ){
if (isSummer() ){
// 夏天
return price * 0.8;
}
return price;
};
if...else 스파게티 코드 줄이기
기능을 완성하기 위해 프로그래머마다 알고리즘이나 작성 방법이 다르며 일반적으로 알고리즘이 명확할수록 유지 관리 가능성이 높아집니다. 어떤 일을 하는 데 더 명확한 방법이 있다는 것을 알게 되면 복잡한 방법을 더 명확한 방법으로 바꿔야 합니다.
function foundPerson(people) {
for(let i = 0; i < people.length; i++) {
if (people[i] === "Don") {
return "Don";
}
if (people[i] === "John") {
return "John";
}
if (people[i] === "Kent") {
return "Kent";
}
}
return "";
}실제로 다음과 같은 조건문이 필요하지 않습니다.
function foundPerson(people) {
const candidates = ["Don", "John", "Kent"];
return people.find(p => candidates.includes(p)) || '';
}그렇지 않은 경우 여러 대신 전환
function commandHandle(command){
if(command === 'install'){
install()
}else if(command === 'start'){
start()
}else if(command === 'restart'){
restart()
}else{
showToast('未知命令')
}
}
스위치는 특정 문자열이나 숫자와 같은지 판단하는 등 상대적으로 판단 조건이 간단한 상황에 더 적합하며 if 조건이 3개 이상인 경우 스위치를 사용하면 구조가 더 명확해집니다.
function commandHandle(command){
switch (command){
case 'install':
install();
break;
case 'start':
start();
break;
case 'restart':
restart();
break
default:{
showToast('未知命令')
}
}
}
각 명령에 해당하는 동작을 맵을 통해 지정하면 더욱 최적화가 가능합니다.
전략 패턴을 사용하여 추가 수준의 최적화를 수행할 수 있습니다.
function commandHandle(command) {
let commandHandleMap = {
install,
start,
restart,
default: () => showToast('未知命令')
}
let handle = commandHandleMap[command] || commandHandleMap['default']
handle()
}
Guard 문은 중첩된 조건식을 대체합니다.
조건이 극히 드물다면 개별적으로 확인하고 조건이 참이면 즉시 함수에서 복귀해야 합니다. 이러한 별도의 확인을 종종 "보호자 진술서"라고 합니다.
function getPayAmount() {
let result;
if (isDead)
result = deadAmount();
else {
if (isSeparated)
result = separatedAmount();
else {
if (isRetired)
result = retiredAmount();
else
result = normalPayAmount();
}
}
return result;
}
Guard 문을 사용하면 중첩된 문 수를 크게 줄이고 가독성을 높일 수 있습니다.
function getPayAmount() {
if (isDead) return deadAmount();
if (isSeparated) return separatedAmount();
if (isRetired) return retiredAmount();
return normalPayAmount();
}