Что такое использование Zone.js в Angular 2

В настоящее время я изучаю Angular 2.0, и я наткнулся на файл Zone.js, и я хотел бы знать, какова цель файла Zone.js и как это сделает мое приложение лучше.

Источник

4 ответа

Зона - это контекст выполнения, который сохраняется в асинхронных задачах и позволяет создателю зоны наблюдать и контролировать выполнение кода в зоне.

Я думаю, что основная цель использования zonejs в angular2 - это знать, когда нужно рендерить.

Согласно NgZone Primer (Глава 5: Варианты использования / Вариант использования 3: Framework Auto Render)

Фреймворки, такие как Angular, должны знать, когда вся работа приложения завершена, и выполнять обновление DOM, прежде чем среда хоста выполнит рендеринг пикселей. На практике это означает, что инфраструктура заинтересована, когда основная задача и связанные микро-задачи выполнены, но до того, как виртуальная машина передаст управление хосту.

Angular использует зону для исправления асинхронных API (addEventListener, setTimeout(), ...) и использует уведомления от этих исправленных API для запуска обнаружения изменений каждый раз, когда происходит какое-либо асинхронное событие.

Для этой угловой зоны есть onMicrotaskEmpty событие

https://github.com/angular/angular/blob/2.2.4/modules/%40angular/core/src/zone/ng_zone.ts#L199

а также ApplicationRef подписывается на это событие, чтобы вызвать обнаружение изменений (Application.tick)

https://github.com/angular/angular/blob/2.2.4/modules/%40angular/core/src/application_ref.ts#L405-L406

Также zonejs полезен для отладки, тестирования, профилирования. Это поможет вам увидеть весь стек вызовов, если вы столкнулись с какой-либо ошибкой.

Зоны исправляют асинхронные API, такие как:

Promise
XHR
fetch
Error
addEventListener
removeEventListener
FileReader
WebSocket
MutationObserver
WebKitMutationObserver
document.registerElement
navigator.geolocation.getCurrentPosition
navigator.geolocation.watchPosition

copy cut paste abort blur focus canplay canplaythrough change click contextmenu 
dblclick drag dragend dragenter dragleave dragover dragstart drop 
durationchange emptied ended input invalid keydown keypress keyup 
load loadeddata loadedmetadata loadstart message 
mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup 
pause play playing progress ratechange reset scroll 
seeked seeking select show stalled submit suspend 
timeupdate volumechange waiting 
mozfullscreenchange mozfullscreenerror mozpointerlockchange 
mozpointerlockerror error webglcontextrestored webglcontextlost webglcontextcreationerror

setTimeout/clearTimeout
setInterval/clearInterval
setImmediate/clearImmediate

requestAnimationFrame/cancelAnimationFrame
mozRequestAnimationFrame/mozCancelAnimationFrame
webkitRequestAnimationFrame/webkitCancelAnimationFrame

alert
prompt
confirm

Эти статьи могут быть полезны, чтобы понять, как это работает в angular2

Источник

Zone.js - это ключ к обнаружению изменений в Angular.

Zone создает оболочку для всех асинхронных операций в браузере, таких как взаимодействие с пользователем, HTTP, таймеры и любые другие изменения, которые могут вызвать изменения в состоянии.

Zone знает, когда завершаются эти операции. Angular, в свою очередь, подписывается на уведомления от Zone при завершении одной из этих операций. Это позволяет Angular знать, что он может запускать свои алгоритмы обнаружения изменений и повторно отображать все, что изменилось.

Это сводит к минимуму любой отток рендеринга и делает его эффективным.

Источник

Zonejs является одной из базовых библиотек, используемых в Angularjs 2. Zonejs предназначена для поддержки контекстного выполнения для одноуровневых или многоуровневых асинхронных методов. Таким образом, это означает, что это помогает отслеживать родительский контекст текущего выполняемого асинхронного метода.

Пример -

Zone.current.fork({}).run(function(){
 Zone.current.myZoneVar = true;
 console.log('Assigned myZoneVar');
 setTimeout(()=>{
   console.log('In timeout', Zone.current.myZoneVar);
 },1000);
});
console.log('Out side', Zone.current.myZoneVar);
<script src="https://unpkg.com/zone.js@0.8.4?main=browser"></script>

Примечание: плз, игнорируйте ошибку консоли. Этот код отлично работает в jsfiddle - https://jsfiddle.net/subhadipghosh/0uqc9rdr/

Здесь мы создали разветвление нашей текущей Зоны и запустили вызов метода под Зоной. Метод имеет асинхронный вызов (setTimeout). Но так как он находится под зоной, у нас есть доступ к переменной Zone. В последней строке мы видим, что вне зоны мы пытаемся получить доступ к той же переменной, но в ней будет неопределенное значение.

Оригинальный пост - http://technobelities.blogspot.in/2017/03/zonejs-overview-with-example.html

Angular 2 использует Zonejs для обнаружения изменений. Всякий раз, когда происходит какое-либо изменение, оно обнаруживается с помощью следующего кода в Angular 2 -

ObservableWrapper.subscribe(this.zone.onTurnDone, () => {
  this.zone.run(() => {
    this.tick();
  });
});

tick() {
  // perform change detection
  this.changeDetectorRefs.forEach((detector) => {
    detector.detectChanges();
  });
}

Угловая зона генерирует событие onTrunDone, чтобы начать обнаружение изменений в приложении.

Источник

На простом языке Zone.js - это API или набор программ, которые используются Angular 2 для обновления представления приложения при любых изменениях. Зона - это контекст выполнения, который сохраняется в асинхронной задаче. например: События, XMLHttpRequests и Таймеры (setTimeout(), setInterval()) и т. д.

Источник

Zone.js использует для асинхронных вызовов и внутренне для ошибок и трассировки стека angular2 использует его. Таким образом, вы не можете игнорировать этот JavaScript.

Источник

Angular зависит от zone.js для запуска процессов обнаружения изменений Angular, когда нативные операции JavaScript вызывают события. Zone.js является реализацией спецификации, которая в настоящее время находится на рассмотрении комитета TC39 и определяет стандарты для языка JavaScript.

Источник
Другие вопросы по тегам