摘要：首先我们要大概搞清楚一些什么模式。什么模式是等的一个统称，它们各有不同，但本质上其实是一个东西。不关心它会被如何显示或是如何被操作。效果图如下，我们只关心功能实现，所以样式丑我们先忍一下。
假如让你不依托任何前端框架（React/Vue/Angular等等），单纯用Javascript编写一个网站应用，你还知道怎么开发吗？
举个例子，产品经理让你实现一个网页，上面有一张猫咪的图片，猫咪的下面显示点赞的次数。每次点击猫咪的图片，点赞的数字加一。
这个对大家来说应该都很简单。
这时候产品经理开始加需求了，网页上展现五张猫咪图片，分别有自己的点赞次数，点击猫咪图片，相对应的点赞次数加一。这时候你想怎么改写自己的程序呢？你的程序现在看起来是否逻辑清楚，结构清晰，可拓展性强呢？
今天我就要带大家用MV模式来组织代码，编写出高质量优美的前端项目。首先我们要大概搞清楚一些什么MV模式。
什么MV*模式
MV*是MVC/MVP/MVVM等的一个统称，它们各有不同，但本质上其实是一个东西。MVP和MVVM是MVC的变体。所以我们今天不谈论它们的区别，只关注核心的东西。
M代表的是Model，用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。Model有对数据直接访问的权力，例如对数据库的访问。Model 不关心它会被如何显示或是如何被操作。
V代表的是View，用于将数据有目的的显示出来，在 View 中一般没有程序上的逻辑。
最后的*，不管是Controller还是Presenter，还是ViewModel，本质上做的事情就是连接M和V，搭建M和V沟通的桥梁。让M和V不直接沟通，达到职责分离的效果。
我们可以看维基百科上一个极简的MVC实现：
/** 模拟 Model, View, Controller */
var M = {}, V = {}, C = {};
/** Model 负责存放资料 */
M.data = "hello world";
/** View 负责将资料显示到屏幕上 */
V.render = (m) => { alert(m.data); }
/** Controller 作为一个 M 和 V 的桥梁 */
C.handleOnload = () => { V.render(M); }
/** 在网页读取的时候调用 Controller */
window.onload = C.handleOnload;
我们今天要实现的MV*就要满足这几个条件：
Model保存我们的数据
View负责渲染节点，可以有多个View
*（我们给它取个名字叫Bridge）为View提供读取和修改Model的方法
产品经理的需求
最终版：网页左侧展示一个可选择的猫咪名字列表，右侧展示当前选中的猫咪详情，包括猫咪名称，猫咪图片，该猫咪被点赞数量和一个点赞按钮。点击点赞按钮，当前猫咪的点赞数量加1。效果图如下，我们只关心功能实现，所以样式丑我们先忍一下。
HTML && CSS
![placekitten]()
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/94721.html
-
摘要：在没有环境下对进行单元测试的时候，应用逻辑正确性是无法验证的更新的时候，无法对的更新操作进行断言。对是通过接口进行，在对进行不依赖环境的单元测试的时候。这里根据上面的例子给出了的单元测试样例。年微软工程师在自己的博客上首次公布了模式。
前言
做客户端开发、前端开发对MVC、MVP、MVVM这些名词不了解也应该大致听过，都是为了解决图形界面应用程序复杂性管理问题而产生的应用架构模式。网上...
-
摘要：在没有环境下对进行单元测试的时候，应用逻辑正确性是无法验证的更新的时候，无法对的更新操作进行断言。对是通过接口进行，在对进行不依赖环境的单元测试的时候。这里根据上面的例子给出了的单元测试样例。年微软工程师在自己的博客上首次公布了模式。
前言
做客户端开发、前端开发对MVC、MVP、MVVM这些名词不了解也应该大致听过，都是为了解决图形界面应用程序复杂性管理问题而产生的应用架构模式。网上...
shleyZ
评论0
收藏0
-
摘要：如何同步的变更。在没有环境下对进行单元测试的时候，业务逻辑的正确性是无法验证的更新的时候，无法对的更新操作进行断言。对是通过接口进行，在对进行不依赖环境的单元测试的时候。这里根据上面的例子给出了的单元测试样例。
前言
做客户端开发、前端开发对MVC、MVP、MVVM这些名词不了解也应该大致听过，都是为了解决图形界面应用程序复杂性管理问题而产生的应用架构模式。
网上很多文章关于这方面的讨...
男|高级讲师
-
阅读 3637·2021-11-24 09:38
-
阅读 3141·2021-11-15 11:37
-
阅读 780·2021-11-12 10:36
-
阅读 3546·2021-10-21 09:38
-
阅读 3219·2021-09-28 09:36
-
阅读 2419·2021-09-22 16:01
-
阅读 4983·2021-09-22 15:09
-
阅读 1209·2019-08-30 15:55
