Angular Zone.js و تشخیص تغییر: درک مفاهیم اصلی

Angular یک چارچوب محبوب جاوا اسکریپت است که به طور گسترده برای ساخت برنامه های وب پویا و قوی استفاده می شود. یکی از ویژگی های کلیدی Angular مکانیزم قدرتمند تشخیص تغییرات آن است که وظیفه تشخیص تغییرات در اپلیکیشن و به روز رسانی نمای آن را بر عهده دارد. در این مقاله، مفاهیم اصلی مکانیسم تشخیص تغییر Angular و نحوه پیاده‌سازی آن با استفاده از Zone.js را بررسی خواهیم کرد.

درک مکانیسم تشخیص تغییر Angular

مکانیسم تشخیص تغییر Angular وظیفه تشخیص تغییرات در برنامه و به روز رسانی نمای را بر اساس آن بر عهده دارد. این مکانیسم تضمین می کند که نمای همیشه با مدل هماهنگ است و تجربه کاربری روان و پاسخگو را ارائه می دهد.

مکانیسم تشخیص تغییر Angular با عبور از درخت مؤلفه و بررسی تغییرات در هر جزء کار می کند. هنگامی که تغییری شناسایی می‌شود، مکانیسم تشخیص تغییر نما را به‌روزرسانی می‌کند و تغییرات را در هر مؤلفه فرزند منتشر می‌کند.

Zone.js و تشخیص تغییر در Angular

Zone.js یک کتابخانه است که مکانیزمی را برای بسته بندی کد جاوا اسکریپت و اجرای آن در یک زمینه یا منطقه خاص ارائه می دهد. در Angular، Zone.js برای ایجاد یک منطقه جدید برای هر مؤلفه و ردیابی تغییرات در منطقه آن مؤلفه استفاده می شود.

هر بار که یک کامپوننت ایجاد می شود، Angular یک منطقه جدید برای آن کامپوننت ایجاد می کند. این منطقه هر تغییری را که در کامپوننت رخ می دهد ردیابی می کند و در صورت لزوم مکانیسم تشخیص تغییر را فعال می کند.

در اینجا مثالی از نحوه استفاده از Zone.js در یک برنامه Angular آورده شده است:

import { Component, NgZone } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <button (click)="onClick()">Click me</button>
    <div>{{ message }}</div>
  `,
})
export class AppComponent {
  message="Hello";

  constructor(private ngZone: NgZone) {}

  onClick() {
    this.ngZone.run(() => {
      this.message="World";
    });
  }
}

در مثال بالا یک کامپوننت Angular ساده تعریف کرده ایم که حاوی یک دکمه و یک پیام است. هنگامی که دکمه کلیک می شود، پیام به روز رسانی می شود:جهان“. ما از سرویس **NgZone ** برای ایجاد یک ناحیه جدید برای کامپوننت و اجرای تابع onClick در آن ناحیه استفاده می کنیم.

Zone.js چگونه می داند که یک رویداد چه زمانی رخ داده است؟

برای اینکه بدانیم یک رویداد چه زمانی رخ داده است، Zone.js از مفهومی به نام «قلاب‌های منطقه» استفاده می‌کند. Zone hook ها توابعی هستند که قبل و بعد از عملیات ناهمزمان اجرا می شوند و فرصتی برای رهگیری و نظارت بر آن عملیات فراهم می کنند.

در مورد شنوندگان رویداد، Zone.js یک قلاب به نام ارائه می کند onHandleEvent. این قلاب قبل از فراخوانی شنونده رویداد اجرا می شود و فرصتی برای رهگیری و نظارت بر رویداد فراهم می کند. در اینجا یک مثال است:

import { Component, NgZone } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="handleClick()">Click Me</button>
  `,
})
export class AppComponent {
  constructor(private zone: NgZone) {}

  handleClick() {
    this.zone.runOutsideAngular(() => {
      document.addEventListener('click', this.onClick);
    });
  }

  onClick = () => {
    console.log('Click event detected!');
  };
}

در این مثال، یک کامپوننت Angular داریم که یک دکمه را نمایش می دهد. هنگامی که دکمه کلیک می شود، از Zone.js برای اجرای آن استفاده می کنیم handleClick() روش خارج از منطقه زاویه ای. این تضمین می کند که شنونده رویداد در خارج از منطقه Angular ثبت شده است، به طوری که تغییرات در درخت مؤلفه باعث تشخیص تغییر نمی شود.

