코드 개선 팁

기능 이름은 어떻게 지정합니까?

// For showing loading spinner
function loading(){
loader.hidden = false
}

// Even Comments are not necessary
function showLoadingSpinner(){
loader.hidden = false
}

특정 동작으로 함수의 이름을 지정합니다.

재귀 함수는 오류의 무한 루프로 이어질 수 있습니다.

function getdatafromAPI(){
try{
//Function
throw new Error('OOps')
}catch(error){
getdatafromAPI()
}
}

여기에서 무슨 일이 일어날지 상상할 수 있습니까?
해결 방법: 특정 횟수만큼 함수를 실행할 수 있도록 catch 블록에 일부 카운터 변수를 설정하고 여전히 오류가 표시되면 오류 정의 오류를 표시합니다.

보기에 필요한 것만 전달하여 네트워크가 느릴 때 웹 사이트의 성능을 높입니다.
initial_load 부울을 생성하고 첫 번째 로드를 다른 모든 로드에 대해 false로 설정하고 초기 로드를 빠르게 만듭니다.
더 적은 데이터를 제공할수록 웹 사이트가 더 빨라집니다.

Js의 새로운 기능을 최신 상태로 유지하려면 TC39/제안을 확인하십시오.

코드를 깔끔하게 만드는 것이 가능할 때마다 다른 모듈을 만듭니다.

html 파일에서 javascript 가져오기 순서를 확인하십시오. 정말 중요합니다.

자바스크립트를 가져오는 다양한 방법
async - 실행 순서가 중요하지 않은 패키지에만 해당됩니다.
구글 애널리틱스 스크립트 같은 것
defer - 모든 것을 로드한 후에만 스크립트를 실행합니다.

Javascript는 웹 페이지의 데이터 변경에 대한 반응입니다.
그리고 반응 및 각도와 같은 프런트엔드 프레임워크는 이러한 반응을 더 깨끗하고 빠르게 작성하는 데 도움이 됩니다.

javascript에서 html의 textcotent와 innertext의 차이점
Innertext는 계산 비용이 많이 들 수 있는 내부 콘텐츠가 변경되지 않은 경우에도 전체 페이지의 렌더링을 트리거합니다.

함수 유형의 변수를 선언하지 말고 변수로 변경하십시오. 좋은 사례는 아닙니다.

배열 또는 객체를 사용할 데이터 유형을 선택하시겠습니까?
Array를 사용하는 동안 배열을 통해 요소를 삭제하려면 전체 배열을 거쳐야 하지만 객체의 경우 간단한 키로 이를 수행할 수 있으며 프로세스가 더 빨라집니다.

일부 기능을 구현하기 위해 사용자 브라우저를 확인하는 것은 브라우저가 항상 기능을 업데이트하기 때문에 번거롭습니다. windows.navigator.userAgent에서 브라우저 유형을 확인할 수 있지만 여러 브라우저 옵션이 있습니다.
따라서 조건부에서 항상 올바른 브라우저 특정 코드입니다.

자바스크립트의 모델 개념:
모듈의 경우 어떤 순서로든 파일을 넣을 수 있으며 여전히 작동합니다. 스크립트 파일을 그대로 추가하면 순서가 중요합니다. 모듈의 경우 순서는 중요하지 않습니다.
모듈은 다른 파일에 연결된 javascript의 단일 항목 파일입니다.
웹 번들러:
번들러는 코드의 어떤 부분이 사용되는지 이해하고 임포트를 위한 효율적인 번들을 생성하는 소프트웨어입니다. 트리 쉐이킹의 개념에 따라 작동하며 사용하지 않는 코드를 제거합니다.
동적 모듈 로딩:

import('./modules/myModule.js')
  .then((module) => {
    // Do something with the module.
  });

표시할 때: 플렉스; html에 숨겨진 속성이 작동하지 않습니다. 속성을 숨기려면 다른 클래스를 추가한 다음 그 위에 아무것도 표시하지 않도록 해야 합니다.