고품질 JS 코드 작성법_기본지식

효율적인 JavaScript 라이브러리를 작성하고 싶지만 어떻게 시작해야 할지 모르겠습니다.

다른 사람의 클래스 라이브러리를 읽어보았지만 이해하는 것 같았습니다.

js의 고급 기능을 공부할 예정인데, 권위 있는 책에 내용이 너무 흩어져 있어서

'용법'은 기억나지만, '사용'할 때 '방법'은 생각하지 않습니다.

아마도 당신도 나와 마찬가지로 보이지 않는 힘이 우리의 계획을 제약하고, 지식의 한계를 반복적으로 생각하게 만들고, 멈춰 서서 앞으로 나아가기 어렵게 만드는 것 같습니다.

이 기간 동안 다양한 과제, 코스 설계, 실험 보고서로 인해 부담감이 두 배로 커졌습니다. 조금이라도 시간을 내어 잠을 자지 않고, 과거에 읽었던 책을 정리하고 요약하는 일은 드물며, 나만의 클래스 라이브러리를 작성하는 데 더 가까워집니다.

이 글에서는 "Javascript Language Essence"와 "Effective JavaScript"에 대해 설명합니다. 예제는 디버깅되었으며 예제를 이해한 후 몇 가지 "심오한" 원칙을 좀 더 단순하게 만들고 싶습니다.

1. 가변 범위

프로그래머에게 범위는 산소와 같습니다. 그것은 어디에나 있는데, 당신은 그것에 대해 생각조차 하지 않는 경우가 많습니다. 그러나 오염되면(예: 전역 개체 사용) 질식할 수 있습니다(예: 응용 프로그램의 응답 속도가 느려짐). JavaScript의 핵심 범위 지정 규칙은 간단하고 잘 설계되었으며 강력합니다. JavaScript를 효과적으로 사용하려면 변수 범위에 대한 몇 가지 기본 개념을 숙지하고 파악하기 어렵고 불쾌한 문제를 일으킬 수 있는 일부 극단적인 경우를 이해해야 합니다.

1.1 전역 변수를 최대한 적게 사용하세요

Javascript를 사용하면 전역 네임스페이스에 변수를 쉽게 만들 수 있습니다. 전역 변수 생성은 어떠한 형태의 선언도 필요하지 않으며 프로그램 전체의 모든 코드에서 자동으로 액세스되므로 쉽게 생성됩니다.

저희 같은 초보자는 특정 요구 사항(예: 전송된 데이터를 기록하거나 특정 시간에 특정 기능이 호출되기를 기다리는 데 사용하거나 특정 기능을 자주 사용하는 등)이 발생할 때 전역 함수에 대한 생각이 망설여지거나, 1학년 때 배웠던 C 언어가 너무 프로세스 지향적 사고에 깊이 뿌리박혀 있고, 시스템이 깔끔하게 함수들로 가득 차 있습니다. 전역 변수를 정의하면 공유 공용 네임스페이스가 오염되고 예기치 않은 이름 지정 충돌이 발생할 수 있습니다. 전역 변수는 프로그램의 독립 구성 요소 간에 불필요한 결합을 초래하므로 모듈성에 해롭습니다. 진지하게 말하면, 너무 많은 전역 항목(스타일 시트 포함, div 또는 a의 스타일을 직접 정의)은 여러 사람이 참여하는 개발 프로세스에 통합될 때 치명적인 오류가 됩니다. 이것이 바로 jQuery의 모든 코드가 즉시 실행되는 익명 표현식, 즉 자체 호출 익명 함수로 래핑된 이유입니다. 브라우저가 jQuery 파일을 로드하면 자체 호출 익명 함수가 즉시 실행을 시작하고 jQuery의 각 모듈을 초기화하여 전역 변수가 손상 및 오염되고 다른 코드에 영향을 미치는 것을 방지합니다.

코드 복사 코드는 다음과 같습니다.

(함수(창,정의되지 않음){
var jQuery = ...
//...
​ window.jQuery = window.$ = jQuery;
})(창);

또한 "원하는 대로 먼저 작성하고 나중에 정리하는 것"이 ​​더 편리하다고 생각할 수도 있지만, 좋은 프로그래머는 프로그램의 구조에 끊임없이 주의를 기울이고 관련 기능을 분류하고 관련 없는 구성 요소를 분리하는 일을 계속합니다. . 프로그래밍 프로세스의 일부로 이러한 동작을 포함합니다.