در متد handleClick() از document.addEventListener برای ثبت شنونده رویداد برای رویداد کلیک استفاده می کنیم.

قبل از فراخوانی شنونده رویداد، Zone.js قلاب onHandleEvent را اجرا می کند. این قلاب فرصتی برای رهگیری و نظارت بر رویداد فراهم می کند. در این مثال، ما یک تابع پیکانی به نام onClick تعریف کرده‌ایم که هنگام شناسایی رویداد کلیک، پیامی را به کنسول ثبت می‌کند.

با استفاده از Zone.js و قلاب onHandleEvent، می توانیم رویدادها را در برنامه های Angular خود رهگیری و نظارت کنیم و بر اساس آن رویدادها اقداماتی انجام دهیم. این به ما اجازه می دهد تا برنامه های قدرتمند و پاسخگو بسازیم که می توانند سناریوهای پیچیده و پویا را مدیریت کنند.

** Angular از چند ناحیه استفاده می کند؟**

پاسخ – دو منطقه (منطقه داخلی و خارجی)

Angular سرویس NgZone را ارائه می دهد که به ما امکان می دهد کد را در داخل یا خارج از منطقه Angular اجرا کنیم. در اینجا یک مثال است:

import { Component, NgZone } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="handleClick()">Click Me</button>
  `,
})
export class AppComponent {
  constructor(private zone: NgZone) {}

  handleClick() {
    this.zone.runOutsideAngular(() => {
      // Code to run outside of the Angular zone
    });
  }
}

در این مثال، یک کامپوننت Angular با یک دکمه داریم. هنگامی که دکمه کلیک می شود، از سرویس NgZone برای اجرای برخی کدها در خارج از منطقه Angular استفاده می کنیم. در داخل متد ()handleClick، متد runOutsideAngular() سرویس NgZone را فراخوانی می کنیم و تابعی را ارسال می کنیم تا خارج از منطقه Angular اجرا شود.

هر کدی که بخواهیم خارج از منطقه Angular اجرا کنیم باید در داخل این تابع قرار گیرد. این می‌تواند زمانی مفید باشد که بخواهیم عملیات طولانی‌مدت یا با منابع فشرده را انجام دهیم، مانند تعامل با یک کتابخانه شخص ثالث، که نمی‌خواهیم تشخیص تغییر را در درخت مؤلفه راه‌اندازی کنیم.

به طور مشابه، ما همچنین می‌توانیم از متد run() سرویس NgZone برای اجرای کد داخل منطقه Angular استفاده کنیم. در اینجا یک مثال است:

import { Component, NgZone } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="handleClick()">Click Me</button>
  `,
})
export class AppComponent {
  constructor(private zone: NgZone) {}

  handleClick() {
    this.zone.run(() => {
      // Code to run inside the Angular zone
    });
  }
}

در این مثال، ما از متد run() سرویس NgZone برای اجرای کدهای داخل منطقه Angular استفاده می‌کنیم. در داخل متد ()handleClick، متد run() سرویس NgZone را فراخوانی می کنیم و تابعی را برای اجرا در ناحیه Angular ارسال می کنیم.

هر کدی که بخواهیم در داخل منطقه Angular اجرا کنیم باید داخل این تابع قرار گیرد. این می تواند زمانی مفید باشد که بخواهیم تشخیص تغییر را در درخت مؤلفه راه اندازی کنیم یا با API های Angular خاص مانند @Input() و @Output() تعامل داشته باشیم.

با استفاده از سرویس NgZone و run () و runOutsideAngular () روش‌ها، ما می‌توانیم زمان و مکان تشخیص تغییر در برنامه‌های Angular خود را کنترل کنیم و عملکرد و پاسخ‌دهی را بهینه کنیم.

آیا می توانیم از این مناطق بر حسب تقاضا استفاده کنیم؟

بله، در Angular می‌توانیم با ایجاد یک منطقه جدید به صورت دستی، از مناطق درخواستی استفاده کنیم. این به ما اجازه می دهد تا مشخص کنیم کدام کد باید در یک منطقه خاص اجرا شود و به ما کنترل دقیق تری بر تشخیص تغییر و مدیریت خطا می دهد.

