به سری مقالات Learn Angular 8 in 10 Days - قسمت ششم خوش آمدید. در مقاله قبلی به مفاهیم مختلف Pipes در Angular پرداختیم. حال در این مقاله به مفهوم انکپسولاسیون نمایش به همراه پروجکشن محتوا می پردازیم. اگر می خواهید مقالات قبلی این مجموعه را مطالعه کنید، از لینک ها استفاده کنید.
- New Angular 8 چه خبر است
- Angular 8: چگونه شروع کنیم (روز 1)
- Angular 8: Components (روز 2)
- Angular 8: Data Binding (روز 3)
- Angular 8: Directives (روز 4)
- Angular 8: Pipes (روز 5)
بنابراین، در این مقاله، برخی از جنبه های مختلف مدیریت DOM در Angular 8 را مورد بحث قرار می دهیم. در توسعه برنامه های کاربردی وب، کامپوننت وب نقش مهمی در طراحی و توسعه رابط کاربری وب ایفا می کند. اجزای وب به طور کلی در همه مرورگرهای مدرن به جز مایکروسافت اج و IE 11 در دسترس هستند. اما برای این مرورگرها، polyfills نقش برآورده کردن نیاز را ایفا می کند. به طور عمده، مؤلفه های وب از سه عنصر تشکیل شده است - عناصر سفارشی (عناصر HTML کاملاً معتبر)، Shadow DOM (CSS جدا شده و API جاوا اسکریپت) و قالب های HTML تعریف شده توسط کاربر. اکنون، Angular Component در واقع یک کامپوننت وب نیست. با این حال، فریم ورک Angular از تمام ویژگی های یک وب کامپوننت پشتیبانی می کند. بنابراین، در این مقاله، تکنیک های مختلف طراحی نماها را مورد بحث قرار می دهیم تا بتوان آنها را به عنوان کامپوننت وب در نظر گرفت.
کامپوننت وب چیست؟
Angular Framework همیشه مجموعهای از کتابخانهها را برای توسعه مؤلفههای کپسولهشده، تزریق وابستگی، قالب HTML مبتنی بر اتصال داده و غیره ارائه میکند. با استفاده از این چارچوب، میتوانیم منطق نمایش رابط کاربری (کامپوننتها) را از منطق تجاری برنامه (خدمات و منطق) در چنین مواردی جدا کنیم. روشی که چندین توسعه دهنده یا تیم می توانند همزمان بر روی بخش های مختلف یک برنامه کار کنند. برای پیاده سازی این رویکرد، یکی از بخش های کلیدی Web Component است.
Web Components گروهی از APIهای استاندارد هستند که امکان ایجاد تگهای سفارشی مبتنی بر HTML را فراهم میکنند که عملکرد و جریان چرخه عمر اجزای خاص خود را دارند. هدف اصلی کامپوننت وب، کپسوله کردن کد برای اجزای زاویه ای به عنوان یک بسته قابل استفاده مجدد برای حداکثر قابلیت همکاری است. بنابراین، به زبان ساده، Web Components مجموعهای از APIهای استاندارد است که ممکن است در فناوریهای مختلف توسعه داده شوند و به ما امکان میدهند عناصر سفارشی قابل استفاده مجدد ایجاد کنیم و کل عملکرد از بقیه کد ما کپسوله شده است و میتوانیم از آنها در برنامههای وب خود استفاده کنیم.
برای تعریف هر مؤلفه وب، باید ویژگی های زیر را در هر مؤلفه زاویه ای تعریف کنیم تا بتواند به عنوان یک مؤلفه وب عمل کند.
- عناصر سفارشی - این مشخصات به ما کمک می کند تا انواع جدیدی از عناصر DOM را طراحی کنیم.
- Shadow DOM – به ما کمک می کند تا نحوه استفاده از سبک کپسوله شده و نشانه گذاری در اجزای وب را تعریف کنیم.
- ماژولهای ES – این مشخصات به ما کمک میکند تا تعریف کنیم که هر کتابخانه JS را شامل شود و گزینههایی برای استفاده مجدد از آنها در اسناد به روش استاندارد ارائه کنیم.
- الگوهای HTML - با استفاده از این مشخصات، میتوانیم هر بخش نشانهگذاری HTML را تعریف کنیم که معمولاً در زمان بارگذاری صفحه در حالت استفاده نشده است اما در زمان اجرا در برابر هر رویداد یا وظیفه خاصی فعال یا مقداردهی اولیه میشود.
مزایای یک کامپوننت وب
بهعنوان یک توسعهدهنده، ما همیشه ترجیح میدهیم تا آنجا که ممکن است در هر برنامه توسعهای از کد استفاده مجدد کنیم. هدف اصلی استفاده از Web Component استفاده مجدد از کد است. یک مؤلفه وب اساساً یک فرآیند استاندارد شده برای ساخت عناصر رابط کاربری محصور شده و قابل استفاده مجدد برای برنامه وب است. یک جزء وب همیشه ویژگی های زیر را در توسعه وب ما ارائه می دهد:
- قابلیت استفاده مجدد
- قابلیت نگهداری
- بهره وری
- کپسوله سازی
- توسعه پذیری
- ترکیب پذیری
اما همچنان سوال ثابت باقی می ماند، یعنی چرا ما به یک کامپوننت وب نیاز داریم زیرا همه فریم ورک ها همه ویژگی های فوق را در اختیار ما قرار می دهند؟ دلیل اصلی مولفه وب، قابلیت همکاری است. از آنجایی که هر چارچوبی در اکوسیستم خودش عالی عمل می کند. به طور کلی، ما نمی توانیم (به راحتی) از هیچ کامپوننت Angular در چارچوب React یا برعکس استفاده کنیم.
از آنجایی که جامعه توسعه front-end تعداد زیادی ابزار جدید، چارچوب ها، کتابخانه ها و غیره را به صورت منظم ارائه می دهد. به این ترتیب، ما باید تغییراتی را در برنامه خود ایجاد کنیم تا آنها را در چارچوب ها یا کتابخانه های جدید قرار دهیم. بنابراین، وقتی امروز میخواهیم هر برنامه وب را توسعه دهیم، نگرانی اصلی ما این خواهد بود که چگونه برنامه ما از کتابخانهها یا چارچوبهای انتشار آینده استفاده کند. از آنجایی که برخی مواقع بسیار سخت است و در برخی موارد باید دوباره کل برنامه را از ابتدا بازنویسی کنیم تا در فناوری جدید جا بیفتیم. در این سناریو، اجزای وب نقش مهمی در توسعه برنامه های کاربردی وب دارند. زیرا اجزای وب بر اساس پروتکل استاندارد وب ساخته شده اند تا در هر اکوسیستمی کار کنند. مزایای اصلی اجزای وب عبارتند از: