使用vue重构项目（一）关于mvc mvp mvvm 相关介绍

时间：2018-07-27 19:13:24 阅读：319 评论：0 收藏：0 [点我收藏+]

首先我们为什么重构这个项目

1：我们现有的技术是前后台不分离，页面上采用esayUI+jq构成的单页面，每个所谓的单页面都是从后台胜场的唯一Id 与前端绑定，即使你找到了那个页面元素，也找不到所在的文件，因为这个id是随机生成的，而页面的id绑定是由后台传回来的Id获得。

2：前后端项目融合在一起，UI框架与jQ使用，对于前端开发人员来说，从最简单的项目启动与调试，都是很繁琐的事情。

3：jsp与后台的架构混杂，文件分离过于复杂，耦合性还很高，针对某个显示出来的页面，我们很难定位到其所在，即使连个路径，都需要从后台获取。

4：开发效率低下，老的技术虽然考验程序员的基本功，但是代码繁杂却又啰嗦，可以看到，在开发时想快速开发所有的代码都是粘贴复制的。为现在的开发留下了很多的技术债。

怎么重构这个新的项目呢

由上面的介绍可以了解到，框架的出现是必然的，可以为开发人员提供一个可以快速构建准确且美观简洁的web应用的技术势必受到所有人的追捧，慢慢的前端就形成了现在三大框架 angular vue react 鼎立的局面。

首先我们不分析这三个框架，我们来看下前端的一些架构上面的基础知识。

前端MVC设计模式

首先最初这个设计模式是来自后端的java架构，用一张图来表示

技术分享图片

这样设计的好处就是，每一层专注于做一件事情，层与层之间保持松耦合，每层做测试也方便，代码的维护性也会变得很好，前端的代码模块化会很明显。

1> mvc：

先来看看《基于MVC的JavaScript Web富应用开发》对MVC的定义——

MVC是一种设计模式，它将应用划分为3个部分：数据（模型 ajax）、展现层（视图 html）和用户交互（控制器 js/事件有种说法叫做触发器）。

换句话说，一个事件的发生是这样的过程：

1. 用户和应用产生交互。

2. 控制器的事件处理器被触发。

3. 控制器从模型中请求数据，并将其交给视图。

4. 视图将数据呈现给用户。我们不用类库或框架就可以实现这种MVC架构模式。关键是要将MVC的每部分按照职责进行划分，将代码清晰地分割为若干部分，并保持良好的解耦。这样可以对每个部分进行独立开发、测试和维护。

关于mvc的框架，如 Embejs angularjs backbonejs Knockoutjs 等等--

技术分享图片

通过上图，我们我们可以清楚地了解Javascript MVC框架之间的特性，复杂度和学习曲线的区别，从左到右我们了解到各个Javascript MVC框架是否支持数据绑定（Data Binding）、模板（Templating）和持久化等特性，从下到上MVC框架的复杂性递增。

　　当然，“我们不用类库或框架就可以实现这种MVC架构模式。”因此，我们需要对MVC的每一个部分，做一个详细的剖析——

　　1> 模型——

模型用来存放应用的所有数据对象。比如，可能有一个User模型，用以存放用户列表、他们的属性及所有与模型有关的逻辑。
模型不必知道视图和控制器的逻辑。任何事件处理代码、视图模板，以及那些和模型无关的逻辑都应当隔离在模型之外。
将模型的代码和视图的代码混在一起，是违反MVC架构原则的。模型是最应该从你的应用中解耦出来的部分。
当控制器从服务器抓取数据或创建新的记录时，它就将数据包装成模型实例。也就是说，我们的数据是面向对象的，任何定义在这个数据模型上的函数或逻辑都可以直接被调用。

　　2> 视图——

视图层是呈现给用户的，用户与之产生交互。在JavaScript应用中，视图大都是由HTML、CSS、JavaScript模板组成的。除了模板中简单的条件语句之外，视图不应当包含任何其他逻辑。将逻辑混入视图之中是编程的大忌，这并不是说MVC不允许包含视觉呈现相关的逻辑，只要这部分逻辑没有定义在视图之内即可。我们将视觉呈现逻辑归类为“视图助手”（helper）：和视图相关的独立的小工具函数。

来看下面的例子，其在视图中包含了逻辑，这是一个范例，平时不应当这样做：

        <div>
            <script>
                function formatDate(data) {
                    /*....*/
                }
            </script>
            ${ formatDate(new Date()) }
        </div>

但是在我们的现系统之内，常见的就是这种将逻辑混淆在视图之内，整个页面看起来就是一个标签的大杂烩，混乱不堪，难以查找一些逻辑代码，这也是违反了mvc初衷。

再来看下面一段代码，将视觉呈现逻辑剥离出来放入视图助手中，可以让这个应用结构满足mvc。

        /* 外部文件 helper.js */
        
            var helper = {};
            helper.formateDate = function (date) {
                /*  */
            }
        /* template.html 页面 */
        <div>
            ${ helper.formateDate(new Date()) }
        </div>

此外，该写法实现了一个功能函数对象，将所有视觉呈现逻辑都包含在helper变量中，这是一个命名空间，可以防止冲突并保持代码清晰、可扩展。

3> 控制器——

控制器是模型和视图之间的纽带。控制器从视图获取事件和输入，对它们（很可能包含模型）进行处理，并相应地更新视图。当页面加载时，控制器会给视图添加事件监听，比如监听表单提交或按钮点击。然后，当用户和你的应用产生交互时，控制器中的事件触发器就开始工作了。

我们用简单的jQuery代码来实现控制器——

        var controll={};
        (controller.users = function ($) {
            
            var nameClick = function () {
                /*...*/
            }
            
            
            $(function() {
                $(‘#view .name‘).click(nameClick)
            });
        })(jQuery)

现在，我们知道了M（Model）、V（View）、C（Controller）每个部分的工作内容，我们就可以轻松实现属于我们自己的MVC应用程序了，当然，我们完全不必依赖那些流行与否的MVC框架。

下面再看一张图：

技术分享图片

MVC的View直接与Model打交道，Controller仅仅起一个“桥梁”作用，它负责把View的请求转发给Model，再负责把Model处理结束的消息通知View。Controller就是一个消息分发器。不传递数据（业务结果），Controller是用来解耦View和Model的，具体一点说，就是为了让UI与逻辑分离（界面与代码分离）。

一对C-V捆绑起来表示一个ui组件，C直接接受用户输入，并将输入转为相应命令来调用M的接口，对M的状态进行修改，最后通过观察者模式对V进行重新渲染。

2> MVP

先来看一张图表示下mvp的关系

技术分享图片