프론트 엔드에서 순수한 초보자 인 저에게는 JavaScript가 여전히 조금 분명합니다. Angular JS를 직접 시작하려면 실제로 많은 저항이 있습니다. 그러나 나는 당신이 열심히 일하는 한, 반 인간 디자인조차도 큰 문제가되지 않을 것이라고 생각합니다.
좋아요, 말도 안되는 말을하지 마세요. 각도 JS가 무엇인지 알아 내기 위해 스코프로 시작했습니다. 그렇다면 스코프는 무엇입니까? 공식 문서에서 구절을 빌리기 :
코드 사본은 다음과 같습니다.
"스코프는 응용 프로그램 모델을 나타내는 객체입니다. 표현식의 실행 컨텍스트입니다. 스코프는 응용 프로그램의 DOM 구조를 모방하는 계층 구조로 배열됩니다. 스코프는 표현식을보고 이벤트를 전파 할 수 있습니다."
그것을 읽은 후, 나는 그것을 다른 프로그래밍 언어와 비교했으며, 범위는 데이터 모델의 범위와 같다고 느꼈으 며 표현 실행을위한 컨텍스트를 제공합니다. 지금은 이런 식으로 이해합시다.
범위의 특징
다음으로 SCOPE 기능이 무엇인지 봅시다.
SCOPE는 모델의 변경 사항을 모니터링하기위한 $ watch 메소드를 제공합니다.
SCOPE는 모델의 변화를 전파하기위한 $ 적용 방법을 제공합니다.
범위는 상속 될 수 있으며 다른 응용 프로그램 구성 요소와 속성 액세스 권한을 분리 할 수 있습니다.
스코프는 표현식 계산을위한 컨텍스트를 제공합니다.
이 네 가지 기능의 경우 Actionscript, C ++ 및 Java를 배웠기 때문에 첫 번째, 세 번째 및 네 번째 점을 이해하는 것은 어렵지 않지만 두 번째 포인트는 약간 혼란스러워합니다. 캐서롤을 깨고 끝을 묻는 원칙에 따라 여전히 Google을 통해 몇 가지를 발견했습니다. 숙련 된 재향 군인은 벽돌을 두드리십시오!
JavaScript의 기원
우선, 언뜻보기에 Scope.apply ()는 바인딩 업데이트를하는 일반적인 방법 인 것 같습니다. 그러나 조금 더 생각하십시오. 왜 우리는 그것을 필요로합니까? 당신은 보통 언제 그것을 사용합니까? 이 두 가지 문제를 이해하려면 JavaScript부터 시작해야합니다. JavaScript 코드에서는 특정 순서로 실행됩니다. 코드 스 니펫이 실행 될 예정인 경우 브라우저는 현재 스 니펫 만 실행하며 다른 작업을 수행하지 않습니다. 따라서 잘 만들어지지 않은 일부 웹 페이지는 무언가를 클릭 할 때 갇히게됩니다. JavaScript는이 현상이 발생하는 이유 중 하나입니다! 여기에는 경험할 코드가 있습니다.
코드 사본은 다음과 같습니다.
var button = document.getElementById ( 'clickme');
함수 buttonclicked () {
경고 ( '버튼이 클릭되었습니다');
}
button.addeventListener ( 'Click', ButtonClicked);
함수 TimerComplete () {
경고 ( '타이머 완료');
}
settimeout (TimerComplete, 5000);
JavaScript 코드를로드 할 때 먼저 "ClickMe"라는 ID가있는 버튼을 찾은 다음 리스너를 추가 한 다음 타임 아웃을 설정하십시오. 5 초 동안 기다리면 대화 상자가 나타납니다. 페이지를 새로 고침하고 즉시 ClickME 버튼을 클릭하면 대화 상자가 나타납니다. 확인을 클릭하지 않으면 TimerComplete 함수는 실행할 기회가 없습니다.
바인딩을 업데이트하는 방법
좋아, 관련이없는 것처럼 보이는 것에 대해 이야기 한 후, 주제로 돌아가 봅시다. Angular JS는 데이터가 언제 변경되고 페이지를 업데이트 해야하는지 어떻게 알 수 있습니까? 코드는 데이터가 언제 수정되었는지 알아야하지만 이제는 변경된 객체에 대한 데이터를 직접 알리는 방법이 없습니다 (ECMAScript 5 가이 문제를 해결하려고하지만 여전히 실험 단계에 있습니다). 현재보다 주류 전략을위한 두 가지 솔루션이 있습니다. 하나는 특수 객체를 사용하여 모든 데이터를 속성을 통해 직접 지정하지 않고 객체 메소드를 호출 하여만 설정할 수 있도록하는 것입니다. 이러한 방식으로 모든 수정 사항을 기록 할 수 있으며 페이지를 업데이트 해야하는시기를 알 수 있습니다. 이를 수행하는 단점은 우리가 특별한 대상을 물려 받아야한다는 것입니다. 할당의 경우 Object.set ( 'key', 'value') 만 대상 대신 key = value로만 수행 할 수 있습니다. 프레임 워크에서 이것은 Emberjs와 Knockoutjs가하는 일입니다 (이전에는 만지지 않았지만). 또 다른 방법은 Angular JS에 의해 채택 된 방법으로, 각 JavaScript 코드 실행 시퀀스가 실행 된 후 데이터 변경이 있는지 확인합니다. 이것은 효율적이지 않고 성능에 심각한 영향을 미칩니다. 그러나 Angular JS는이 문제를 해결하기 위해 몇 가지 영리한 수단을 사용합니다 (아직 연구되지 않았지만 아직 명확하지 않습니다). 이를 수행하는 장점은 마음대로 모든 객체를 사용할 수 있고 할당 방법에는 제한이 없으며 데이터 변경 사항을 알 수 있다는 것입니다.
Angular JS가 채택한이 솔루션의 경우 데이터가 변경되는시기에 관심이 있으며 Scope.apply ()가 유용합니다. 바인딩 데이터가 변경되었는지 확인하면 실제로 Scope.Digest ()에 의해 수행되지만이 메소드를 직접 호출 한 적이 없지만 SCOPE.Apply () 메소드에서 scope.Apply () 메소드에서 scope.Apply () 메소드를 호출하는 대신 SCOPE.DIGEST () 메서드를 호출합니다. scope.apply () 메소드는 함수 또는 표현식을 취한 다음 그것을 실행 한 다음 마지막으로 Scope.Digest () 메소드를 호출하여 바인딩 또는 감시자를 업데이트합니다.
$ apply ()를 사용할 때
같은 질문은 언제 apply () 메소드를 호출해야합니까? 사례는 거의 없습니다. 실제로, 거의 모든 코드가 NG- 클릭, 컨트롤러 초기화, HTTP 콜백 함수 등과 같은 SCOPE.Apply ()에 랩핑됩니다.이 경우 우리는 스스로 전화 할 필요가 없으며 실제로 우리 자신을 호출 할 수 없으며, 그렇지 않으면 apply () 메소드를 호출하면 오류가 발생합니다. 새로운 실행 시퀀스에서 코드를 실행 해야하는 경우 실제로 사용해야하며, 새로운 실행 시퀀스가 Angular JS 라이브러리 메소드에 의해 생성되지 않은 경우에만 코드를 SCOPE.Apply ()로 래핑해야합니다. 다음은 설명 할 예입니다.
코드 사본은 다음과 같습니다.
<div ng : app ng-controller = "ctrl"> {{message}} </div>
코드 사본은 다음과 같습니다.
functionctrl ($ scope) {
$ scope.message = "업데이트를 위해 2000ms 대기 중";
settimeout (function () {
$ SCOPE.MESSAGE = "TimeOut이 호출!";
// Angularjs는 $ SCOPE 업데이트를 알지 못합니다
}, 2000);
}
위의 코드가 실행되면 페이지가 표시됩니다. 업데이트를 위해 2000ms 대기합니다. 분명히, 데이터의 업데이트는 Angular JS에 의해 감지되지 않았습니다.
다음으로 JavaScript 코드를 약간 수정하고 scope.apply ()로 랩합니다.
코드 사본은 다음과 같습니다.
functionctrl ($ scope) {
$ scope.message = "업데이트를 위해 2000ms 대기 중";
settimeout (function () {
$ scope. $ apply (function () {
$ SCOPE.MESSAGE = "TimeOut이 호출!";
});
}, 2000);
}
이번에 차이점은 페이지가 먼저 표시됩니다 : 2000ms 업데이트를 기다리고 있습니다. 2 초 동안 대기하면 내용이 다음으로 변경됩니다. 타임 아웃! . 분명히, 데이터의 업데이트는 Angular JS에 의해 감지되었습니다.
참고 :이 작업을 수행해서는 안되지만 Angular JS가 제공하는 시간 초과 방법을 사용하여 적용 메소드로 자동 랩핑됩니다.
과학은 양날의 검입니다
마지막으로, scope.apply () 및 scope.apply (function) 메소드를 다시 살펴 보겠습니다! Angular JS는 우리를 위해 많은 일을했지만 우리는 또한 기회를 잃었습니다. 다음 유사 코드에서 볼 수 있습니다.
코드 사본은 다음과 같습니다.
함수 $ apply (expr) {
노력하다 {
return $ eval (expr);
} catch (e) {
$ ExceptionHandler (e);
} 마지막으로 {
$ root. $ 다이제스트 ();
}
}
그것은 모든 예외를 포착하고 다시 던지지 않을 것이며 결국 $ digest () 메소드를 호출합니다.
요약합시다
$ apply () 메소드는 DOM 이벤트, Settimeout, XHR 또는 기타 타사 라이브러리와 같은 각도 프레임 워크 외부에서 각도 JS 표현을 실행할 수 있습니다. 이것은 시작에 불과합니다. 물은 여전히 깊고 Deep Dive에 오신 것을 환영합니다!