MVC思想及其代码过程

MVC详细代码过程中的重点

1. 如何把函数挂到C和M上(三步/注意return)搜索c函数和m函数
2. 如何添加小功能的视图到 init 函数中 搜索v视图
3. 添加变量到controller,注意是在什么情况下需要这样做 搜索c变量
4. 常见 this 指向错误 搜索this错误

MVC是什么?

Model 操作数据
View 表示视图
Controller 是控制器

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

MVC思想及其详细代码过程

1. 代码测试
2. MVC思想

   

   View: 代表的是用户能看见的功能模块是什么

   Model: 存放和 server 进行数据处理的功能, 并且 Model 每个功能返回出一个 promise 对象

   Controller: 管理功能模块的逻辑

3. 写 MVC 的要知道的事情:

   • 已经把一个功能模块(如 message 留言)单独放到一个 js 文件中, 并且我已经用注释把message 留言功能分成若干个中功能
   • 中功能 == bindEvents / 小功能 === showInformation
4. 写 MVC 的步骤
5. 以下我就用 message 的过程代码变成 MVC 的代码结构
6. 写好一个模板

var view = document.querySelector("div.message-section")

var controller = {
  view: null,
  model: null,
  init: function(view, model){
    this.view = view
    this.model = model
  }
}

var model = {

}
controller.init(view, model)

1. 根据过程代码, 想好中功能的名字, 按照以下步骤把中功能放入 controller 上
2. 把函数放入到 controller 的方法: ①定义函数名字, ②将过程函数放到定义函数上, ③使用定义函数

3. 添加中功能到 controller 对象的过程如下C函数

   let view = document.querySelector("div.message-section")
   
   let controller = {
     view: null,
     model: null,
     init: function(view, model){ 
       this.view = view
       this.model = model
       this.initAV()//③
       this.loadInformation()//③
       this.bindEvents()//③
     },
   
     initAV: function(){   //①
       let APP_ID = 'b4xlq4PrN138uAccOJx7L18f-gzGzoHsz';//②
       let APP_KEY = '6E49lAMIi8JNy5Y1G66GaB7n';//②
       AV.init({//②
         appId: APP_ID,//②
         appKey: APP_KEY//②
       });//②
     },
   
     loadInformation: function(){//① 
       //getInformationShowInformation
       let query = new AV.Query('messageOnLeanCloud');//②
       query.find().then(function ( messageFromLeanCloud) {//②
         for(var i = 0; i < messageFromLeanCloud.length;i++){//②
           var name = messageFromLeanCloud[i]["attributes"]["name"]//②
           var content = messageFromLeanCloud[i]["attributes"]["content"]//②
           //showInformation
           let liTag1 = document.createElement("li")//②
           liTag1.innerHTML = name + ":  " + content//②
           messageShowPosition.appendChild(liTag1)//②
         }
       });
     },
   
     bindEvents: function(){//① 
       let form = document.querySelector("#messageForm")//②
       form.addEventListener("submit", function(e){//②
         e.preventDefault()//②
         let nameInput = document.querySelector("#name")//②
         let messageNameContent = nameInput.value//②
         let contentInput = document.querySelector("#content")//②
         let messagContent = contentInput.value//②
         //saveInformation
         let Message = AV.Object.extend('messageOnLeanCloud');//②
         let message = new Message();//②
         message.save({//②
           name: messageNameContent,//②
           content: messagContent//②
         }).then(function(object) {//②
           alert('保存成功');//保存成功要做的事情//②
           nameInput.value = ""//②
           contentInput.value = ""//②
         })//②
         //showInformation
         let liTag1 = document.createElement("li")//②
         liTag1.innerHTML = messageNameContent + ":  " + messagContent//②
         messageShowPosition.appendChild(liTag1)//②
       })
     }
   }
   
   let model = {}
   
   controller.init(view, model)

4. 接下来看着initAV, loadInformation, bindEvents这三个函数, 看能不能把功能再次细分

5. 再看loadInformation函数的时候, 这段代码是在处理数据

   let query = new AV.Query('messageOnLeanCloud');
   query.find()

   所以把他放到model对象中

