前端开发MVC模式介绍

责编:menVScode 2018-01-31 20:16 阅读(539)

        MVC中的是单向通信。也就是View跟Model,必须通过Controller来承上启下。视图(View):用户界面。控制器(Controller):业务逻辑模型(Model):数据保存。

        所有通信都是单向的,各部分之间的通信方式如下:

QQ截图20180131201546

        (1) View 传送指令到 Controller

        (2) Controller 完成业务逻辑后,要求 Model 改变状态

        (3) Model 将新的数据发送到 View,用户得到反馈

        互动模式

        (1) 接受用户指令时,MVC 可以分成两种方式。一种是通过 View 接受指令,传递给 Controller。 

        

        (2)  另一种是直接通过controller接受指令。

        案例:需要给一个页面上的button注册一个onclick事件

        (1) 我们可以有如下最简洁的写法:(view和model control完全混合)

<HTML>
    <HEAD>
        <TITLE> example </TITLE>
    </HEAD>
    <BODY>
        <input type="button" value="baidu" onclick="alert(this.value);"/>
    </BODY>
</HTML>

        如上写法的好处:简单、直接;严重的弊端:如果都是这样写法,页面代码很大的时候,修改js代码还需要查找整个页面,导致整个页面非常混乱。

        (2) 将html和js代码进行适当分离:(view和model control在同一页面适当分离)

<HTML>
    <HEAD>
        <TITLE> example </TITLE>
    </HEAD>
    <BODY>
        <input type="button" value="baidu" onclick="tipInfo(this);"/>
        <SCRIPT LANGUAGE="JavaScript">
        <!--
            function tipInfo(o){ alert(o.value);}
        //-->
        </SCRIPT>
    </BODY>
</HTML>

        这是将页面上所有的js代码操作放到<script></script>标签中进行。使得js逻辑代码相对集中,易于后期修改。但是我们还是需要在html标签中写tipInfo(this)的js调用代码。即html和js仍然有混合。

        (3) 将html和js代码彻底分离:(view和model control完全分离)

         视图view的html代码:

<HTML>
    <HEAD>
        <TITLE> example </TITLE>
    </HEAD>
    <BODY>
        <input type="button" value="baidu" id="baidu"/>
    </BODY>
    <script src="example.js"></script>
</HTML>

        分离出来的模型model和控制control的综合example.js代码:

 var o = document.getElementById("baidu");
o.onclick = function(){
    alert(this.value);
}

        button节点的操作和事件注册等工作完全与html页面分离。但是仔细想想,这还不是一个基于MVC的模式,control和model完全混合在一起。

        (4) 符合MVC框架的实现:(view、mode和control完全分离)

        View视图的view.html代码:

<HTML>
    <HEAD><TITLE> example </TITLE></HEAD>
    <BODY>
        <input type="button" value="baidu" id="baidu"/>
    </BODY>
    <script src="model.js"></script>
    <script src="control.js"></script>
</HTML>

        实现control控制功能的control.js代码:

function G(id){
    return document.getElementById(id);
}
var UI = new Object();
UI.register = function(id,even,fun,arr){
    if(G(id)) {
        G(id)["on"+even] = function(){ fun(arr);}
    };
}
UI.register("baidu","click",tipInfo,[1,2]);

/*     第一参数:为button节点id

    第二参数:为需要注册的触发事件

    第三参数:事件触发函数

第四参数:需要传递的参数。

*/

        control.js的代码就是实现html页面节点事件的注册。使得节点的各种事件知道会触发什么函数去执行。具体的函数操作,可以放到model模块中执行,在model中,才是真正处理逻辑操作。

        model.js代码:

function tipInfo(arr){
    alert(arr[1]);
    //实现其他组件功能,例如popup、form等。都属于model模型
}

总结:

        Model:即数据模型,用来包装和应用程序的业务逻辑相关的数据或者对数据进行处理,模型可以直接访问数据。

        View:视图用来有目的显示数据,在视图中一般没有程序上的逻辑,为了实现视图上的最新功能,视图需要访问它监视的数据模型。

        Controller:控制器调控模型和视图的联系,它控制应用程序的流程,处理事件并作出响应,事件不仅仅包括用户的行为还有数据 模型上的改变。通过捕获用户事件,通知模型层作出相应的更新处理,同时将模型层的更新和改变通知给视图,使得视图作出相应改变。因此控制器保证了视图和模 型的一致性。

        代表的框架有:AngularJS、BackboneJS(目前使用较多的是其View层~)、Ember.js、Javascript MVC、Knockout.js 等。


        MVVM:它采用双向绑定(data-binding):View的变动,自动反映在 ViewModel,反之亦然。

标签: mvc 前端
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码