دیزاین پترن Facade در Angular

معرفی

به‌عنوان یک توسعه‌دهنده Angular، ممکن است نیاز به ساده‌سازی کدهای پیچیده و ارائه یک رابط ساده‌شده برای سایر بخش‌های برنامه نیاز پیدا کرده باشید. اینجاست که دیزاین پترن facade به کار می‌رود. در این مقاله، ما در مورد دیزاین پترن facade ، پیاده سازی آن در Angular و اینکه چگونه می تواند عملکرد برنامه شما را بهبود بخشد، بحث خواهیم کرد.

دیزاین پترن facade چیست؟

دیزاین پترن facade یک دیزاین پترن ساختاری است که یک رابط ساده برای یک سیستم پیچیده از کلاس‌ها، توابع و APIها فراهم می‌کند. این به شما امکان می دهد گروهی از زیرسیستم های پیچیده را کپسوله کنید و یک رابط ساده شده را در فراهم کنید.

به عبارت ساده، یک facade مانند یک بسته بندی در اطراف یک سیستم پیچیده است که یک رابط کاربری ساده برای تعامل مشتریان فراهم می کند. Facade پیچیدگی سیستم را پنهان می کند و یک API ساده را در اختیار مشتریان قرار می دهد تا از آن استفاده کنند.

پیاده سازی در Angular

در Angular می توانیم با استفاده از Services دیزاین پترن facade را پیاده سازی کنیم. سرویس‌ها ستون فقرات برنامه‌های Angular هستند و برای به اشتراک گذاشتن داده‌ها، منطق و توابع در چندین کامپوننت استفاده می‌شوند. سرویس ها همچنین می تواند برای محصور کردن زیرسیستم های پیچیده و ارائه یک رابط ساده شده برای کد مشتری استفاده شود.

بیایید نگاهی به مثالی بیندازیم که چگونه می‌توانیم الگوی طراحی facade را با استفاده از سرویس‌ها در Angular پیاده‌سازی کنیم.

مثال 1

فرض کنید ما یک سیستم پیچیده از کلاس ها و توابع داریم که مسئول رسیدگی به احراز هویت در برنامه Angular ما هستند. سیستم احراز هویت از کلاس ها و توابع زیر تشکیل شده است:

• سرویس AuthService : مسئول رسیدگی به احراز هویت کاربر است
• سرویس UserService : مسئول مدیریت داده های کاربر است
• سرویس TokenService : مسئول مدیریت توکن های کاربر است
• سرویس JwtHelperService : مسئول رمزگشایی توکن های JWT است

برنامه ما چندین کامپوننت دارد که نیاز به دسترسی به این کلاس ها و توابع دارند. برای ساده کردن کد و ارائه یک رابط ساده به کد مشتری، می‌توانیم یک سرویس Facade به نام AuthFacadeService ایجاد کنیم.

• سرویس AuthFacadeService زیرسیستم احراز هویت پیچیده را کپسوله می کند و یک رابط ساده ارائه می دهد . AuthFacadeService متدهای زیر را خواهد داشت:
• متد ()login: ورود کاربر را کنترل می کند.
• متد ()logout: خروج کاربر را کنترل می کند.
• متد ()getUser: داده های کاربر را بازیابی می کند.
• متد ()isAuthenticated: بررسی می کند که آیا کاربر احراز هویت شده است یا خیر.

در اینجا نحوه پیاده سازی AuthFacadeService آمده است:

import { Injectable } from '@angular/core';
import { AuthService } from './auth.service';
import { UserService } from './user.service';
import { TokenService } from './token.service';
import { JwtHelperService } from './jwt-helper.service';

@Injectable({
 providedIn: 'root'
})
export class AuthFacadeService {

constructor(
  private authService: AuthService,
  private userService: UserService,
  private tokenService: TokenService,
  private jwtHelperService: JwtHelperService
 ) { }

 login(username: string, password: string) {
  // Call AuthService to handle user authentication
  const token = this.authService.login(username, password);

  // Save token to TokenService
  this.tokenService.saveToken(token);
 }

 logout() {
  // Call AuthService to handle user logout
  this.authService.logout();

 // Remove token from TokenService
 this.tokenService.removeToken();
  }

 getUser() {
  // Call UserService to retrieve user data
  return this.userService.getUser();
 }

 isAuthenticated(): boolean {
  // Check if the user is authenticated using the JWT token
  const token = this.tokenService.getToken();
  return token && !this.jwtHelperService.isTokenExpired(token);
 }
}

