摘要：詳細代碼過程中的重點如何把函數(shù)掛到和上三步注意搜索函數(shù)和函數(shù)如何添加小功能的視圖到函數(shù)中搜索視圖添加變量到注意是在什么情況下需要這樣做搜索變量常見指向錯誤搜索錯誤是什么操作數(shù)據(jù)表示視圖是控制器和服務器交互，將得到的數(shù)據(jù)交給，把數(shù)據(jù)填入，并監(jiān)

如何把函數(shù)掛到C和M上(三步/注意return)搜索c函數(shù)和m函數(shù)

如何添加小功能的視圖到 init 函數(shù)中 搜索v視圖

添加變量到controller,注意是在什么情況下需要這樣做 搜索c變量

常見 this 指向錯誤 搜索this錯誤

Model 操作數(shù)據(jù)
View 表示視圖
Controller 是控制器

Model 和服務器交互，Model 將得到的數(shù)據(jù)交給 Controller，Controller 把數(shù)據(jù)填入 View，并監(jiān)聽 View
用戶操作 View，如點擊按鈕，Controller 就會接受到點擊事件，Controller 這時會去調用 Model，Model 會與服務器交互，得到數(shù)據(jù)后返回給 Controller，Controller 得到數(shù)據(jù)就去更新 View

代碼測試

MVC思想

View: 代表的是用戶能看見的功能模塊是什么

Model: 存放和 server 進行數(shù)據(jù)處理的功能, 并且 Model 每個功能返回出一個 promise 對象

Controller: 管理功能模塊的邏輯

寫 MVC 的要知道的事情:

已經(jīng)把一個功能模塊(如 message 留言)多帶帶放到一個 js 文件中, 并且我已經(jīng)用注釋把message 留言功能分成若干個中功能

中功能 == bindEvents / 小功能 === showInformation

寫 MVC 的步驟

以下我就用 message 的過程代碼變成 MVC 的代碼結構

寫好一個模板

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)

根據(jù)過程代碼, 想好中功能的名字, 按照以下步驟把中功能放入 controller 上

把函數(shù)放入到 controller 的方法: ①定義函數(shù)名字, ②將過程函數(shù)放到定義函數(shù)上, ③使用定義函數(shù)

添加中功能到 controller 對象的過程如下C函數(shù)

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 = ""http://②
        contentInput.value = ""http://②
      })//②
      //showInformation
      let liTag1 = document.createElement("li")//②
      liTag1.innerHTML = messageNameContent + ":  " + messagContent//②
      messageShowPosition.appendChild(liTag1)//②
    })
  }
}

let model = {}

controller.init(view, model)

接下來看著initAV, loadInformation, bindEvents這三個函數(shù), 看能不能把功能再次細分

再看loadInformation函數(shù)的時候, 這段代碼是在處理數(shù)據(jù)

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

所以把他放到model對象中

添加功能到 Model 的方法: ①定義函數(shù)名字, ②將過程函數(shù)放到定義函數(shù)上, 注意看要不要返回promise對象③使用定義函數(shù)m函數(shù)

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)

再看bindEvents時, let form = document.querySelector("#messageForm")需要放到init函數(shù)進行初始化化

添加 view 視圖到 init 函數(shù)的方法如下: ①剪切let form = document.querySelector("#messageForm")②放到init上③把let換成this.把document換成view④在原函數(shù)使用form, 在原函數(shù)添加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(){
    //本來有l(wèi)et form = document.querySelector("#messageForm") //①
    this.form.addEventListener("submit", function(e){ //④
    })
  }
}

再看bindEvents時, 以下代碼是屬于數(shù)據(jù)處理的,放到model上,命名為save

let Message = AV.Object.extend("messageOnLeanCloud");//前面的是構造函數(shù), 后面的是表的名字
let message = new Message();//前面的是構造函數(shù)構造的對象, 對象有增刪改查 API
message.save({
  name: messageNameContent,//保存的內容
  content: messagContent
})

報錯 this錯誤

這是一個典型錯誤, 屬于this的指向錯誤,用箭頭函數(shù)代替原來的function(){}

bindEvents內的代碼是展示功能,命名為showInformation

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

按照上面的方法, 報錯

當小功能的函數(shù)內使用到中功能的變量, 我們要把某些變量(如錯誤中的messageNameContent)放到 controller 對象上

把變量放到controller上的方法如下: ①在controller對象占位②把let換成this.③在bindEvents函數(shù)中使用這個變量的地方加個this.④在定義小功能的函數(shù)中傳入?yún)?shù)⑤在使用小功能的函數(shù)傳入?yún)?shù) 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 ) //⑤
    })
  }
}