깔끔한 JS 코드를 작성하는 방법은 무엇입니까? 공유할 수 있는 5가지 글쓰기 팁
- 青灯夜游앞으로
- 2022-08-15 20:16:051586검색
깨끗한 JS 코드를 작성하는 방법은 무엇입니까? 이 기사에서는 깔끔한 JavaScript 작성을 위한 5가지 팁을 공유하겠습니다. 이것이 여러분에게 도움이 되기를 바랍니다.
독서 부담을 줄이고, 창의적인 사고를 불러일으키고, JavaScript 기술을 쉽게 배울 수 있습니다. 해가 뜨고, jym, 서두르세요~
1. 숫자를 상수로 정의합니다.
우리는 숫자를 자주 사용합니다. 다음 코드와 같습니다.
const isOldEnough = (person) => {
return person.getAge() >= 100;
}
이 100이 구체적으로 무엇을 의미하는지 아는 사람이 있나요? 우리는 일반적으로 이 100이 구체적으로 어떤 값을 나타낼 수 있는지 추측하고 판단하기 위해 함수 컨텍스트를 결합해야 합니다.
이러한 숫자가 여러 개인 경우 더 큰 혼란을 야기하기 쉽습니다.
깨끗한 JavaScript 작성: 숫자를 상수로 정의하세요
이 문제를 명확하게 해결하려면:
const AGE_REQUIREMENT = 100;
const isOldEnough = (person) => {
return person.getAge() >= AGE_REQUIREMENT;
}
이제 상수 이름을 선언하면 100이 "연령 요건"을 의미한다는 것을 즉시 이해할 수 있습니다. 수정 시 빠르게 찾아서 한 곳에서 수정하고 여러 곳에 적용할 수 있습니다.
2. 부울 값을 함수 매개변수로 사용하지 마세요
부울 값을 함수에 매개변수로 전달하는 것은 코드 혼란을 쉽게 일으킬 수 있는 일반적인 작성 방법입니다.
const validateCreature = (creature, isHuman) => {
if (isHuman) {
// ...
} else {
// ...
}
}
함수에 매개변수로 전달된 부울 값은 명확한 의미를 표현할 수 없습니다. 이 함수가 판단을 내리고 두 가지 이상의 상황을 생성한다는 점만 독자에게 알릴 수 있습니다.
그러나 우리는 함수의 단일 책임 원칙을 옹호합니다.
깨끗한 JavaScript 작성: 부울 값을 함수 매개변수로 사용하지 마세요
const validatePerson = (person) => {
// ...
}
const validateCreature = (creature) => {
// ...
}
3. 여러 조건을 캡슐화합니다.
우리는 종종 다음과 같이 코드를 작성합니다.
if (
person.getAge() > 30 &&
person.getName() === "simon" &&
person.getOrigin() === "sweden"
) {
// ...
}
불가능하지는 않지만 시간이 오래 지나면 갑자기 이러한 판단이 무엇인지 이해하지 못할 수 있으므로 이러한 조건을 변수나 함수로 캡슐화하는 것이 좋습니다.
깨끗한 JavaScript 작성: 여러 조건 캡슐화
const isSimon =
person.getAge() > 30 &&
person.getName() === "simon" &&
person.getOrigin() === "sweden";
if (isSimon) {
// ...
}
또는
const isSimon = (person) => {
return (
person.getAge() > 30 &&
person.getName() === "simon" &&
person.getOrigin() === "sweden"
);
};
if (isSimon(person)) {
// ...
}
아, 알고 보니 이 조건은 이 사람이 Simon인지 여부를 결정하는 것입니다~
이런 종류의 코드는 선언적 스타일 코드이므로 더 읽기 쉽습니다.
4. 부정적 판단 조건을 피하세요
조건적 판단에서 부정적인 판단을 사용하면 생각의 부담이 더 커집니다.
예를 들어 아래 코드에서 조건 !isCreatureNotHuman(creature)은 이중 부정문이므로 읽기가 약간 어렵습니다.
const isCreatureNotHuman = (creature) => {
// ...
}
if (!isCreatureNotHuman(creature)) {
// ...
}
깨끗한 JavaScript 작성: 부정적 판단 조건 피하기
이것은 읽기 쉽도록 다음 작성 규칙으로 다시 작성합니다. 이는 작은 트릭일 뿐이지만 많은 양의 코드 로직에서는 여러 곳에서 이를 따릅니다. 원칙은 분명히 도움이 될 것입니다.
코드를 읽을 때 그냥 읽고 또 읽어도 '끔찍한' 글을 보면 더 이상 참을 수 없게 되고, 천 마일의 제방이 개미 둥지에 무너지곤 합니다.
const isCreatureHuman = (creature) => {
// ...
}
if (isCreatureHuman(creature)) {
// ...
}
5. if...else를 많이 피하세요...
이 점은 제가 항상 강조해 왔습니다:
예를 들어 다음 코드는:
if(x===a){
res=A
}else if(x===b){
res=B
}else if(x===c){
res=C
}else if(x===d){
//...
}
맵 작성으로 다시 작성:
let mapRes={
a:A,
b:B,
c:C,
//...
}
res=mapRes[x]
또 다른 예는 다음 코드입니다:
const isMammal = (creature) => {
if (creature === "human") {
return true;
} else if (creature === "dog") {
return true;
} else if (creature === "cat") {
return true;
}
// ...
return false;
}
배열로 다시 작성:
const isMammal = (creature) => {
const mammals = ["human", "dog", "cat", /* ... */];
return mammals.includes(creature);
}
깨끗한 JavaScript 작성: 많은 if...else...
그래서 if...가 많을 때... 그렇지 않으면... 코드에서 더 많은 것을 생각해 보고 코드를 "더 깔끔하게" 보이도록 몇 가지 변경 사항을 적용할 수 있는지 확인하십시오.
요약: 위의 팁은 예제에서는 언급할 가치가 없어 보일 수 있지만 실제 프로젝트에서는 비즈니스 로직이 복잡해지고 코드의 양이 커지면 이러한 팁은 상상 이상으로 긍정적인 효과, 도움이 될 것입니다. .
【관련 권장 사항: javascript 학습 튜토리얼】
위 내용은 깔끔한 JS 코드를 작성하는 방법은 무엇입니까? 공유할 수 있는 5가지 글쓰기 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!