전역 네임스페이스는 JavaScript 프로그램의 독립 구성 요소가 상호 작용할 수 있는 유일한 방법이므로 전역적으로 명명된 컨트롤의 사용은 불가피합니다. 구성 요소나 라이브러리는 일부 전역 변수를 정의해야 합니다. 프로그램의 다른 부분에서 사용하기 위해. 그렇지 않으면 지역 변수를 사용하는 것이 좋습니다.

코드 복사 코드는 다음과 같습니다.

this.foo ;//정의되지 않음
foo = "전역 foo";
this.foo ;//"전역 foo"
var foo = "전역 foo";
this.foo = "변경됨";
foo ;//변경됨

JavaScript의 전역 네임스페이스는 프로그램의 전역 범위에서 액세스할 수 있는 전역 개체에도 노출되며, 이는 this 키워드의 초기 값 역할을 합니다. 웹 브라우저에서 전역 개체는 전역 창 변수에 바인딩됩니다. 이는 전역 변수를 만드는 두 가지 방법이 있음을 의미합니다. 전역 범위에서 var를 사용하여 선언하거나 전역 개체에 추가하는 것입니다. var 선언을 사용하면 프로그램 범위에서 전역 변수의 영향을 명확하게 표현할 수 있다는 장점이 있습니다.

바인딩된 전역 변수에 대한 참조는 런타임 오류를 일으킬 수 있으므로 범위를 명확하고 간결하게 유지하면 코드 사용자가 프로그램이 선언하는 전역 변수를 더 쉽게 이해할 수 있습니다.

글로벌 개체는 글로벌 환경에 대한 동적 응답 메커니즘을 제공하므로 이를 사용하여 실행 중인 환경을 쿼리하고 이 플랫폼에서 사용할 수 있는 기능을 감지할 수 있습니다.

eg.ES5에는 JSON 형식의 데이터를 읽고 쓸 수 있는 전역 JSON 개체가 도입되었습니다.

코드 복사 코드는 다음과 같습니다.

if(!this.JSON){
This.JSON = {
           구문 분석: ..,
          문자열화: ...                         }  
}

JSON 구현을 제공하는 경우 물론 자체 구현을 간단하고 무조건 사용할 수 있습니다. 그러나 호스팅 환경에서 제공하는 내장 구현은 브라우저에 C로 작성되므로 거의 더 적합합니다. 특정 표준에 대한 정확성과 일관성을 엄격하게 검사하고 일반적으로 타사 구현보다 더 나은 성능을 제공하기 때문입니다.

데이터 구조 강좌의 원래 설계는 문자열의 기본 연산을 시뮬레이션했기 때문에 언어 자체에서 제공하는 방법을 사용할 수 없었습니다. JavaScript는 배열에 대한 기본 연산을 매우 잘 구현합니다. 단지 일반적인 학습 용도라면 언어 자체에서 제공하는 메서드를 시뮬레이션하는 아이디어도 좋지만 실제로 개발에 투자한다면 그럴 필요는 없습니다. 우선 JavaScript의 내장 메소드 사용을 고려하십시오.

1.2 함께 사용하지 마세요

with 문은 애플리케이션을 신뢰할 수 없고 비효율적으로 만드는 "편의성"을 제공합니다. 단일 개체에 대해 일련의 메서드를 순서대로 호출해야 합니다. with 문을 사용하면 객체에 대한 반복 참조를 쉽게 피할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

기능상태(정보){
var 위젯 = 새 위젯();
with(위젯){
             setBackground("blue");
             setForeground("white");
             setText("상태 : " info);
표시();
}  
}

with 문을 사용하여 모듈 객체에서 변수를 "가져오는" 유혹도 있습니다.

코드 복사 코드는 다음과 같습니다.

함수 f(x,y){
with(수학){
           return min(round(x),sqrt(y));//추상 참조
}
}

사실 JavaScript는 모든 변수를 동일하게 취급합니다. JavaScript는 가장 안쪽 범위에서 시작하여 바깥쪽으로 작업하는 변수를 찾습니다. with 언어는 객체가 변수 범위를 나타내는 것처럼 처리하므로 with 블록 내에서 변수 조회는 주어진 변수 이름의 속성을 검색하는 것으로 시작됩니다. 이 개체에서 속성을 찾을 수 없으면 외부 범위에서 검색이 계속됩니다. with 블록의 외부 변수에 대한 모든 참조는 with 객체(및 해당 프로토타입 객체)에 동일한 이름을 가진 속성이 없다고 암시적으로 가정합니다. 프로그램의 다른 곳에서 with 객체나 그 프로토타입 객체를 생성하거나 수정하는 것이 반드시 이 가정을 따르지는 않습니다. 물론 JavaScript 엔진은 사용자가 사용하는 로컬 변수를 찾기 위해 로컬 코드를 읽지 않습니다. JavaScript 범위는 효율적인 내부 데이터 구조로 표현될 수 있으며 변수 조회는 매우 빠릅니다. 그러나 with 코드 블록은 with 코드의 모든 변수를 찾기 위해 객체의 프로토타입 체인을 검색해야 하기 때문에 실행 속도가 일반 코드 블록보다 훨씬 느립니다.

