关于MVC与MVVM的一点理解（以及MVP）

mvc:

mvc中，c负责业务逻辑，完成业务逻辑以后，要求model改变状态。在传统
的设计中，很有可能把大量的代码放到其中，让mvc变成massive view controller.

究其原因，在于视图与要求的模型不匹配，需要写很多的代码去获取视图需要的数据去填充视图。这个时候，视图模型这个东西就出现了。

在这几天的nodejs+express的学习过程中，学到mvc这部分的时候，例子中运用了视图模型这个概念，即ViewModel，刚开始对于这个新概念还是有一定误解的，毕竟mvvm的东西也了解过一些。网上找了一些资料后发现，这样做是借鉴mvvm设计模式，这样抽象以后，view只接受viewmodel，controller中获取viwemodel即可，这样就可以有效的瘦身controller，让其专注逻辑。这部分是在学习express中感受到的，而在以前用sails做东西的时候，其实它默认并没有借鉴这方面的东西，但是采用了一些其他方法瘦身controller，比如从controller中拆分出service层、storage层等，对于瘦身controller也是很有效的方法。

mvvm

现阶段对于mvvm的了解还停留在angular、双向绑定这些概念，对于以后想用vue构建view，所以这方面还是有必要了解的。这部分在有空完成后端学习以后再补充吧。

ps：
另外想补充一点对于现阶段express应用的组织，借鉴了sails的风格，首先将http请求封装在route.js文件中，然后model文件存放模型，有必要的话建立viedmodel文件存放视图模型，controller文件存放控制器，这样做的话逻辑比较清晰，写起来也会感觉比较舒服，因为有过一点sails项目的经验，另外可以仿照sails的config文件夹或者新建config.js存放相关内容，这些根据实际需要配置即可。

---

用代码以及图更好地说明三者：

mv：

刚开始是把逻辑也放在view里的：

image.png

image.png

mvc：

用mvc实现上述功能：

image.png

image.png

image.png

image.png

image.png

image.png

image.png

mvp：

image.png

image.png

image.png

image.png

image.png

mvvm：

用vue作为例子：

image.png

image.png

image.png

image.png

其中，实现双向绑定用的是数据劫持&发布-订阅模式，在接下来的源码学习中在详细记录。

image.png

参考资源：https://juejin.im/post/593021272f301e0058273468?utm_source=gold_browser_extension