việc sử dụng Zone.js ở góc 2

Question

Hiện nay đang học góc2.0 là gì và tôi đi qua các tập tin Zone.js, và tôi muốn biết mục đích của file Zone là gì. js và làm thế nào nó sẽ làm cho ứng dụng của tôi tốt hơn.

Answer 1

Khu vực là ngữ cảnh thực thi tồn tại trên các tác vụ không đồng bộ và cho phép người tạo vùng quan sát và kiểm soát việc thực thi mã trong vùng.

Tôi nghĩ rằng mục đích chính sử dụng zonejs trong angular2 là để biết thời điểm hiển thị.

Theo NgZone Primer (Chương 5: Trường hợp sử dụng/Sử dụng Trường hợp 3: Khung Auto Render)

Frameworks, chẳng hạn như góc, cần phải biết khi nào tất cả các ứng dụng công việc đã hoàn thành và thực hiện DOM cập nhật trước môi trường máy chủ thực hiện hiển thị pixel. Trong thực tế, điều này có nghĩa là khung làm việc quan tâm khi nhiệm vụ chính và các tác vụ vi mô liên quan đã được thực thi nhưng trước khi VM trao quyền kiểm soát cho máy chủ .

góc sử dụng các múi vá API async (addEventListener, setTimeout(), ...) và sử dụng thông báo từ các API vá để chạy thay đổi phát hiện mỗi khi một số sự kiện async xảy ra.

Đối với khu kiễu góc này có onMicrotaskEmpty kiện

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

và ApplicationRef đăng ký cao sự kiện này để kích hoạt phát hiện sự thay đổi (Application.tick)

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

Cũng zonejs rất hữu ích để gỡ lỗi, kiểm tra , hồ sơ. Nó giúp bạn xem toàn bộ ngăn xếp cuộc gọi nếu bạn gặp phải một số lỗi.

Khu vá API async như:

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 

điều này có thể có ích để hiểu làm thế nào nó hoạt động trong angular2

• http://blog.thoughtram.io/angular/2016/02/01/zones-in-angular-2.html
• http://blog.kwintenp.com/how-the-hell-do-zones-really-work/

Answer 2

Zonejs là một trong những thư viện cốt lõi được sử dụng trong Angularjs 2. Zonejs là để duy trì việc thực thi theo ngữ cảnh cho các phương thức không đồng bộ đơn hoặc đa cấp. Vì vậy, nó có nghĩa là nó giúp theo dõi các bối cảnh phụ huynh hiện đang thực hiện phương pháp không đồng bộ.

Ví dụ -

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>

Lưu ý: Plz, bỏ qua những lỗi giao diện điều khiển. Mã này hoạt động tốt trong jsfiddle - https://jsfiddle.net/subhadipghosh/0uqc9rdr/

Ở đây chúng tôi đã tạo một ngã ba của Vùng và chạy hiện tại của chúng tôi là gọi phương thức trong Vùng. Phương thức này có một cuộc gọi không đồng bộ (setTimeout). Nhưng vì nó nằm trong vùng, chúng ta có thể truy cập vào biến Zone. Trong dòng cuối cùng chúng ta có thể thấy ngoài vùng chúng ta đang cố gắng truy cập cùng một biến, nhưng nó sẽ không được xác định trong nó.

bài gốc - http://technobelities.blogspot.in/2017/03/zonejs-overview-with-example.html

góc 2 được sử dụng để phát hiện Zonejs thay đổi. Bất cứ khi nào có sự thay đổi xảy ra, nó được phát hiện bằng cách làm theo mã trong góc 2 -

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

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

khu kiễu góc phát ra sự kiện onTrunDone để bắt đầu phát hiện sự thay đổi trong ứng dụng.

Answer 3

Sử dụng Zone.js cho cuộc gọi asyn và nội bộ cho lỗi và theo dõi ngăn xếp góc2 đang sử dụng nó. Vì vậy, bạn không thể bỏ qua javascript này.