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

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

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

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

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

مدل-نما-نمامدل (Model–View–ViewModel) همچنین به عنوان مدل-نما-پیونددهنده (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.

[۱]

[۲]

[۳]

[۴]

[۵]

[۶]

[۷]

[۸]

[۹]

[۱۰]

[۱۱]