برای ایجاد یک منطقه جدید، می توانیم از کلاس Zone که توسط کتابخانه zone.js ارائه شده است استفاده کنیم. در اینجا یک مثال است:

import { Component, NgZone } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="runInZone()">Run In Zone</button>
    <button (click)="runOutsideZone()">Run Outside Zone</button>
  `,
})
export class AppComponent {
  constructor(private zone: NgZone) {}

  runInZone() {
    const myZone = Zone.current.fork({
      name: 'My Zone',
      onInvokeTask: (parentZoneDelegate, currentZone, targetZone, task, applyThis, applyArgs) => {
        console.log('Task invoked in My Zone:', task.source);
        parentZoneDelegate.invokeTask(targetZone, task, applyThis, applyArgs);
      },
      onHandleError: (parentZoneDelegate, currentZone, targetZone, error) => {
        console.log('Error occurred in My Zone:', error.message);
        parentZoneDelegate.handleError(targetZone, error);
      },
    });

    myZone.run(() => {
      console.log('Running code in My Zone...');
    });
  }

  runOutsideZone() {
    this.zone.runOutsideAngular(() => {
      console.log('Running code outside of Angular zone...');
    });
  }
}

در این مثال یک کامپوننت Angular داریم که دو دکمه را نمایش می دهد. هنگامی که دکمه Run In Zone کلیک می شود، با استفاده از متد Zone.current.fork() یک منطقه جدید به نام My Zone ایجاد می کنیم. این روش با انشعاب ناحیه فعلی یک منطقه جدید ایجاد می کند و به ما اجازه می دهد تا رفتار منطقه جدید را با استفاده از یک شی به معنای واقعی کلمه مشخص کنیم.

در قلاب onInvokeTask، کارهایی را که در “منطقه من” فراخوانی می شوند، رهگیری و نظارت می کنیم. در این مثال، ما به سادگی پیامی را به کنسول وارد می کنیم که منبع وظیفه را نشان می دهد. ما همچنین parentZoneDelegate.invokeTask() را فراخوانی می کنیم تا وظیفه را در ناحیه والد اجرا کنیم.

در قلاب onHandleError، ما خطاهایی را که در “منطقه من” رخ می دهد، رهگیری و مدیریت می کنیم. در این مثال، ما به سادگی پیامی را به کنسول وارد می کنیم که پیام خطا را نشان می دهد. همچنین برای انتشار خطا به ناحیه والد ()parentZoneDelegate.handleError را فراخوانی می کنیم.

سرانجام، از متد myZone.run() برای اجرای برخی کدها در “منطقه من” استفاده می کنیم. در این مثال، ما به سادگی پیامی را به کنسول وارد می کنیم که نشان می دهد ما در حال اجرای کد در “منطقه من” هستیم.

وقتی که “خارج از منطقه را اجرا کنیددکمه ” کلیک می شود، ما از آن استفاده می کنیم zone.runOutsideAngular() روشی برای اجرای برخی از کدها در خارج از منطقه Angular. این زمانی مفید است که بخواهیم کدی را اجرا کنیم که نباید باعث تشخیص تغییر یا مدیریت خطا در برنامه Angular ما شود.

با استفاده از مناطق بر اساس تقاضا، ما می توانیم کنترل دقیقی بر تشخیص تغییر و مدیریت خطا در برنامه های Angular خود داشته باشیم. این به ما اجازه می‌دهد تا برنامه‌های قوی‌تر و پاسخگوتری بسازیم که می‌توانند سناریوهای پیچیده و پویا را مدیریت کنند.

نتیجه

به طور خلاصه، ** مکانیسم تشخیص تغییر Angular** مسئول ردیابی تغییرات در درخت کامپوننت و به روز رسانی نمای مطابق با آن است. Zone.js یک کتابخانه قدرتمند است که توسعه دهندگان را قادر می سازد تا عملیات ناهمزمان مانند setTimeout، setInterval و شنوندگان رویداد را رهگیری و نظارت کنند.

با استفاده از Zone.js در Angular، می‌توانیم تغییرات درون درخت کامپوننت را ردیابی کنیم و بر اساس آن نمای را به‌روزرسانی کنیم. این کمک می کند تا اطمینان حاصل شود که برنامه های Angular ما حتی در سناریوهای پیچیده و پویا، عملکرد و پاسخگو هستند.

با تشکر برای خواندن