浅谈MVC模式

最新推荐文章于 2023-01-01 01:43:19 发布

csdn-Allen

最新推荐文章于 2023-01-01 01:43:19 发布

阅读量229

点赞数 1

文章标签： MVC MVC模式 js

本文链接：https://blog.csdn.net/baidu_41601299/article/details/86925605

版权

关注小编微信公众号公众号【前端基础教程从0开始】回复“1”，拉你进程序员技术讨论群，群内有大神，可以免费提供问题解答。公众号回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。公众号回复“领取资源”，领取300G前端，Java，产品经理，微信小程序，Python等资源合集大放送，让我们一起学前端。

MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。

下面是一个简单的MVC的架子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="container">
</div>
    <script>
        var allen = {};
        allen.model = (function(){
            var M = {};
            M.data = {
                //数据
                "newstitle":["neirong1","neirong2"],
                "newscontent":["congng1","congng2"]
            };
            return {
                getData:function(m){
                    return M.data[m];
                }
            }
        })();
        
        allen.view = (function(){
            var M = iwen.model; //视图和数据的接口
            var V = {
                //视图
                addView:function(){
                    for(var i = 0;i< M.getData("newstitle").length;i++){
                        var p = document.createElement("p");
                        p.className = "ptext";
                        p.innerHTML = M.getData("newstitle")[i];
                        document.getElementById("container").appendChild(p);
                    }
                }
            };
            return{
                setView:function(){
                    return V.addView();
                }
            }
        })();

        allen.ctrl = (function(){
            var V = allen.view; //视图和控制器接口
            var C = {
                setStyle:function(className){
                    var ptext = document.getElementsByClassName(className);
                    for(var i = 0;i<ptext.length;i++){
                        ptext[i].style.backgroundColor = "red";
                    }
                },
                initView:V.setView()
            };
            C.initView;
            C.setStyle("ptext");
        })();
    </script>
</body>
</html>

csdn-Allen

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浅谈MVC模式

MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。下面是一个...
复制链接

扫一扫