软件的架构模式MVC、MVVM

1 MVC(Model View Controller)

MVC是一种通用架构模式,M(Model)指业务模型,V(View)指用户界面,C(Controller)指控制器,架构内容是模型—视图—控制器

MVC开始是存在于桌面程序中的,目的是将M(业务模型)和V(用户界面)的实现代码分离,从而使同一个程序可以使用不同的表现形式。比如一批统计数据可以分别用柱状图、饼图来表示。C(控制器)存在的目的则是确保M(业务模型)和V(用户界面)的同步,一旦M(业务模型)改变,V(用户界面)应该同步更新。

MVC模式的优点如下:

  1. 耦合性低。视图层和业务层分离,这样就允许更改视图层代码而不用重新编译模型和控制器代码,同样,一个应用的业务流程或者业务规则的改变只需要改动MVC的模型层即可。因为模型与控制器和视图相分离,所以很容易改变应用程序的数据层和业务规则。
  2. 重用性高。MVC模式允许使用各种不同样式的视图来访问同一个服务器端的代码,因为多个视图能共享一个模型,它包括任何WEB(HTTP)浏览器或者无线浏览器(wap),比如,用户可以通过电脑也可通过手机来订购某样产品,虽然订购的方式不一样,但处理订购产品的方式是一样的。由于模型返回的数据没有进行格式化,所以同样的构件能被不同的界面使用。
  3. 部署快,生命周期成本低。MVC使开发和维护用户接口的技术含量降低。使用MVC模式使开发时间得到相当大的缩减,它使程序员(Java开发人员)集中精力于业务逻辑,界面程序员(HTML和JSP开发人员)集中精力于表现形式上。
  4. 可维护性高。分离视图层和业务逻辑层也使得WEB应用更易于维护和修改。

MVC模式的缺点如下:

  1. 完全理解MVC比较复杂
  2. 调试困难。因为模型和视图要严格的分离,这样也给调试应用程序带来了一定的困难,每个构件在使用之前都需要经过彻底的测试。
  3. 不适合小型,中等规模的应用程序。在一个中小型的应用程序中,强制性的使用MVC进行开发,往往会花费大量时间,并且不能体现MVC的优势,同时会使开发变得繁琐。
  4. 增加系统结构和实现的复杂性。对于简单的界面,严格遵循MVC,使模型、视图与控制器分离,会增加结构的复杂性,并可能产生过多的更新操作,降低运行效率。
  5. 视图与控制器过于紧密的连接降低了视图对模型数据的访问。视图与控制器是相互分离,但却是联系紧密的部件,视图没有控制器的存在,其应用是很有限的,反之亦然,这样就妨碍了他们的独立重用。依据模型操作接口的不同,视图可能需要多次调用才能获得足够的显示数据。对未变化数据的不必要的频繁访问,也将损害操作性能。

2 MVVM( Model,View,ViewModel)

MVVM 由 Model,View,ViewModel 三部分构成,Model层代表数据模型,可以在Model中定义数据修改和操作的业务逻辑View代表UI组件,它负责将数据模型转化成UI展现出来ViewModel是一个同步View和Model的对象

在MVVM架构下,View和 Model之间并没有直接的联系,而是通过ViewModel进行交互,Model 和ViewModel之间的交互是双向的, 因此View数据的变化会同步到Model中,而Model数据的变化也会立即反应到View上。

ViewModel通过双向数据绑定把View层和Model层连接了起来,而View和Model之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑不需要手动操作DOM,不需要关注数据状态的同步问题,复杂的数据状态维护完全由MVVM来统一管理。
在这里插入图片描述
Vue框架就是属于MVVM模型。在Vue中,M(模型Model)表示data中的数据,V(视图View)表示模板代码,VM(视图模型ViewModel)表示Vue实例。
在这里插入图片描述
注意:

  1. data中所有的属性,最后都出现在了vm身上。根据上面的代码,将vm在控制台输出(console.log(vm);),可以看到$data中出现了data中定义的属性name:"橘猫吃不胖"
    在这里插入图片描述
  2. vm身上所有属性,及Vue原型上所有的属性,在Vue模板中都可以直接使用。vm中有很多属性,如下所示:
    在这里插入图片描述
    比如说将$options输出,代码如下,则在网页上会将其信息显示出来:
    <div id="app">
        <p>options:{{$options}}</p>
    </div>
    <script>
        var vm = new Vue({
            el: "#app"
        })
    </script>

在这里插入图片描述
或者输出原型上的方法_e,代码如下,该信息也会显示:

    <div id="app">
        <p>_e:{{_e}}</p>
    </div>
    <script>
        var vm = new Vue({
            el: "#app"
        })
    </script>

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值