برخی از نکات برای کار با Angular – از یک توسعه دهنده جلوی.
Angular یک چارچوب بسیار چالش برانگیز برای یادگیری مبتدیان است. این ویژگی ها طیف گسترده ای از ویژگی ها را ارائه می دهد ، از ویژگی های ساده تا بسیار پیچیده ، و آن را بسیار پرتحرک می کند. من به عنوان یک توسعه دهنده جلویی که با چارچوب های مختلفی مانند React ، Vue و Svelte کار کرده است ، با اطمینان می توانم بگویم که Angular چالش برانگیزترین فرد برای یادگیری و کار با آن است.
با این حال ، هرچه زمان بیشتری برای کار با Angular صرف می کنم ، بیشتر متوجه می شوم که هنگام استفاده از مهارت ، یک چارچوب فوق العاده قدرتمند است. این یک اکوسیستم کامل را ارائه می دهد که همه چیز مورد نیاز برای ساخت وب سایت های کاربردی ، پیچیده و بصری جذاب را فراهم می کند.
زاویه ای قدرتمند است ، اما همانطور که قبلاً نیز اشاره کردم ، منحنی یادگیری آن کاملاً چالش برانگیز است. از طریق این وبلاگ ، می خواهم نکاتی را که سالها از کار با Angular آموخته ام به اشتراک بگذارم. من می دانم که برخی از این نکات ممکن است کاملاً برای هر پروژه قابل اجرا نباشد. اگر اینگونه است ، احساس راحتی کنید که در نظرات به من اطلاع دهید. حالا ، بیایید شروع کنیم!
توجه: این نکات نیاز به دانش و تجربه قبلی با زاویه ای دارد. من در اعماق RXJ یا مفاهیم اساسی شیرجه نخواهم شد.
استفاده را ترجیح می دهد OnPush برای استراتژی تشخیص تغییر بیش از Default یک
هنگام کار با Angular ، من استفاده می کنم OnPush به عنوان استراتژی تشخیص تغییر در تمام پروژه های من. دلیل آن بسیار ساده است:
- این تعداد چک های مورد نیاز برای تشخیص تغییرات حالت و به روزرسانی DOM را کاهش می دهد. به طور طبیعی ، هرچه کار کمتری برنامه انجام دهد ، عملکرد و تجربه کاربر آن بهتر خواهد بود.
- من کنترل بیشتری بر اجزای خود دارم. ممکن است فکر کنید که استفاده از OnPush نیاز به ایجاد دستی در تشخیص تغییر در هر بار که داده ها به روز می شود ، که در صورت فراموش شدن می تواند منجر به اشکالات غیر منتظره شود. با این حال ، در نکته بعدی ، من به شما نشان خواهم داد که چگونه معمولاً از چنین سناریوهایی جلوگیری می کنم.
- این امر به جلوگیری از خطاهای شرایط مسابقه هنگام کار با جریان های پیچیده و مشترکین کمک می کند. در حالی که نادر است ، آنها اتفاق می افتد – من هنگام استفاده از استراتژی پیش فرض ، دو یا سه بار با آنها روبرو شدم. این مسائل برای تولید مثل دشوار است ، اما به من اعتماد کنید ، آنها می توانند بسیار ناامید کننده و پیچیده برای رفع صحیح باشند.
اگر نمی خواهید هر بار که یک مؤلفه جدید ایجاد می کنید ، استراتژی تشخیص تغییر را به صورت دستی به روز کنید ، می توانید با پیکربندی آن در پرونده Angular.json ، OnPush را به عنوان پیش فرض در برنامه خود تنظیم کنید.
// angular.json
{
//...
"schematics": {
"@schematics/angular": {
"component": {
"changeDetection": "OnPush"
}
}
}
}
قبل از استفاده async لوله یا signal
لوله Async ابزاری قدرتمند در زاویه ای است که کار با مشاهدات را ساده می کند. برای استفاده از آن ، داده های شما باید به عنوان یک مشاهده تعریف شود. پس چرا اینقدر مفید است؟
- این حالت یکپارچه را تضمین می کند و به روزرسانی ها را مشاهده می کند. همانطور که قبلاً ذکر شد ، راهی وجود دارد که هر زمان که داده ها تغییر می کنند ، به طور خودکار تغییر تشخیص را ایجاد کنیم – این دقیقاً همان چیزی است که
async pipeانجام می دهد. زیر کاپوت ، تماس می گیردmarkForCheck، اطمینان از اینکه یک مقدار جدید از منبع مشاهده قابل انتشار است ، از این ماده برای تغییرات بررسی می شود. - از نشت حافظه جلوگیری می کند. هنگامی که این مؤلفه از بین می رود ، لوله Async به طور خودکار از مشاهده می شود و نیاز به مدیریت دستی اشتراک ها را از بین می برد. این برای حفظ عملکرد در برنامه های وب بسیار مهم است.
- با Angular 18 ، API جدید به نام
signalمعرفی شده است مثلasync pipeباsignalکنترل تغییر و مدیریت حافظه را به طور خودکار انجام دهید. من به اعماق شیرجه نمی زنمsignalدر اینجا ، از آنجا که عملکرد آن در اسناد رسمی زاویه ای ساده و مستند است.
به طور خلاصه ، اگر برنامه شما هنوز از لوله یا سیگنال Async استفاده نمی کند ، به روزرسانی آن را در نظر بگیرید. من قول می دهم – این یک تسکین بزرگ خواهد بود!
و این همه برای وبلاگ شماره 1 در مورد نکات زاویه ای است! امیدوارم این نکات را مفید داشته باشید. شما را در وبلاگ بعدی من می بینیم!
