효율적인 JavaScript 클래스 라이브러리를 작성하고 싶지만 시작할 수는 없습니다.
다른 사람들의 도서관을 읽으려고 노력하지만 마치 이해되는 것처럼 이해하십시오.
고급 JS 기능을 잘 연구 할 계획이지만 권위있는 책의 내용은 너무 흩어져 있습니다.
"사용법"을 기억하더라도 "사용"하고 싶을 때 "방법"에 대해 생각하지 않습니다.
어쩌면 당신은 나처럼 우리의 계획을 제한하는 보이지 않는 힘을 가지고있는 것 같습니다. 우리는 지식의 한계가 우리를 여전히 서 있고 앞으로 나아 가기가 어려워 졌다고 반복적으로 생각하게합니다.
이 기간 동안 다양한 숙제, 코스 디자인 및 실험 보고서가 두 배가되었습니다. 약간의 시간을 짜서, 절대로 잠을 자지 않으며, 과거에 읽은 책들을 내 자신의 도서관에 더 가까이 다가 가기 위해서는 드 rare니다.
이 기사는 "JavaScript Language Essence"및 "Effective JavaScript"에서 참조됩니다. 모든 예제가 디버깅되었습니다. 그것들을 이해 한 후, 나는 "깊은"원리를 조금 더 간단하게 만들고 싶습니다.
1. 가변 범위
범위는 프로그래머에게 산소와 같습니다. 그것은 어디에나 있고 당신은 그것에 대해 생각조차하지 않습니다. 그러나 오염이 오염되면 (예 : 글로벌 객체 사용) 질식을 느낍니다 (예 : 느린 응용 프로그램 응답). JavaScript 코어 범위 규칙은 간단하고 신중하게 설계되었으며 매우 강력합니다. JavaScript를 효과적으로 사용하려면 가변 범위의 기본 개념을 마스터하고 애매하고 성가신 문제로 이어질 수있는 극단적 인 상황을 이해해야합니다.
1.1 글로벌 변수를 최대한 적게 사용하십시오.
JavaScript는 글로벌 네임 스페이스에서 변수를 쉽게 만들 수 있습니다. 글로벌 변수 생성은 어떤 형태의 선언이 필요하지 않으며 전체 프로그램의 모든 코드에서 자동으로 액세스 할 수 있기 때문에 쉽지 않습니다.
미국 초보자의 경우 특정 요구 사항을 만나면 (예 : 전송 된 데이터가 기록 될 때, 특정 시간이 호출되기를 기다리거나 특정 기능이 자주 사용되는 경우), 우리는 결국 글로벌 기능을 생각합니다. 내가 신입생 한 해에 배운 C 언어 프로세스 지향적 사고조차도 너무 깊이 뿌리를 내리고 있으며 시스템은 깔끔하게 기능으로 가득 차 있습니다. 글로벌 변수를 정의하면 공유 된 공개 네임 스페이스를 오염시킬 수 있으며 예상치 못한 명명 충돌로 이어질 수 있습니다. 글로벌 변수는 또한 프로그램의 독립적 인 구성 요소간에 불필요한 결합을 유발하기 때문에 모듈성에 도움이되지 않습니다. 진지하게 말하면, 너무 많은 글로벌 (스타일 시트 포함, Div 또는 A의 스타일을 직접 정의) 및 여러 사람의 개발에 통합하는 것은 치명적인 실수가 될 것입니다. 그렇기 때문에 모든 jQuery 코드가 즉시 실행 된 익명 표현식 - 자체 대화하는 익명 기능으로 래핑되는 이유입니다. 브라우저가 jQuery 파일을로드하면 익명 함수를 호출 한 후 즉시 실행을 시작하여 다양한 jQuery 모듈을 초기화하여 전역 변수를 파괴하고 오염시키지 않으며 다른 코드에 영향을 미치지 않습니다.
코드 사본은 다음과 같습니다.
(함수 (창, 정의되지 않은) {
var jquery = ...
// ...
Window.jQuery = Window. $ = jQuery;
})(창문);
또한 "먼저 작성하고 나중에 정리하는 방법"이 더 편리하다고 생각할 수도 있지만, 우수한 프로그래머는 프로그램 구조에 지속적으로주의를 기울이고 관련 기능을 지속적으로 분류하며 별도의 관련없는 구성 요소를 분류 할 수 있으며 이러한 동작은 프로그래밍 공식의 일부입니다.
글로벌 네임 스페이스는 JavaScript 프로그램의 독립적 인 구성 요소가 상호 작용할 수있는 유일한 방법이므로 글로벌 이름 지정 제어의 사용은 불가피합니다. 구성 요소 또는 라이브러리는 일부 전역 변수를 정의해야합니다. 프로그램의 다른 부분에서 사용합니다. 그렇지 않으면 로컬 변수를 사용하는 것이 가장 좋습니다.
코드 사본은 다음과 같습니다.
this.foo; // 정의되지 않았습니다
foo = "Global foo";
this.foo; // "Global foo"
var foo = "Global foo";
this.foo = "변경";
foo; // 변경
JavaScript의 글로벌 네임 스페이스는이 키워드의 초기 값 역할을하는 프로그램의 글로벌 범위에서 액세스 할 수있는 전역 객체에도 노출됩니다. 웹 브라우저에서 글로벌 객체는 글로벌 창 변수에 바인딩됩니다. 이것은 글로벌 변수를 생성하는 두 가지 방법이 있음을 의미합니다. 전역 범위 내에서 Var로 선언하거나 글로벌 오브젝트에 추가하십시오. VAR 선언을 사용하는 장점은 프로그램 범위에서 글로벌 변수의 영향을 명확하게 표현할 수 있다는 것입니다.
바운드 글로벌 변수에 대한 참조가 런타임 오류를 일으킬 수 있다는 점을 감안할 때, 명확하고 간결한 저장 범위를 사용하면 코드 사용자가 프로그램이 선언하는 글로벌 변수를 더 쉽게 이해할 수 있습니다.
Global Object는 글로벌 환경에 동적 응답 메커니즘을 제공하므로 실행중인 환경을 쿼리 하고이 플랫폼에서 사용할 수있는 기능을 감지하는 데 사용할 수 있습니다.
예 : ES5는 JSON 형식 데이터를 읽고 쓰는 글로벌 JSON 객체를 소개합니다.
코드 사본은 다음과 같습니다.
if (! this.json) {
this.json = {
구문 분석 : ..,
Stringify : ...
}
}
JSON의 구현을 제공하는 경우 물론 간단하고 무조건 구현을 사용할 수 있습니다. 그러나 호스트 환경에서 제공하는 내장 구현은 C의 브라우저에 기록되기 때문에 거의 더 적합합니다. 특정 표준에 따라 정확성과 일관성을 엄격하게 확인하고 일반적으로 타사 구현보다 더 나은 성능을 제공하기 때문입니다.
데이터 구조 코스 설계 시뮬레이션 문자열의 기본 작동은 언어 자체가 제공하는 방법을 사용할 수 없어야했습니다. JavaScript는 배열의 기본 작업을 매우 잘 구현합니다. 일반적인 학습 요구에만 해당되는 경우 언어 자체가 제공하는 시뮬레이션 방법에 대한 아이디어는 좋지만 실제로 개발에 투자하는 경우 가능한 빨리 JavaScript 내장 방법을 선택하는 것을 고려할 필요는 없습니다.
1.2 사용하지 마십시오
With 문은 응용 프로그램을 신뢰할 수없고 비효율적으로 만드는 "편의"를 제공합니다. 우리는 단일 객체에서 일련의 메소드를 차례로 호출해야합니다. with 문을 사용하면 객체에 대한 중복 참조를 쉽게 피할 수 있습니다.
코드 사본은 다음과 같습니다.
함수 상태 (정보) {
var 위젯 = 새로운 위젯 ();
(위젯) {
좌절장 ( "파란색");
setforeground ( "흰색");
setText ( "상태 :"+info);
보여주다();
}
}
또한 모듈 객체에서 "가져 오기"(가져 오기) 변수에 with 명령문을 사용하려는 유혹이 있습니다.
코드 사본은 다음과 같습니다.
함수 f (x, y) {
(수학) {
반환 min (라운드 (x), sqrt (y)); // 추상 인용문
}
}
실제로 JavaScript는 모든 변수를 동일하게 처리합니다. JavaScript는 가장 안쪽 범위에서 시작하여 변수를 바깥쪽으로 찾습니다. with language는 객체를 가변 범위를 나타내는 것처럼 객체를 취급하므로 코드 블록을 사용하여 변수 검색은 주어진 변수 이름의 속성을 검색하여 시작합니다. 이 객체에서 속성을 찾을 수없는 경우 외부 범위에서 계속 검색하십시오. With Block의 각 외부 변수에 대한 참조는 암시 적으로 객체 (및 프로토 타입 개체)에 동일한 이름을 가진 속성이 없다고 가정합니다. 프로그램의 다른 곳에서 또는 그 프로토 타입으로 개체를 작성하거나 수정한다고해서 반드시 그러한 가정을 따르는 것은 아닙니다. JavaScript 엔진은 확실히 사용중인 지역 변수를 얻기 위해 로컬 코드를 읽지 않습니다. JavaScripe 범위는 효율적인 내부 데이터 구조로 표시 될 수 있으며 가변 검색은 매우 빠릅니다. 그러나 코드 블록이있는 코드 블록은 객체의 프로토 타입 체인을 검색하여 코드에서 모든 변수를 찾을 필요가 있으므로 실행 속도는 일반 코드 블록보다 훨씬 낮습니다.
With Language 대신 객체를 짧은 변수 이름으로 바인딩하는 것이 간단합니다.
코드 사본은 다음과 같습니다.
함수 상태 (정보) {
var w = 새로운 위젯 ();
W. 세트백 그라운드 ( "파란색");
w.setforeground ( "흰색");
w.settext ( "상태 :"+info);
w.show ();
}
다른 경우, 가장 좋은 방법은 로컬 변수를 관련 속성에 명시 적으로 바인딩하는 것입니다.
코드 사본은 다음과 같습니다.
함수 f (x, y) {
var min = math.min,
Round = Math.round,
sqrt = math.sqrt;
반환 최소 (라운드 (x), sqrt (y));
}
1.3 폐쇄 능력
폐쇄를 이해하기위한 단일 개념이 있습니다.
a) JavaScript를 사용하면 현재 함수 외부에 정의 된 변수를 참조 할 수 있습니다.
코드 사본은 다음과 같습니다.
함수 makeandwich () {
var magicingredient = "땅콩 버터";
함수 Make (충전) {
Magicingredient + "및" + 충전물을 반환합니다.
}
리턴 메이드 ( "젤리");
}
Makesandwich (); // "땅콩 버터와 젤리"
b) 외부 함수가 반환 되더라도 현재 함수는 여전히 외부 함수에 의해 정의 된 변수를 참조 할 수 있습니다.
코드 사본은 다음과 같습니다.
함수 makeandwich () {
var magicingredient = "땅콩 버터";
함수 Make (충전) {
Magicingredient + "및" + 충전물을 반환합니다.
}
반환 제작;
}
var f = 샌드위치 메이커 ();
f ( "젤리"); // "땅콩 버터와 젤리"
f ( "바나나"); // "땅콩 버터와 바나나"
f ( "mallows"); // "땅콩 버터와 망토"
JavaScriptd의 함수 값에는 호출 될 때 실행하는 데 필요한 코드보다 더 많은 정보가 포함되어 있습니다. 또한 JavaScript 함수 값은 내부적으로 동봉 된 범위로 정의 할 수있는 변수를 내부적으로 저장합니다. 커버 범위 내에서 변수를 추적하는 기능을 폐쇄라고합니다.
Make Function은 코드가 두 가지 외부 변수, 즉 Magicingredient 및 Filling을 나타내는 클로저입니다. Make 함수가 호출 될 때마다 Closure는이 두 변수를 저장하기 때문에 코드는이 두 변수를 참조 할 수 있습니다.
함수는 매개 변수 및 외부 함수 변수를 포함하여 범위 내의 변수를 참조 할 수 있습니다. 우리는 이것을 사용하여보다 일반적인 샌드위치 메이커 기능을 작성할 수 있습니다.
코드 사본은 다음과 같습니다.
기능 MakeAndwich (MagicingEdient) {
함수 Make (충전) {
Magicingredient + "및" + 충전물을 반환합니다.
}
반환 제작;
}
var f = 샌드위치 메이커 ( "햄");
f ( "치즈"); // "햄과 치즈"
f ( "머스타드"); // "햄과 머스타드"
클로저는 JavaScript의 가장 우아하고 표현적인 기능 중 하나이며 많은 관용구의 핵심입니다.
c) 폐쇄는 외부 변수의 값을 업데이트 할 수 있습니다. 실제로 폐쇄는 값의 사본이 아니라 외부 변수에 대한 참조를 저장합니다. 따라서 이러한 외부 변수에 대한 액세스가 포함 된 모든 폐쇄를 업데이트 할 수 있습니다.
코드 사본은 다음과 같습니다.
함수 박스 () {
var val = 정의되지 않은;
반품 {
set : function (newval) {val = newval;},
get : function () {return val;},
유형 : function () {return typeof val;}
};
}
var b = box ();
B. 타형 (); //한정되지 않은
B. 세트 (98.6);
b.get (); // 98.6
b.type (); // 번호
이 예제는 3 개의 폐쇄를 포함하는 객체를 생성합니다. 이 세 가지 폐쇄는 설정, 유형 및 Get 속성이며, 모두 VAL 변수에 대한 액세스를 공유하며, 세트 폐쇄는 VAL의 값을 업데이트합니다. 그런 다음 Get and Type에 전화하여 업데이트 된 결과를보십시오.
1.4 변수 선언 개선을 이해하십시오
JavaScript는이 메소드 스코프를 지원합니다 (변수 FOO에 대한 참조는 FOO 변수에 가장 가까운 범위를 선언하는 범위에 바인딩되지만 블록 레벨 범위를 지원하지 않습니다 (변수로 정의 된 범위는 가장 가까운 폐쇄 명령문 또는 코드 블록이 아닙니다).
이 기능을 이해하지 못하면 미묘한 버그가 발생할 수 있습니다.
코드 사본은 다음과 같습니다.
기능 Iswinner (플레이어, 기타) {
var 최고 = 0;
for (var i = 0, n = others.length; i <n; i ++) {
var player = 기타 [i];
if (player.score> 최고) {
최고 = player.score;
}
}
Return Player.score> 최고;
}
1.5 명명 기능 표현의 서투른 범위를 조심하십시오
코드 사본은 다음과 같습니다.
함수 이중 (x) {return x*2; }
var f = 함수 (x) {return x*2; }
동일한 기능 코드는 표현식으로 사용될 수 있지만 완전히 다른 의미를 갖습니다. 익명 함수와 이름이 지정된 함수 표현식의 공식적인 차이점은 후자가 함수 이름과 동일한 함수 이름을 가진 변수에 바인딩되며, 이는 함수의 로컬 변수 역할을한다는 것입니다. 이것은 재귀 기능 표현식을 작성하는 데 사용할 수 있습니다.
코드 사본은 다음과 같습니다.
var f = 함수 찾기 (트리, 키) {
// ...
찾기 찾기 (tree.left, key) ||
찾기 (Tree.right, Key);
}
변수 찾기의 범위는 자체 기능에만 해당된다는 점은 주목할 가치가 있습니다. 함수 선언과 달리, 이름이 지정된 기능 표현은 내부 기능 이름을 통해 외부에서 참조 할 수 없습니다.
코드 사본은 다음과 같습니다.
find (mytree, "foo"); // 오류 : 찾기가 정의되지 않았습니다.
var constructor = function () {return null; }
var f = function () {
리턴 생성자 ();
};
f (); // {} (ES3 환경에서)
이 프로그램은 Null을 생성하는 것처럼 보이지만 실제로는 새로운 객체를 생성합니다.
명명 된 함수 변수는 객체를 상속합니다. proTople.constructor (즉, Oject의 생성자)는 문과 마찬가지로,이 범위는 Object.Prototype의 동적 변화에 영향을받습니다. 객체를 피하는 방법 시스템에서 기능 표현의 범위를 오염시키는 방법은 객체에 속성을 추가하지 않는 것입니다.
인기있는 JavaScript 엔진의 또 다른 단점은 명명 된 기능 표현 선언의 홍보입니다.
코드 사본은 다음과 같습니다.
var f = function g () {return 17;}
g(); // 17 (비정규 환경에서)
일부 JavaScript 환경은 두 기능 F와 G를 다른 객체로 사용하여 불필요한 메모리 할당을 초래합니다.
1.6 로컬 블록 함수의 서투른 범위를 조심하십시오
코드 사본은 다음과 같습니다.
함수 f () {return "global"; }
기능 테스트 (x) {
함수 f () {return "local";}
var result = [];
if (x) {
result.push (f ());
}
result.push (f ());
결과 결과 결과;
}
테스트 (true); // [ "로컬", "로컬"]
테스트 (false); //["현지의"]
코드 사본은 다음과 같습니다.
함수 f () {return "global"; }
기능 테스트 (x) {
var result = [];
if (x) {
함수 f () {return "local";}
result.push (f ());
}
result.push (f ());
결과 결과 결과;
}
테스트 (true); // [ "로컬", "로컬"]
테스트 (false); //["현지의"]
JavaScript에는 블록 레벨 범위가 없으므로 내부 기능 F의 범위는 전체 테스트 기능이어야합니다. 일부 JavaScript 환경은 모든 JavaScript 환경이있는 것은 아닙니다. JavaScript 구현은 이러한 기능을 엄격한 모드의 오류 (로컬 블록 함수 선언이있는 엄격한 모드의 프로그램으로서 구문 오류로보고 할 것입니다)를보고하여 포트할 수없는 코드를 감지하여 향후 표준 버전에 대한 로컬 블록 함수 선언에 더 현명하고 가능한 의미를 제공합니다. 이 경우, 글로벌 함수 f를 가리키기 위해 테스트 함수 내의 로컬 변수를 선언하는 것을 고려할 수 있습니다.