【Java设计模式】模型 - 视图 - 视图模型模式

【Java设计模式】模型 - 视图 - 视图模型模式

一、概述

Java中模型 - 视图 - 视图模型（MVVM）模式的目的是通过将应用程序分为三个相互关联的组件：模型、视图和视图模型，来提供用户界面逻辑、表示逻辑和业务逻辑之间的清晰关注点分离。

二、详细解释及实际示例

1. 实际示例：
   • 考虑一个类似于组织烹饪节目的现实世界中MVVM模式的类比示例：
   • 模型：代表食谱本身，包括烹饪菜肴所需的食材和步骤。模型纯粹是关于数据和准备菜肴的规则，但不关心这些信息如何呈现给观众。
   • 视图：类似于拍摄烹饪节目的厨房布景，包括所有视觉元素，如厨房的布局、食材的摆放和炊具。视图负责视觉呈现以及观众如何看到烹饪过程。
   • 视图模型：就像烹饪节目的脚本，它解释食谱（模型）并组织节目的流程。它告诉厨师（视图）下一步要展示什么，何时添加食材，以及如何应对变化，如替换食材。视图模型弥合了食谱的技术细节和厨师的展示之间的差距，确保观众理解每一步，而无需深入研究食谱本身的复杂性。
   • 在这个例子中，视图模型允许厨师专注于烹饪和与观众互动，而底层的食谱保持不变，促进了关注点的清晰分离。
2. 通俗解释：
   • MVVM设计模式将应用程序分为三个不同的组件：模型，它保存数据和业务逻辑；视图，它显示用户界面；视图模型，它作为中间件将模型中的数据绑定到视图。
3. 维基百科解释：
   • 模型 - 视图 - 视图模型（MVVM）是一种软件架构模式，它促进了图形用户界面（视图）的开发（无论是通过标记语言还是GUI代码）与业务逻辑或后端逻辑（模型）的开发的分离，使得视图不依赖于任何特定的模型平台。

三、Java中模型 - 视图 - 视图模型模式的编程示例

视图模型将包含业务逻辑，并将模型中的数据暴露给视图。

public class BookViewModel {
    @WireVariable
    private List<Book> bookList;
    private Book selectedBook;
    private BookService bookService = new BookServiceImpl();

    public Book getSelectedBook() {
        return selectedBook;
    }
    @NotifyChange("selectedBook")
    public void setSelectedBook(Book selectedBook) {
        this.selectedBook = selectedBook;
    }
    public List<Book> getBookList() {
        return bookService.load();
    }

    /** 删除一本书。 */
    @Command
    @NotifyChange({"selectedBook", "bookList"})
    public void deleteBook() {
        if (selectedBook!= null) {
            getBookList().remove(selectedBook);
            selectedBook = null;
        }
    }
}

视图将没有逻辑，只有UI元素。

<zk>
<window title="List of Books" border="normal" width="600px" apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('com.iluwatar.model.view.viewmodel.BookViewModel')">
    <vbox hflex="true">
        <listbox model="@bind(vm.bookList)" selectedItem="@bind(vm.selectedBook)" height="400px" mold="paging">
            <listhead>
                <listheader label="Book Name"/>
                <listheader label="Author"/>               
            listhead>
            <template name="model" var="book">
                <listitem >
                    <listcell label="@bind(book.name)"/>
                    <listcell label="@bind(book.author)"/>
                listitem>
            template>
        listbox>
    vbox>
    <toolbar>
        <button label="Delete" onClick="@command('deleteBook')" disabled="@load(empty vm.selectedBook)" />
    toolbar>
    <hbox style="margin-top:20px" visible="@bind(not empty vm.selectedBook)">
        <vbox>
            <hlayout>
                Book Name : <label value="@bind(vm.selectedBook.name)" style="font-weight:bold"/>
            hlayout>
            <hlayout>
                Book Author : <label value="@bind(vm.selectedBook.author)" style="font-weight:bold"/>
            hlayout>
            <hlayout>
                Book Description : <label value="@bind(vm.selectedBook.description)" style="font-weight:bold"/>
            hlayout>
        vbox>
    hbox>
window>
zk>

要部署示例，请转到model - view - viewmodel文件夹并运行：

• mvn clean install
• mvn jetty:run -Djetty.http.port=9911
• 打开浏览器访问地址：http://localhost:9911/model - view - viewmodel/

四、何时在Java中使用模型 - 视图 - 视图模型模式

MVVM适用于需要在用户界面和底层业务逻辑之间进行清晰分离的应用程序，特别是在大规模、数据驱动的应用程序中，其中UI和业务逻辑独立变化。这使得模型 - 视图 - 视图模型模式成为Java应用程序的理想选择。

五、模型 - 视图 - 视图模型模式在Java中的实际应用

• 广泛用于JavaFX应用程序的桌面界面。
• 在Android开发中使用，如使用DataBinding和LiveData等库进行响应式UI更新。
• ZK框架zkoss.org
• KnockoutJS knockoutjs.com

六、模型 - 视图 - 视图模型模式的好处和权衡

好处：

• 由于业务和表示逻辑的解耦，提高了可测试性。
• 更容易维护和修改用户界面，而不影响底层的数据模型。
• 如果设计通用，视图模型可以在不同视图之间增强可重用性。

权衡：

• 在小型应用程序中，增加了复杂性，其中更简单的模式可能就足够了。
• 与正确理解和应用模式相关的学习曲线。

七、源码下载

模型 - 视图 - 视图模型模式示例代码下载