30-9 之Presentation Layer - MVP ( Model-View-Presenter )

接下来我们来谈谈 MVP ( Model-View-Presenter )，在知道 MVC 也只是在讨论 3-Tier 的 Presentation 的事情後，而 MVP 为 MVC 的进化端也可以知道，它也是 3-Tier 的 Presentation 范围。

它与 MVC 最大的差异在於 :

Model 与 View 中间的连结消失了，你可以拉到上面 MVC 的图看看

先来说说 MVP 三个代表的意思 :

  • Model : 就是资料，同样大部份也是从资料库或是远端 API 取得。
  • View : 处理 UI 的地方。
  • Presenter : 它比较算是会针对特定的 view 提供对应的 model 给他，并且所有的操作大部份都集中在这。

https://ithelp.ithome.com.tw/upload/images/20210924/200893584XPotyDljh.png

图片来源: educative-Acing the JavaScript Design Patterns Interview

呃 ~ 我说实话，我第一次看到 MVP 这张图式的时後，我真它的觉的 :

这不就是 MVC 吗 ?

对真的很象，我当初对 MVC 的理解来自於 ASP.NET MVC，它的范例程序码如下 ，它的流程同如下 :

View ←—> Controller ←→ View

是不是和上面的 MVP 图有 87 % 的像呢 ? 我真的困或需久，後来我发现原来原始的 MVC 并不是我想的 MVC 如上一篇所说，才解这个小疑问。

// Controller
public class loginController : Controller  
{   
        static List<User> users = new List<User>();  
        public ActionResult Index()  
        {  
            // Model
					  users = _getUsersFromModel()
            return View(users);  
        }
}


// View
<head runat="server">  
    <title>Index</title>  
</head>  
<body bgcolor="#66ffcc">  
    <div>    
<% foreach (var user in Model) { %>  
    <tr>   
        <td>  
            <%= Html.Encode(user.Name) %>  
        </td>  
        <td>  
            <%= Html.Encode(user.Email) %>  
        </td>  
    </tr>  
<% } %>  
</table>  
    </div>  
</body>  
</html>

范例

这个是我在 educatvie 找到的范例，我将重要的抽出来，我觉得这个范例很明显提到几个重点 :

  • view 与 model 完全由 presenter 来操作，而 model 与 view 完全分离。
  • presenter 与 view 与 model 是 1 vs 1 vs 1 的关系，你可以想成它是完全用来处理『 某一个画面 』的所有操作。
class Presenter{
    constructor(view, model){
        this.view = view;
        this.model = model;
    }

    changeText(text){
        if(text !== text.toUpperCase()){
            this.view.displayError();
        }else{
            this.model.setText(text); 
            this.view.displayMessage(this.model.getText());
        }
    }
}

class View{
    constructor(presenter){
        this.presenter = presenter;
    }

    displayError(){
        console.log("Text is not in upper case");
    }

    displayMessage(text){
        console.log("The text is: " + text);
    }

    changeText(text){
        this.presenter.changeText(text);
    }
}

class Model{
    constructor(text){
        this.text = text;
    }
    setText(text){
        this.text = text;
    }
    getText(){
        return this.text;
    }
}

然後我也有尝试的去寻找一下有没有什麽 mvp 的 framework ，说实话我找到的不算太多，目前看到完全核心思想以 MVP 做的 js framework 应该只有 riot，有兴趣的自已看看吧。

小总结

这个知识点可以用来解释什麽现象

MVP 这个东西基本上算是 MVC 的升级版本，因为 MVC 的 view 与 model 是有相连的 ( 忘了的话请看前一篇文，我还有贴 1988 年最早版本 MVC 图，别怀疑 )，而 MVP 是分开的。

然後我又有想了一下，为什麽 ASP.NET MVC 会长的这麽像 MVP，我觉得比较大的原因是因为 view 前端，与後端 controller 中间多了一个沟通 http 无状态，这也导致它没办法像原始的 MVC，model 可以与 view 直接互动吧，我推测的。

这个知识点可以和以前的什麽知识连结呢 ?

我觉得可以将软件架构原则的 SOLID 抓出以下这个来说说 :

  • SRP ( Single-Responsibility Principle ) 单一职责原则

不论是 MVC 还是 MVP 它们的目的都是将职责分好，这点和 SRP 概念几乎 87 % 的像。

我要如何运用这个知识点 ?

我现在还想不到… 因为好像这种分离概念一直有，我这里只想搞清楚一堆 M 开头的到底有什麽差别，我搞的好混乱。

参考资料


<<:  绘图 - 即时行情

>>:  [Day09 - UI/UX] UI 绘制

Day18 Plugin 从零开始到上架 01

目标 接下来将实作一个Flutter Plugin 来上架至pub.dev，为整合Instagram...

D29 Selenium 自动注册帐户

研究了半天 写了一个自动注册帐户的程序 如下 首先会读取chromedriver 开启後转到注册页面...

[Day12]C# 鸡础观念- 当我们同在一起~阵列(Array)

成绩单上有国，英，数，物理四科 分数分别70、89、72、93 这时候我们就可以用阵列将他们绑再一起...

连续 30 天 玩玩看 ProtoPie - Day 6

终於要从 Beginner 迈向 Intermediate 了。 这次的讲者讲话好清楚，转 1.75...

【Day12】插槽 Portals

Portals 是一种让 children 可以 render 到 parent component...