MVC的V and C-CSDN博客

MVC -----Model View Controller

今天要了解的是view 和 Controller

上代码：

html:
<div id="topNavBar"></div>

JS:

!function(){
    winodw.addEventListener('scroll',function(){
        if (window.scrollY > 0) {
            topNavBar.classList.add('sticky')
        } else {
            topNavBar.classList.remove('sticky')
        }
    })
}()
复制代码

现在我们要改造上面的代码，改造成mvc模式：

!function(){
    //这里操作的html就是topNavBar,那么他的view就是topNavBar
    所以，我们写一个view的变量
    var view = document.querySelector('topNavBar');
    然后后面我们要全部使用view了 而不是topNavBar,
    下面改造后面的就成了：
    winodw.addEventListener('scroll',function(){
        if (window.scrollY > 0) {
            view.classList.add('sticky')
        } else {
            view.classList.remove('sticky')
        }
    })
}()
复制代码

按照上面的思路，只要操作了页面的html的js，那么就会有上面的view

下面我们开始看C,C就是Controller

还是上面的代码继续写，接下来我们我们要创建一个变量controller

!function(){
    //这里操作的html就是topNavBar,那么他的view就是topNavBar,所以，我们写一个view的变量
    var view = document.querySelector('topNavBar');
    //然后后面我们要全部使用view了 而不是topNavBar,
    
    //接下来我们创建一个变量controller
    var controler = {
        view: null,
        init: function(view) {
           this.view = view;
           winodw.addEventListener('scroll',function(){
                if (window.scrollY > 0) {
                    view.classList.add('sticky')
                } else {
                    view.classList.remove('sticky')
                }
            })
        }//再创建一个初始化方法，这个方法就是要去操作自己的view
    }
    //接着我们要调用下controller的init方法,并传入view
    controller.init.call(undefined,view);
}()
复制代码

我们发现，很多模块的js代码，都可以改造成上面的这种有view和controller的形式。

以前的每一个模块都写一套代码，MVC就是一个模块都会有一个view,controller,因为你肯定有一个html，html就是view,然后会有一段js去操作view,这段js就是Controller

再继续改造：

!function(){
    //这里操作的html就是topNavBar,那么他的view就是topNavBar,所以，我们写一个view的变量
    var view = document.querySelector('topNavBar');
    //然后后面我们要全部使用view了 而不是topNavBar,
    
    //接下来我们创建一个变量controller
    var controler = {
        view: null,
        init: function(view) {
           this.view = view;//将传进来的view,存到自己的view上
           (
            这里的this是controller,因为是controller调用了init,写成call的形式就是：
            controller.init.call(controller,view)
           )
           this.bindEvent();//绑定监听事件
           （this.bindEvent.call(this),所以下面的bindEvent方法中的this也就是这里的this）
        },//再创建一个初始化方法，这个方法就是要去操作自己的view
        bindEvent:function(){
            var view = this.view
            winodw.addEventListener('scroll',() =>{
            -----------------------------------
            //这里我们改成了箭头函数，因为箭头函数里面的this就是外面的this,
              我们就不需要再考虑function(){}里面的this是什么了，这里的this就是this.view的this,
              如果这里我们不使用箭头函数的话就得用bind来改变this，
              因为这个时候的this其实是用户滚动触发的元素，
              我们就要写成
              window.addEventListener('scroll',function(){}).bind(this)
              来将this改变，bind的用法可以再复习一下
             ------------------------------------ 
              
              
                if (window.scrollY > 0) {
                   this.active();//这里我们可以直接使用this,因为箭头函数不会改变this
                } else {
                    this.deactive();
                }
            }
        },
        active:function(){
            this.view.classList.add('sticky')
        },
        deactive:function(){
            this.view.classList.remove('sticky')
        }
        
        
    }（controller也有他的结构，他需要一个view,一个初始化函数init,然后绑定一个事件）
    //接着我们要调用下controller的init方法,并传入view
    controller.init.call(undefined,view);
}()
复制代码

Model View Controller

model只负责跟数据相关的操作，请求数据，存取数据

View负责跟页面相关的东西，操作DOM等

Controller负责整合这之间的连接，不需要跟数据打交道，不需要跟处理页面

总结MVC：

MVC 就将代码分为三块
第一块 view 告诉程序你的代码是长什么样的，或者你的代码在页面的哪一块。
第二块 model 数据有哪些操:比如获取数据列表，新增数据，删除数据，
        这些都是要跟数据库打交道的
        
第三块controller 控制器用来负责其他所有事情，

MVC其实是一种代组织形式，不是一种框架，也不是什么技术，是一种组织代码的思想，
我们要做的事情就是把 v和M传给C 然后c 负责去初始化model 对view进行操作
复制代码

Model 和服务器交互，
Model 将得到的数据交给 Controller，Controller 把数据填入 View，
并监听 View
用户操作 View，
如点击按钮，Controller 就会接受到点击事件，
Controller 这时会去调用 Model，
Model 会与服务器交互，
得到数据后返回给 Controller，
Controller 得到数据就去更新 View
复制代码