언어 대신 객체를 짧은 변수 이름에 바인딩하는 간단한 방법이 있습니다.

코드 복사 코드는 다음과 같습니다.

기능상태(정보){
var w = 새 위젯();
 
w.setBackground("blue");
w.setForeground("흰색");
              w.setText("상태 : " info);
w.show();

}

다른 경우에 가장 좋은 방법은 지역 변수를 관련 속성에 명시적으로 바인딩하는 것입니다.

코드 복사 코드는 다음과 같습니다.

함수 f(x,y){
var min = Math.min,
round = Math.round,
          sqrt   = Math.sqrt;                                         min(round(x),sqrt(y))를 반환합니다.
}

1.3 클로저에 능숙함

클로저를 이해하는 데는 하나의 개념이 있습니다.

a) JavaScript를 사용하면 현재 함수 외부에 정의된 변수를 참조할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

함수 makeSandwich(){
var MagicIngredient = "땅콩 버터";
함수 make(채우기){
         return MagicIngredient " 및 " 채우기;
}
반환 make("젤리")
}
makeSandwich();// "땅콩버터와 젤리"

b) 외부 함수가 반환되더라도 현재 함수는 외부 함수에 정의된 변수를 계속 참조할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

함수 makeSandwich(){
var MagicIngredient = "땅콩 버터";
함수 make(채우기){
         return MagicIngredient " 및 " 채우기;
}
반품 제조사
}
var f = 샌드위치메이커();
f ("젤리"); // "땅콩버터와 젤리"
f("바나나");                        // "땅콩 버터와 바나나"
f("mallows");                         // "땅콩 버터와 아욱"

javascriptd의 함수 값에는 호출 시 실행하는 데 필요한 코드보다 더 많은 정보가 포함되어 있습니다. 또한 JavaScript 함수 값은 해당 범위에 정의된 참조할 수 있는 변수를 내부적으로 저장합니다. 해당 범위 내에서 변수를 추적하는 함수를 클로저라고 합니다.

make 함수는 클로저이며 해당 코드는 MagicIngredient와 Filling이라는 두 가지 외부 변수를 참조합니다. make 함수가 호출될 때마다 클로저가 이 두 변수를 저장하기 때문에 해당 코드는 이 두 변수를 참조할 수 있습니다.

함수는 매개변수 및 외부 함수 변수를 포함하여 해당 범위 내의 모든 변수를 참조할 수 있습니다. 우리는 이를 활용하여 좀 더 일반적인 SandwichMaker 함수를 작성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

함수 makeSandwich(magicIngredient){
함수 make(채우기){
         return MagicIngredient " 및 " 채우기;
}
반품 제조사
}
var f = 샌드위치메이커("햄");
f("치즈");                                // "햄과 치즈"
f("겨자");                                   // "햄과 겨자"

클로저는 JavaScript의 가장 우아하고 표현력이 풍부한 기능 중 하나이며 많은 관용어의 핵심입니다.

c) 클로저는 외부 변수의 값을 업데이트할 수 있습니다. 사실 클로저는 값의 복사본이 아닌 외부 변수에 대한 참조를 저장합니다. 따라서 이러한 외부 변수에 액세스할 수 있는 모든 클로저에 대해 업데이트가 이루어질 수 있습니다.

코드 복사 코드는 다음과 같습니다.

함수 상자(){
var val = 정의되지 않음;
복귀 {
​​​​​ 세트: function(newval) {val = newval;},
             get: 함수 (){반환 값;},
         유형: function(){return typeof val;}
};
}
var b = 상자();
b.type(); //정의되지 않음
b.set(98.6);
b.get();//98.6
b.type();//숫자

이 예는 세 개의 클로저를 포함하는 객체를 생성합니다. 이 세 가지 클로저는 set, type 및 get 속성으로, 모두 val 변수에 대한 액세스를 공유합니다. 그런 다음 get을 호출하고 입력하여 업데이트된 결과를 확인합니다.

