مدل-نما-مدل نما

از ویکی‌پدیا، دانشنامه آزاد

الگوی معماری مدل-نما-نما مدل (Model-View-View Model یا MVVM) یک الگوی معماری در نرم‌افزار کامپیوتری است که به جداسازی توسعه رابط کاربری گرافیکی (GUI؛ نما) - چه از طریق زبان نشانه‌گذاری یا کد GUI - از توسعه منطق کسب‌وکار یا منطق بک‌اند (مدل) کمک می‌کند، به طوری که نما به هیچ پلتفرم مدل خاصی وابسته نباشد.

نما مدل (View Model) در MVVM یک مبدل مقدار است،^[۱] به این معنی که مسئول تبدیل اشیاء داده از مدل به گونه‌ای است که بتوان به راحتی آن‌ها را مدیریت و ارائه کرد. از این نظر، نما مدل بیشتر به مدل شباهت دارد تا نما و بیشتر (اگر نه تمام) منطق نمایش نما را مدیریت می‌کند.نما مدل ممکن است یک الگوی میانجی را پیاده‌سازی کند و دسترسی به منطق بک‌اند را حول مجموعه‌ای از موارد استفاده پشتیبانی‌شده توسط نما سازماندهی کند.

MVVM یک تغییر از الگوی طراحی مدل نمایش Martin Fowler است.^[۲]^[۳]این الگو توسط معماران مایکروسافت، Ken Cooper و Ted Peters، به منظور ساده‌سازی برنامه‌نویسی رویدادمحور رابط‌های کاربری ابداع شد. این الگو در بنیان نمایش ویندوز Windows Presentation Foundation (WPF) (سیستم گرافیکی .NET مایکروسافت) و مایکروسافت سیلورلایت ( Silverlight)، مشتق اینترنتی WPF، گنجانده شد.^[۳] John Gossman، یکی از معماران WPF و Silverlight مایکروسافت، MVVM را در بلاگ خود در سال ۲۰۰۵ معرفی کرد.^[۳]^[۴]

مدل-نما-نما مدل (Model–View–View Model) همچنین به عنوان مدل-نما-پیونددهنده (Model–View–Binder) شناخته می‌شود، به ویژه در پیاده‌سازی‌هایی که پلتفرم .NET را شامل نمی‌شوند. ZK، یک چارچوب نرم‌افزاری تحت وب نوشته‌شده به زبان جاوا، و کتابخانه جاوا اسکریپت ناک‌اوت‌جی‌اس (Knockout JS) از مدل-نما-پیونددهنده استفاده می‌کنند.^[۳]^[۵]^[۶]

اجزای الگوی MVVM[ویرایش]

مدل[ویرایش]

مدل به یکی از دو مفهوم می‌انجامد؛ یک مدل دامنه که وضعیت واقعی را نمایش می‌دهد (یک رویکرد شی گرا)، یا لایه دسترسی به داده که محتوا را نمایش می‌دهد (یک رویکرد محور داده).

نما[ویرایش]

همانطور که در الگوهای مدل-نما-کنترل‌گر (MVC) و مدل-نما-ارائه‌دهنده (MVP)، نمای نمایش، ساختار، طرح و ظاهر آنچه کاربر در صفحه نمایش می‌بیند است. ^[۷]این نمایش یک نمایش از مدل را نمایش می‌دهد و بازخورد کاربر را با نمایشگر (کلیک‌های موس، ورودی صفحه کلید، حرکات تپ صفحه و غیره) دریافت کرده و این اقدامات را از طریق پیوند داده (ویژگی‌ها، تماس‌های رویداد و غیره) که برای اتصال نما و مدل نمایش تعریف شده، به مدل نما منتقل می‌کند.

مدل نما[ویرایش]

مدل نما یک انتزاع از نمایشگر است که ویژگی‌ها و دستورات عمومی را آشکار می‌کند. به جای کنترل‌گر در الگوی MVC یا ارائه‌دهنده در الگوی MVP، MVVM یک بایندر دارد که ارتباطات بین نما و ویژگی‌های بسته‌شده در مدل نمایشگر را به طور خودکار انجام می‌دهد. مدل نمایشگر گاهی به عنوان یک وضعیت از داده در مدل توصیف شده است.^[۸]

یک تفاوت اصلی بین مدل نما و ارائه‌دهنده در الگوی MVP این است که ارائه‌دهنده یک مرجع به نمایشگر دارد در حالی که مدل نمایشگر ندارد. به جای آن، نما به طور مستقیم به ویژگی‌های مدل نمایشگر برای ارسال و دریافت به‌روزرسانی‌ها بایند می‌شود. برای عملکرد بهینه، این نیاز به فناوری بایندینگ یا تولید کدهای سری می‌کند تا بایندینگ انجام شود. ^[۷]

