고 품질의 JS 코드 작성 (변수의 성명 과 for 순환)

재능 이 넘 치 는 Stoyan Stefanov. 그 가 쓴 O 'Reilly 초판 의 새 책' JavaScript Patterns' (JavaScript 모드) 에서 구체 적 으로 하 나 는 고 품질 JavaScript 의 일부 요 소 를 작성 하 는 것 이다. 예 를 들 어 전체 변 수 를 피하 고 단일 변수 성명 을 사용 하 며 순환 중 에 미리 캐 시 length (길이) 를 사용 하고 코드 에 따라 읽 으 며 더 많은 것 을 사용 하 는 것 이다.
1. 유지 가능 한 코드 소프트웨어 bug 의 복 구 는 비 싸 고 시간 이 지 날수 록 이러한 bug 의 원가 도 증가 합 니 다. 특히 큰 프로젝트 나 회사 에 대해 bug 를 복원 하 는 사람 은 코드 를 쓰 는 사람 이 아 닙 니 다.따라서 코드 를 이해 하 는 데 걸 리 는 시간 을 줄 여야 한다. 한 동안 자신 이 쓴 코드 든 팀 의 다른 멤버 들 이 쓴 코드 든.또한 응용 이 성숙 해 지면 서 다른 일이 많이 발생 할 수 있 으 므 로 심사, 수정, 조정 을 요구 합 니 다.이것 이 바로 유지 가능 한 코드 를 만 드 는 것 이 프로그램의 성공 에 매우 중요 한 이유 입 니 다.유지 가능 한 코드 는:

읽 을 수 있 는

일치 하 는

예측 가능

같은 사람 이 쓴 것 처럼 보인다

2. 전체 변수의 문 제 를 기록 했다

js 는 함 수 를 통 해 변수의 역할 영역 을 관리 하기 때문에 함수 내부 에서 설명 하 는 변 수 는 이 함수 내부 에 만 있 고 함수 밖 에 서 는 사용 할 수 없습니다.다른 한편, 전역 변 수 는 모든 함수 밖에서 설명 하거나 설명 하지 않 고 간단하게 사용 합 니 다.
모든 JavaScript 환경 에는 전역 대상 window 가 있 습 니 다. 임의의 함수 밖에서 this 를 사용 할 때 접근 할 수 있 습 니 다.당신 이 만 든 모든 변 수 는 이 전역 대상 의 속성 window (보통) 가 되 어 전역 대상 자 체 를 가리 키 고 있 습 니 다.다음 코드 세 션 은 브 라 우 저 환경 에서 만 들 고 접근 하 는 전역 변 수 를 보 여 줍 니 다.

var checkThis = function(){ 
alert( this.x); 
}; 
var x = 'this is a property of window'; 
var obj = {}; 
obj.x = 100; 
obj.y = function(){ alert( this.x ); }; 
obj.y(); //   100 
checkThis(); //   'this is a property of window' 