6. 添加功能到 Model 的方法: ①定义函数名字, ②将过程函数放到定义函数上, 注意看要不要返回promise对象③使用定义函数m函数

   let view = document.querySelector("div.message-section")
   
   let controller = {
     view: null,
     model: null,
     init: function(view, model){ 
       this.view = view
       this.model = model
       this.loadInformation()
     },
     loadInformation: function(){
       //getInformationShowInformation
       this.model.fetch()then(function ( messageFromLeanCloud) {  //③
         for(var i = 0; i < messageFromLeanCloud.length;i++){
           var name = messageFromLeanCloud[i]["attributes"]["name"]
           var content = messageFromLeanCloud[i]["attributes"]["content"]
           //showInformation
           let liTag1 = document.createElement("li")
           liTag1.innerHTML = name + ":  " + content
           messageShowPosition.appendChild(liTag1)
         }
       });
     },
   let model = {
     fetch: function(){//①
       let query = new AV.Query('messageOnLeanCloud');//②
          return query.find()//② 特别注意
     }//②
   }
   
   controller.init(view, model)

7. 再看bindEvents时, let form = document.querySelector("#messageForm")需要放到init函数进行初始化化

8. 添加 view 视图到 init 函数的方法如下: ①剪切let form = document.querySelector("#messageForm")②放到init上③把let换成this.把document换成view④在原函数使用form, 在原函数添加this. v视图

   let controller = {
     view: null,
     model: null,
     init: function(view, model){
       this.view = view
       this.model = model
       this.form = view.querySelector("#messageForm")//②③
       this.bindEvents()
     },
   
     bindEvents: function(){
       //本来有let form = document.querySelector("#messageForm") //①
       this.form.addEventListener("submit", function(e){ //④
       })
     }
   }

9. 再看bindEvents时, 以下代码是属于数据处理的,放到model上,命名为save

   let Message = AV.Object.extend('messageOnLeanCloud');//前面的是构造函数, 后面的是表的名字
   let message = new Message();//前面的是构造函数构造的对象, 对象有增删改查 API
   message.save({
     name: messageNameContent,//保存的内容
     content: messagContent
   })

10. 报错 this错误

    

    这是一个典型错误, 属于this的指向错误,用箭头函数代替原来的function(){}

11. bindEvents内的代码是展示功能,命名为showInformation

    let liTag1 = document.createElement("li")
    liTag1.innerHTML = messageNameContent + ":  " + messagContent
    messageShowPosition.appendChild(liTag1)

12. 按照上面的方法, 报错

    

    当小功能的函数内使用到中功能的变量, 我们要把某些变量(如错误中的messageNameContent)放到 controller 对象上

13. 把变量放到controller上的方法如下: ①在controller对象占位②把let换成this.③在bindEvents函数中使用这个变量的地方加个this.④在定义小功能的函数中传入参数⑤在使用小功能的函数传入参数 c变量

    
    let controller = {
      messageNameContent:null,  //①
      messagContent: null,  //①
      init: function(view, model){
        this.bindEvents()
      },
      //本来是
      //showInformation: function(){
      showInformation: function(messageNameContent,messagContent){    //④
        let liTag1 = document.createElement("li")
        liTag1.innerHTML = messageNameContent + ":  " + messagContent
        messageShowPosition.appendChild(liTag1)
      },
      bindEvents: function(){
        this.form.addEventListener("submit", (e)=>{
          e.preventDefault()
          let nameInput = document.querySelector("#name")
          //本来是
          //let messageNameContent = nameInput.value
          this.messageNameContent = nameInput.value    //②
    
          let contentInput = document.querySelector("#content")
          //本来是
          //let messagContent = contentInput.value
          this.messagContent = contentInput.value  //②
    
          //本来是
          //this.model.save(messageNameContent,messagContent).then(function(object) {  
          this.model.save(this.messageNameContent,this.messagContent).then(function(object) {  //③
            alert('保存成功');//保存成功要做的事情
            nameInput.value = ""
            contentInput.value = ""
          })
    
          //showInformation
          //本来是
          //this.showInformation()
          this.showInformation(this.messageNameContent, this.messagContent ) //⑤
        })
      }
    }