tofacebook.com -专业IT技术社区 【百家号】脸书百科,使用vue重构项目(一)关于mvc mvp mvvm 相关介绍 Web程序 - tofacebook.com-专业IT技术社区
83°

【百家号】脸书百科,使用vue重构项目(一)关于mvc mvp mvvm 相关介绍 Web程序

标签:产生   简洁   就是   add   从服务器   视觉   基本功   融合   mod   

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

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的关系

技术分享图片

  1. Mode--  数据层   业务逻辑和实体类
  2. View--  视图层   页面的展示
  3. p-- Presenter 逻辑层   包括数据和视图层交互

Presenter直接调用Model的接口方法,当Model中的数据发生改变,通知Presenter进行对应的View改变。从而使得View不再与Model产生交互。

 

angular1 vue react 三个框架对比与分析

首先楼主本人并不了解angular2+ 所以就拿着三个框架进行一些分析。

 

首先来看react吧,一个我自己也不怎么熟悉的框架,也是属于现学现卖。

1、react

 等待ing...

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

标签:产生   简洁   就是   add   从服务器   视觉   基本功   融合   mod   

原文地址:https://www.cnblogs.com/mamimi/p/9374510.html


本文由百家号/熊掌号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。