تحت برنامه‌نویسی شی گرا، مدل نمایشگر گاهی به عنوان یک شیء انتقال داده ارجاع می‌شود.^[۹]

بایندر[ویرایش]

بایندر (Binder) یا واسط، به طور ضمنی در الگوی MVVM وجود دارد و وظیفه همگام‌سازی داده‌ها و دستورات بین مدل‌نما و نما را به عهده دارد. در پشته‌ی راه‌حل‌ هایمایکروسافت، بایندر یک زبان نشانه‌گذاری به نام XAML است. ^[۱۰] بایندر توسعه‌دهنده را از نوشتن منطق‌های تکراری برای همگام‌سازی مدل‌نما و نما معاف می‌کند. زمانی که الگوی MVVM خارج از پشته‌ی مایکروسافت پیاده‌سازی می‌شود، وجود یک فناوری بایندینگ داده‌های اعلانی است که امکان‌پذیری این الگو را فراهم می‌کند. ^[۵]^[۱۱]بدون یک بایندر، معمولاً از MVP یا MVC استفاده می‌شود و نیاز به نوشتن کدهای تکراری بیشتر است (یا تولید آن‌ها با استفاده از ابزارهای دیگر).

منطق[ویرایش]

MVVM برای حذف تقریباً تمام کدهای رابط کاربری گرافیکی ("کد-پشت") از لایه نمایش، با استفاده از توابع اتصال داده در WPF (بنیاد ارائه ویندوز) برای تسهیل بهتر جداسازی توسعه لایه دید از بقیه الگوها طراحی شده است. ^[۳] به‌جای اینکه توسعه‌دهندگان تجربه کاربری (UX) را مجبور به نوشتن کد رابط کاربری گرافیکی کنند، می‌توانند از زبان نشانه‌گذاری چارچوب (مانند XAML) استفاده کنند و پیوندهای داده‌ای را به مدل view ایجاد کنند، که توسط توسعه‌دهندگان برنامه نوشته و نگهداری می‌شود. جداسازی نقش‌ها به طراحان تعاملی اجازه می‌دهد تا به جای برنامه‌نویسی منطق تجاری، بر نیازهای UX تمرکز کنند. بنابراین، لایه های یک برنامه کاربردی را می توان در جریان های کاری متعدد برای بهره وری بالاتر توسعه داد. حتی زمانی که یک توسعه‌دهنده منفرد روی کل پایگاه کد کار می‌کند، جداسازی مناسب دیدگاه از مدل مؤثرتر است، زیرا رابط کاربری معمولاً در چرخه توسعه اغلب و در اواخر چرخه توسعه براساس بازخورد کاربر نهایی تغییر می‌کند.[نیازمند منبع]

الگوی MVVM تلاش می کند تا هر دو مزیت جداسازی توسعه عملکردی ارائه شده توسط MVC را به دست آورد، در حالی که از مزایای اتصال داده ها و چارچوب با اتصال داده ها تا حد امکان به مدل کاربردی خالص استفاده می کند.^[۳]^[۴] از بایندر، مدل مشاهده و ویژگی های بررسی داده های لایه های تجاری برای اعتبارسنجی داده های دریافتی استفاده می کند. نتیجه این است که مدل و چارچوب تا حد امکان عملیات را هدایت می‌کنند و منطق برنامه را که مستقیماً نمایش را دستکاری می‌کند، حذف یا به حداقل می‌رساند (به عنوان مثال، کد-پشت).

انتقاد[ویرایش]

جان گوسمن از الگوی MVVM و کاربرد آن در استفاده‌های خاص انتقاد کرده است. او معتقد است که MVVM می‌تواند برای ایجاد رابط‌های کاربری ساده، "بیش از حد" باشد. برای برنامه‌های بزرگ‌تر، او بر این باور است که عمومی‌سازی مدل‌نما از ابتدا می‌تواند دشوار باشد، و بایندینگ داده‌های بزرگ‌مقیاس می‌تواند منجر به کاهش عملکرد شود.

پیاده سازی ها[ویرایش]

فریمورک های NET.

Prism Library
Caliburn, Caliburn.Micro
.NET Community Toolkit
DevExpress MVVM
Chinook.DynamicMvvm Open source
DotVVM open source project
FreshMvvm
Jellyfish
MVVMLight Toolkit
Mugen MVVM Toolkit
ReactiveUI
- Open source
Rascl
MvvmCross
MvvmZero

کتابخانه های اجزای وب[ویرایش]

