什么是MVC

MVC全名是Model View Controller,是一种软件设计模式

其中可分为模型(model)-视图(view)-控制器(controller)三要素,

  1. 模型(model),模型的主要作用为数据的接受和发送设定规则。
  2. 视图(view),即用户接触的部分,用户看到并与之交互。
  3. 控制器(controller),控制器接受用户的输入并调用模型和视图去完成用户的需求,所以当单击Web页面中的超链接和发送HTML表单时,控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求,然后再确定用哪个视图来显示返回的数据。
    当用户与试图发生交互时,实际发生了下列过程


即:

  1. 控制器(controller)监听视图(view).
  2. 用户与视图(view)交互,通知控制器(controller)调用模型(model)再请求服务器(server).
  3. 从而服务器(server)响应给模型(model),再返回数据给控制器(controller)再更新视图(view).
  4. 控制器(controller)回到监听状态.



它的大致结构为:

  • 把main.js之类的js文件根据功能划分成若干模块,
  • 对于每个模块,都用mvc模式,后面可用面向对象完善
  • 先用立即执行函数!function(){内容}.call(),将内容包裹起来,减少空间使用,若需要js之间的互相调用
    可用window.xxx来命名内部变量即可。
  • 举个例子:
!function(){
var view=document.querySelector('.leaveMessage')
    var model={
        init:function(){
            ...
            });
        },
        get:function(){
            ...
        },
        set:function(){
            ...
              })   
        }
    }
    var controller={
        view:null,
        model:null,
        myForm:null,
        init:function(view,model){
            this.view=view
            this.model=model
            this.myForm =view.querySelector('#xxxxxx')
            this.model.init()
            this.loadMessage()
            this.bindEvents() 
        },
        bindEvents:function(){
        ...
        },
        loadMessage:function(){
        ...         
        },
        saveMessage:function(){
        ...       
        }
    }
    controller.init(view, model) 
    
}.call()
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Web MVC Spring Web MVC 是包含在 Spring 框架中的 Web 框架,建立于...
    Hsinwong阅读 23,022评论 1 92
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,286评论 3 119
  • 编辑麟之角豆沙 2016-11-23 16:57:41 我们已经是好友啦,一起来聊天吧! 光明顶-邝鉴萍 2016...
    邝鉴萍阅读 322评论 0 4
  • 水泉印阅读 243评论 0 1
  • 许久没有这样的感觉,今年的我大二。本来有一个很好的男朋友,我们是异地恋,开始连闺蜜都说我们很配,甚至走路的姿势。在...
    Mr姑娘阅读 485评论 0 3

友情链接更多精彩内容