初识MVC框架

作者：王学成

一、MVC框架

         M-model，V-view，C-controller，模型-视图-控制器的框架模式发明于二十世纪八十年代。它强制数据的输入、处理、输出分开。

         模型负责数据处理，与数据库交互，可以为多个视图提供输出数据；视图则是负责数据输出，只是作为一种输出数据并且允许用户操作的方式；而控制器负责数据的输入并按照客户的要求来调用模型和视图，以确保模型与视图同步。

         MVC框架最大的优点就是其耦合性较低，模型是自包含的，输入输出与数据处理被强行分开，即使发生改变视图风格或是更换数据库等较大的改动，也只需要改变其中一部分的代码。这种松耦合的框架利于修改和维护。另外，由于控制器的存在，MVC的代码重用性很高，节省了大量的工作量和工作周期。

         同时，MVC框架也存在一定的缺陷。首先，由于MVC定义并不明确，因此在设计的时候需要花费大量的时间。虽然很多情况下，MVC给我们带来的好处值得这样的付出，但是在开发较小规模的MVC应用程序时，这种做法就有些得不偿失。另外，这种松散的框架带来了大量繁琐的文件管理工作，产生更多新的操作，有时反而会降低开发的效率。

         尽管有一些不足之处，MVC给程序设计人员带来的好处远远大于不足，因此各种各样的MVC架构层出不穷，其中Struts、Spring、JSF等等都十分出色，被广泛用于应用程序的设计中。

 

二、Backbone.js

         Backbone.js是一个web前端基于javascript的一个MVC框架，同时依赖于jquery和underscore。backbone的核心就是三个类：Backbone.Model、Backbone.Collection、Backbone.View，而数据则是通过JSON的形式在不同类中传递。

         Model负责数据的交互以及相关的逻辑，包括转换、验证、计算属性、访问控制、与数据库连接等等。这个类中有很多自带的属性和方法，比如set方法可以设置对象中的属性、get方法可以获取对象中的属性。同时，可以通过extend的方式拓展Model类并提供实力属性，以及可以直接注册到构造函数的类属性。Model通过进行事件绑定的方式与View保持一致。例如，当界面上的操作引起Model中属性的变化时，Model就会触发change事件，同时用来显示Model的相应的View就会接收到change的消息，从而相应的将新的数据重新渲染到界面上。这就意味着，我们不需要通过DOM获取节点或者直接更改HTML，只需要更改Model，View就会相应的进行更新。

         在Backbone的MVC框架中，C并不代表Controller，而是Collection，实际上就是Model的一个集合，方便了对Model的操作。

         View负责将数据渲染显示在界面上，不需要参与对于数据的处理。可以看出，View与Model互不干扰，耦合性较低，如果需要更改前端的显示风格，只需要对View进行修改，而不需要修改Model，为维护带来了很多方便。

 

三、SPA

         SPA的全称为Single-PageApplication，也就是一个将网络应用或是网站全部显示在一个网页中。当传统Web应用遇到用户体验以及性能的问题时，SPA应运而生，是的用户体验变得更加连续和流畅，并且大大减弱了网络延时带来的影响。构架如下图所示：

    可以看出，SPA具有一个离线资料库和一个同步管理程序，在有网络连接的时候，会将资料同步到线上的资料库，这样就能实现离线浏览的功能。其最大的优点就是极大的利用了客户端的CPU资源，使得用户的浏览和使用更加舒畅连贯。

 

四、todo分析

    分析demo后可以发现，todo主要有以下几个功能：1、添加一条任务；2、双击修改单条任务内容；3、标记已完成任务（可以标记全部任务）；4、显示剩余任务数量；5、删除已完成任务。下面就分别对todo.js中的几个对象具体分析：

    Model：

        default：设置默认属性

        initialize：初始化，确保content不为空

        toggle：将任务的完成状态取反

        clear：删除任务

 

    Collection：

        done：过滤出所有已经完成的任务

        remaining：过滤出还没有完成的任务

        nextOrder：为新加入的任务获取新的编号，保证任务列表中的任务序号升序连续

        comparator：将所有任务按照序号排序

       

    View（Todo）：

        events：给每一个任务绑定相应的响应事件

        initialize：初始化，将Model与View同步化

        render：将todo中的数据渲染到item-temple中

        toggleDone：将任务的完成状态取反

        edit：修改任务条目样式

        close：关闭编辑对话框，将内容同步到界面中

        updateOnEnter：键盘回车响应时间，同close

        clear：删除任务

    View（App）：

        events：给相应的DOM节点绑定响应事件

        initialize：初始化，同时从数据库获取数据

        render：改变当前任务列表状态

        addOne：添加一个任务到界面中

        addAll：将所有任务放入界面中

        newAttribute：生成一个新的任务

        createOnEnter：创建一个任务

        clearCompleted：删除已经完成的任务

        showTooltip：当用户输入新的任务时提示

        toggleAllComplete：处理界面中标记完成的任务

    通过Todo这个较为简单的例子，可以看出MVC框架能够很好的将数据的输入输出与处理分离开来，为日后的修改为户提供了很好的代码。

五、问题

    1、对于router和view还不是十分理解，希望老师上课时能够着重讲解

    2、MVC框架中与数据库交互的部分需要进一步学习