Microsoft FAST
Omi.js

فریمورک های جاوا اسکریپت[ویرایش]

فریم ورک برای ++C و XAML (ویندوز)[ویرایش]

Xamlcc

منابع[ویرایش]

↑ «"Thought: MVVM eliminates 99% of the need for ValueConverters"».
↑ «"The Presentation Model Design Pattern"».
↑ ^۳٫۰ ^۳٫۱ ^۳٫۲ ^۳٫۳ ^۳٫۴ ^۳٫۵ "Model–view–viewmodel". Wikipedia (به انگلیسی). 2024-05-24.
↑ ^۴٫۰ ^۴٫۱ kexugit (۲۰۰۵-۱۰-۰۸). «Introduction to Model/View/ViewModel pattern for building WPF apps». learn.microsoft.com (به انگلیسی). دریافت‌شده در ۲۰۲۴-۰۶-۲۶.
↑ ^۵٫۰ ^۵٫۱ "Design Patterns in ZK: Java MVVM as Model-View-Binder". SlideShare (به انگلیسی). 2011-04-09. Retrieved 2024-06-26.
↑ «Knockout : Observables». knockoutjs.com. دریافت‌شده در ۲۰۲۴-۰۶-۲۶.
↑ ^۷٫۰ ^۷٫۱ Archiveddocs (۲۰۱۲-۱۰-۰۴). «The MVVM Pattern». learn.microsoft.com (به انگلیسی). دریافت‌شده در ۲۰۲۴-۰۶-۲۶.
↑ «Pete W's idea book: Model-View-ViewModel Pattern for WPF: Yet another approach». web.archive.org. ۲۰۰۸-۰۲-۰۱. دریافت‌شده در ۲۰۲۴-۰۶-۲۶.
↑ wadepickett (۲۰۲۴-۰۵-۲۸). «Tutorial: Create a web API with ASP.NET Core». learn.microsoft.com (به انگلیسی). دریافت‌شده در ۲۰۲۴-۰۶-۲۶.
↑ «Windows Presentation Foundation Data Binding: Part 1». learn.microsoft.com (به انگلیسی). ۲۰۱۰-۰۵-۱۱. دریافت‌شده در ۲۰۲۴-۰۶-۲۶.
↑ "Model–view–viewmodel". Wikipedia (به انگلیسی). 2024-05-24.

[1] «"Thought: MVVM eliminates 99% of the need for ValueConverters"».

[2] «"The Presentation Model Design Pattern"».

[:0-3] ۳٫۰ ^۳٫۱ ^۳٫۲ ^۳٫۳ ^۳٫۴ ^۳٫۵ "Model–view–viewmodel". Wikipedia (به انگلیسی). 2024-05-24.

[:1-4] ۴٫۰ ^۴٫۱ kexugit (۲۰۰۵-۱۰-۰۸). «Introduction to Model/View/ViewModel pattern for building WPF apps». learn.microsoft.com (به انگلیسی). دریافت‌شده در ۲۰۲۴-۰۶-۲۶.

[:2-5] ۵٫۰ ^۵٫۱ "Design Patterns in ZK: Java MVVM as Model-View-Binder". SlideShare (به انگلیسی). 2011-04-09. Retrieved 2024-06-26.

[6] «Knockout : Observables». knockoutjs.com. دریافت‌شده در ۲۰۲۴-۰۶-۲۶.

[:3-7] ۷٫۰ ^۷٫۱ Archiveddocs (۲۰۱۲-۱۰-۰۴). «The MVVM Pattern». learn.microsoft.com (به انگلیسی). دریافت‌شده در ۲۰۲۴-۰۶-۲۶.

[8] «Pete W's idea book: Model-View-ViewModel Pattern for WPF: Yet another approach». web.archive.org. ۲۰۰۸-۰۲-۰۱. دریافت‌شده در ۲۰۲۴-۰۶-۲۶.

[9] wadepickett (۲۰۲۴-۰۵-۲۸). «Tutorial: Create a web API with ASP.NET Core». learn.microsoft.com (به انگلیسی). دریافت‌شده در ۲۰۲۴-۰۶-۲۶.

[10] «Windows Presentation Foundation Data Binding: Part 1». learn.microsoft.com (به انگلیسی). ۲۰۱۰-۰۵-۱۱. دریافت‌شده در ۲۰۲۴-۰۶-۲۶.

[11] "Model–view–viewmodel". Wikipedia (به انگلیسی). 2024-05-24.

[۱]

[۲]

[۳]

[۴]

[۵]

[۶]

[۷]

[۸]

[۹]

[۱۰]

[۱۱]