前端MVC框架

前端MVC:V代表View,主要是展示视图;C代表Controller,主要进行事件绑定;M代表Model,主要进行数据请求和操作。

eg:View展示页面,点击View -> 触发Controller,进行事件绑定 -> 调用Model,Model执行 -> 结果展示在View。

下面直接上实例:

View:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>FrontEnd MVC</title>
    </head>
<body>
    <input type="button" value="点击前" id="btn"/>
    <script src="js/model.js"></script>
    <script src="js/controller.js"></script>
</body>
</html>

Controller:

function $(id){
    if(id && typeof id == 'string'){
        return document.getElementById(id);
    }
}

var Controller = new Object();
Controller.register = function(id,event,func,arg){
    if($(id)){
        $(id)['on'+event] = function(){
            func($(id),arg);
        }
    }
}

Controller .register('btn',"click",operator,[1,2,3,4]);

Model:

function operator(element,arg){
    if(Array.isArray(arg)){
        alert(arg.length);
        element.value = '点击后' ;
        alert(arg[0]);
        console.log(arg);
    }
}


你可能感兴趣的:(mvc,controller,view,Model)