1.4 변수 선언 개선 이해

Javascript는 이 범위 지정 방법을 지원하지만(foo 변수에 대한 참조는 foo 변수 선언에 가장 가까운 범위에 바인딩됨) 블록 수준 범위 지정을 지원하지 않습니다(변수 정의의 범위는 가장 가까운 둘러싸는 범위) 명령문 또는 코드 블록).

이 기능을 이해하지 못하면 미묘한 버그가 발생할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

함수 isWinner(플레이어,기타){
var 최고 = 0;
for(var i = 0,n = other.length ;i            var player = 기타[i];
If(player.score > 최고){
~                                        최고 = player.score;           }
}
플레이어.점수 > 최고;
}

1.5 명명된 함수 표현식의 범위 지정이 어색함을 주의하세요

코드 복사 코드는 다음과 같습니다.

함수 double(x){ return x*2 }
var f = function(x){ return x*2 }

동일한 함수 코드를 표현식으로 사용할 수도 있지만 전혀 다른 의미를 갖습니다. 익명 함수와 명명된 함수 표현식의 공식적인 차이점은 후자가 함수의 지역 변수와 동일한 함수 이름을 가진 변수에 바인딩된다는 것입니다. 이는 재귀 함수 표현식을 작성하는 데 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var f = 함수 찾기(트리,키){
//....
find(tree.left, key) 반환
                   find(tree.right,key);                                              }

find 변수의 범위는 함수 선언과 달리 내부 함수 이름을 통해 외부에서 참조할 수 없다는 점에 유의할 가치가 있습니다.

코드 복사 코드는 다음과 같습니다.

find(myTree,"foo");//오류: find가 정의되지 않았습니다.

var 생성자 = function(){ null 반환 }
var f= 함수(){
반환 생성자();
};
f();//{}(ES3 환경에서)

이 프로그램은 null을 생성하는 것처럼 보이지만 실제로는 새로운 개체를 생성합니다.

명명된 함수 변수의 범위는 with 문과 마찬가지로 Object.prototype.constructor(즉, Object의 생성자)를 상속하기 때문에 이 범위는 Object.prototype의 동적 변경에 의해 영향을 받습니다. 시스템에서 함수 표현식의 범위를 오염시키는 객체를 방지하는 방법은 언제든지 Object.prototype에 속성을 추가하지 않고 표준 Object.prototype 속성과 동일한 이름을 가진 지역 변수를 사용하지 않는 것입니다.

널리 사용되는 JavaScript 엔진의 또 다른 단점은 명명된 함수 표현식 선언이 촉진된다는 것입니다.

코드 복사 코드는 다음과 같습니다.

var f = 함수 g(){return 17;}
g(); //17 (비규격 환경)

일부 JavaScript 환경에서는 f와 g 두 함수를 서로 다른 객체로 취급하여 불필요한 메모리 할당이 발생하기도 합니다.

1.6 로컬 블록 함수에 대한 어색한 범위 선언에 주의하세요

코드 복사 코드는 다음과 같습니다.

함수 f() {"전역" 반환 }
기능 테스트(x){
함수 f(){return "local";}
var 결과 = [];
If(x){
          result.push(f());
}  
result.push(f());
결과결과;
}
테스트(참); //["로컬","로컬"]
테스트(거짓); //["로컬"]

코드 복사 코드는 다음과 같습니다.

함수 f() {"전역" 반환 }
기능 테스트(x){
var 결과 = [];
If(x){
           함수 f(){return "local";}
          result.push(f());
}  
result.push(f());
결과결과;
}
테스트(참); //["로컬","로컬"]
테스트(거짓); //["로컬"]

자바스크립트에는 블록 수준 범위가 없으므로 내부 함수 f의 범위는 전체 테스트 함수여야 합니다. 이는 일부 JavaScript 환경에서는 해당되지만 모든 JavaScript 환경에서는 해당 기능이 엄격 모드에서 오류로 보고됩니다(로컬 블록 함수 선언이 있는 엄격 모드의 프로그램은 이를 구문 오류로 보고합니다). - 이식 가능한 코드를 제공하고 표준의 향후 버전에 대한 로컬 블록 기능 선언에 보다 합리적이고 신뢰할 수 있는 의미를 제공합니다. 이러한 상황에서는 전역 함수 f를 가리키는 테스트 함수에서 지역 변수를 선언하는 것을 고려할 수 있습니다.