자 바스 크 립 트 언어 에서 this 의 정 의 는: this 는 함 수 를 포함 하 는 방법 으로 호출 될 때 속 하 는 대상 입 니 다.여기 서 'this is a property of window' 가 왜 나 오 는 지 헷 갈 릴 수 있 습 니 다.자 바스 크 립 트 의 변수 역할 영역 에 '전역 변 수 는 window 대상 의 속성' 이라는 규칙 이 있 습 니 다.checkThis () 를 실행 할 때 window. checkThis () 에 해당 하기 때문에 이때 checkThis 함수 에 있 는 this 키워드 의 가리 키 는 방향 이 window 대상 이 되 고 window 대상 에 또 하나의 x 속성 ('thisis a property of window') 이 있 기 때문에 'thisis a property of window' 가 팝 업 됩 니 다.
마찬가지 로 전역 변수의 문제 입 니 다. 전역 변 수 를 정의 하면 자바 스 크 립 트 응용 프로그램 과 웹 페이지 의 모든 코드 가 이러한 전역 변 수 를 공유 합 니 다. 그들 은 같은 전역 네 임 스페이스 에 살 고 있 기 때문에 프로그램의 두 부분 이 같은 이름 이지 만 서로 다른 역할 을 하 는 전역 변 수 를 정의 할 때 이름 충돌 이 불가피 합 니 다.
예 를 들 어 웹 페이지 는 이 페이지 개발 자가 쓴 코드 가 아 닌 것 을 포함 합 니 다.
제3자 자 바스 크 립 트 라 이브 러 리 광고 측의 스 크 립 트 코드
예 를 들 어 이 제3자 스 크 립 트 는 result 라 는 전역 변 수 를 정의 합 니 다.이 어 함수 에서 도 result 라 는 전역 변 수 를 정의 합 니 다.그 결 과 는 뒤의 변수 가 앞 에 있 는 것 을 덮어 쓰 면 제3자 스 크 립 트 가 정상적으로 작 동 하지 않 습 니 다!
그렇다면 js 에서 var 성명 과 var 성명 을 통과 하지 않 는 변수의 차 이 는 무엇 일 까?
JS 에서 변 수 는 분 현 식 설명 과 암시 적 설명 을 설명 합 니 다.
Var i = 100 디 스 플레이 설명
i = 100 암시 적 설명 함수 에서 var 키 워드 를 사용 하여 명시 적 으로 설명 하면 변 수 는 부분 변수 로 합 니 다.var 키 워드 를 사용 하지 않 고 직접 할당 방식 으로 전역 변 수 를 설명 합 니 다.그리고 우리 가 성명 이 없 는 변 수 를 방문 할 때 JS 가 잘못 보고 합 니 다.그러나 우리 가 성명 하지 않 은 변수 에 값 을 부여 할 때 JS 는 오 류 를 보고 하지 않 을 것 이다. 반대로 이것 은 우리 가 전역 변 수 를 암시 적 으로 설명 해 야 한다 고 생각 할 것 이다.var num = 1 은 현재 도 메 인 (예 를 들 어 함수) 에서 변 수 를 설명 하고 방법 에서 설명 하면 부분 변수 입 니 다.전역 에서 설명 하면 전역 변수 입 니 다.그리고 num = 1 은 사실상 속성 할당 작업 입 니 다.먼저, 이 는 현재 역할 도 메 인 체인 (예 를 들 어 방법 에서 설명 하면 현재 역할 도 메 인 체인 은 전체 역할 도 메 인 과 방법 부분 역할 도 메 인 을 대표 합 니 다) 에서 num 을 분석 하려 고 합 니 다.현재 역할 영역 체인 에서 num 을 찾 으 면 num 속성 할당 을 실행 합 니 다.num 을 찾 지 못 하면 전체 대상 (즉, 현재 역할 도 메 인 체인 의 최상 위 대상, 예 를 들 어 window 대상) 에서 num 속성 을 만 들 고 값 을 부여 할 수 있 습 니 다.
또한, 작업 체인 을 사용 하여 일부 var 성명 을 하 는 암시 적 변 수 를 만 든 예 도 있다.다음 세 션 에서 a 는 로 컬 변수 이지 만 b 는 전역 변수 입 니 다. 이것 은 당신 이 원 하 는 것 이 아 닐 수도 있 습 니 다.

//   ，    
function foo() {
   var a = b = 0;
   // ...
}

이 말의 뜻 은 var a = (b = 0) 에 해당 한다.그래서 만약 에 우리 가 임무 체인 으로 값 을 부여 할 준비 가 되 어 있다 면 우 리 는 먼저 var a, b 를 필요 로 한다.그리고 a = b = 0 을 통 해할당, 이렇게 하면 아무런 문제 도 발생 하지 않 을 것 이다.
그렇다면 이름 변 수 는 맨 위 에 있 는 단일 var 형식 이 가장 좋 습 니 다.

function func() {
   var a = 1,
       b = 2,
       sum = a + b,
       myobject = {},
       i,
       j;
   // function body...
}

var 문 구 를 사용 하여 여러 변 수 를 설명 하고 쉼표 로 구분 할 수 있 습 니 다.이와 같이 변 수 를 초기 화하 고 값 을 초기 화 하 는 방법 은 논리 적 오 류 를 방지 하고 가 독성 을 증가 시 킬 수 있다.
질문
for 순환 에서 배열 이나 배열 과 유사 한 대상 의 값 을 순환 적 으로 얻 을 수 있 습 니 다. 일반적인 순환 형식 은 다음 과 같 습 니 다.

//      
for (var i = 0; i < myarray.length; i++) {
   //   myarray[i]    
}

이런 형식의 순환 부족 은 순환 할 때마다 배열 의 길 이 를 가 져 오 는 데 있다.이번 에는 코드 를 낮 추 세 요. 특히 my array 가 배열 이 아니 라 HTML Collection 대상 일 때.HTML Collections 는 DOM 방법 으로 되 돌아 오 는 대상 을 말 합 니 다. 예 를 들 어:
document. getElementsByName () document. getElementsByClassName () document. getElementsByTagName () 집합의 번 거 로 움 은 기본 문서 (HTML 페이지) 를 실시 간 으로 조회 하 는 데 있다.이것 은 매번 집합 길 이 를 방문 할 때마다 실시 간 으로 DOM 을 조회 해 야 한 다 는 것 을 의미 하 며, DOM 작업 은 일반적으로 비교적 비싸다.
이것 이 바로 값 을 순환 적 으로 가 져 올 때 캐 시 배열 (또는 집합) 의 길이 가 비교적 좋 은 형식 입 니 다. 아래 코드 에 표 시 된 것 처럼 (즉, 배열 길이 에 변수 값 을 먼저 정의 하 는 것)

for (var i = 0, max = myarray.length; i < max; i++) {
   //   myarray[i]    
}

이렇게 해서 이 순환 과정 에서 길이 값 을 한 번 만 검색 했다.
마지막 으로 순환 을 조정 해 야 할 것 은 다음 표현 식 을 사용 하여 i + + 를 교체 하 는 것 입 니 다.
i = i + 1 i += 1