码迷,mamicode.com
首页 > Web开发 > 详细

实践出真知:MVC和MVVM

时间:2018-05-29 20:33:28      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:asc   数组   fan   vue   展示   model   返回   html模板   ==   


title: 实践出真知:MVC和MVVM
date: 2018-04-13 08:40:02
tags: mvc mvvm 数据驱动
categories: web
---

理论来自于实践,并指导于实践 - 佚名

我相信在MVC等理论形成之前,就已经有人在付诸MVC的实践。只是后来有人总结下来,并指导人们做软件开发。这种设计典范并不是只有后台的代码才有,前端也可以有很好的框架,像react和vue。

为什么这么强调实践。因为在我学习MVC理论的时候,我是蒙蔽的。虽然看了很多优秀的文档,比如,阮大神的MVC,MVP 和 MVVM 的图示

看了之后挺有感觉,兴冲冲写代码的时候,又感觉不知所措。不知从何下手,不知如何划分。
最近在用react,又帮别人写了一个jquery代码,现在将这种套路试着总结一下。

需求

从后台获取数据,渲染一个简单的列表,实现列表的增删改查
类似于这种
{% asset_img demo1.png %}

之前的套路 jquery

这是之前写代码的套路:

  1. 页面初始渲染时,从后台获取数据(一个数组)
  2. 将数据使用 字符串拼接 或者 前端模板 将数据渲染到页面中
  3. 给渲染的列表绑定增删改查的事件
  4. 拿一个删除举例,点击删除按钮,获取当前行数据的id值,发送ajax请求,根据id在后台数据库中删除,返回成功码,前端将当前行使用DOM方法删除
  5. 其他的事件也是类似,在ajax的成功回调中进行dom的操作,毕竟jquery是DOM操作神器,操作起来都感觉6的飞起

使用react实现

  1. 在组件中定义state.arr将即将要渲染的数据保存在其中
  2. 写html模板
  3. 请求数据,setState数据值,数据改变,页面自动刷新
  4. 接着拿删除举例,点击删除按钮,获取当前行数据的id值,发送ajax请求,在成功的回调中,使用

    let a = this.state.arr.filter(item => item.id !== id);
    this.setState({
    arr: a
    })
    数据改变,视图又自动刷新
  5. 其他事件也是类似,从始至终都没有再操作过dom,只是各种使用setState方法,来维护要展示的数据

这种方法肯定就是著名的MVC模式了。和第一种比起来,就发现这种好处是什么。我们只专心的操作数据,维护状态,从没有去操作过dom。
让我们精力更集中。

适时放一张图来感受一下。

{% asset_img mvc1.png %}

看着上图来念一遍:数据改变 -> 视图刷新 -> 事件修改数据(controller)-> 数据改变再次渲染视图。

抄一段阮一峰大神博客的原文

View 传送指令到 Controller
Controller 完成业务逻辑后,要求 Model 改变状态
Model 将新的数据发送到 View,用户得到反馈

TIPS:因为jquery是操作dom神器。使用react和vue都不建议直接操作dom,所以用框架的话还是早是日脱离jquery

如果感觉不强烈,可以画一张示意图来看一下,第一种方法的流程是什么样的。

{% asset_img mvc2.png %}

获取数据后 -> 渲染了一次视图 -> 监听事件完成后台交互 -> 又双叕粗暴的改变了视图

根据这种思想改造一下第一种方法 jquery

我们要维护一个状态数组,数组改变后,就去刷新视图,监听事件,改变状态

准备工作:
因为jquery不会自动刷新视图,还是需要写一个render方法来渲染视图,这个方法在初次渲染数据和修改数据后改变都要执行的。

var arr = []; // 要维护的数据

function render(arr) {
    // 渲染 arr
    
    bindEvent();
}

function bindEvent() {
    // 绑定各种事件 
}

这样重构完,再来结合图看一次。

{% asset_img mvc3.png %}

点击查看代码示例

点击查看源码

接下来对比一下 mvc 和 mvvm

上面实现了简陋的mvc。会发现,不管arr状态有个风吹草动,整个列表都会重新调用渲染方法。react和vue内置了各种diff算法,避免了这个尴尬。

未完待续。。。

实践出真知:MVC和MVVM

标签:asc   数组   fan   vue   展示   model   返回   html模板   ==   

原文地址:https://www.cnblogs.com/changzhenan/p/9107559.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!