در کد بالا، ما یک سرویس Facade به نام AuthFacadeService ایجاد کرده ایم که زیرسیستم احراز هویت پیچیده را کپسوله می کند. AuthFacadeService با متدهایی مانند login، logout و getUser یک رابط ساده برای کد کلاینت فراهم می کند. این متد ها به صورت داخلی از AuthService برای انجام عملیات لازم استفاده می کنند.

مثال 2

بیایید یک مثال از یک برنامه تجارت الکترونیکی بزنیم که چندین سرویس برای رسیدگی به بخش‌های مختلف برنامه مانند احراز هویت، سبد خرید و پرداخت دارد. این خدمات به شدت به یکدیگر وابسته هستند و حفظ و بهبود عملکرد را دشوار می کند. برای حل این مشکل، می‌توانیم یک سرویس facade ایجاد کنیم که یک رابط ساده‌شده را در اختیار این سرویس‌ها قرار دهد.

ابتدا بیایید سرویس هایی را ایجاد کنیم که می خواهیم ساده کنیم:

@Injectable()
export class AuthService {
 // Authentication logic
}

@Injectable()
export class CartService {
 // Shopping cart logic
}

@Injectable()
export class PaymentService {
 // Payment logic
}

اکنون، بیایید سرویس facade را ایجاد کنیم که یک رابط ساده‌ شده را در اختیار این سرویس‌ها قرار می‌دهد:

@Injectable()
export class FacadeService {
 
constructor(
 private authService: AuthService,
 private cartService: CartService,
 private paymentService: PaymentService
 ) {}

 // Simplified interface to authentication
 login(username: string, password: string) {
 return this.authService.login(username, password);
  }

 // Simplified interface to shopping cart
 addToCart(item: Item) {
 return this.cartService.addToCart(item);
  }

 removeFromCart(item: Item) {
 return this.cartService.removeFromCart(item);
  }

 // Simplified interface to payment
 pay() {
 return this.paymentService.pay();
  }
}

همانطور که می بینید، FacadeService یک رابط ساده برای سیستم پیچیده خدمات ارائه می دهد. به جای نیاز به تعامل با هر سرویس به طور جداگانه، مشتری می تواند با FacadeService تعامل داشته باشد و تمام اقدامات لازم را انجام دهد.

حال، بیایید نگاهی به نحوه استفاده از FacadeService در کامپوننت های خود بیندازیم:

@Component({
 selector: 'app-login',
 template: `
    <form (ngSubmit)=&quotonSubmit()&quot>
      <input type=&quottext&quot [(ngModel)]=&quotusername&quot>
      <input type=&quotpassword&quot [(ngModel)]=&quotpassword&quot>
      <button type=&quotsubmit&quot>Login</button>
    </form>
  `
})
export class LoginComponent {
 username: string;
 password: string;

 constructor(private facadeService: FacadeService) {}

 onSubmit() {
 this.facadeService.login(this.username, this.password)
      .subscribe(() => {
 // Redirect to dashboard
      }, (error) => {
 // Display error message
      });
  }
}

@Component({
 selector: 'app-cart',
 template: `
    <div *ngFor=&quotlet item of cartItems&quot>
      {{ item.name }}
      <button (cllick)=&quotaddToCart(item)&quot>Add to cart</button>
    <div> 
`
export class CartComponent {
 username: string;
 password: string;

 constructor(private facadeService: FacadeService) {}

 addToCart(item: Item) {
 this.facadeService.addToCart(item)
      .subscribe(() => {
 // Add to cart
      }, (error) => {
 // Display error message
      });
  }
}

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

امیدوارم این مقاله درک خوبی از الگوی facade و نحوه استفاده از آن در برنامه های Angular به شما ارائه کرده باشد.

به طور کلی، دیزاین پترن facade ابزار قدرتمندی برای بهبود عملکرد برنامه های Angular شما با ساده کردن عملیات پیچیده است. با انتزاع کردن پیچیدگی سیستم های پایه ای، دیزاین پترن facade می تواند نوشتن کدهای تمیز و قابل خواندن را برای توسعه دهندگان آسان تر کند که نگهداری و به روز رسانی آن در طول زمان آسان تر است.

این مقاله برگردان شده یک مقاله معتبر درباره این موضوع است.برای دسترسی به مقاله منبع اینجا کلیک کنید.

برای مشاهده پست های بیشتر و ارتباط با من از طریق لینکدین اینجا کلیک کنید.

امیدوارم براتون مفید واقع شده باشه.