MVC思想及其代碼過程

luxixing 發布于2019-08-26 11:30 / 671人閱讀

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

MVC詳細代碼過程中的重點

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

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

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

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

MVC是什么?

Model 操作數據
View 表示視圖
Controller 是控制器

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

MVC思想及其詳細代碼過程

代碼測試

MVC思想

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

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

Controller: 管理功能模塊的邏輯

寫 MVC 的要知道的事情:

已經把一個功能模塊(如 message 留言)多帶帶放到一個 js 文件中, 并且我已經用注釋把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)

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

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

添加中功能到 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 = ""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這三個函數, 看能不能把功能再次細分

再看loadInformation函數的時候, 這段代碼是在處理數據

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

所以把他放到model對象中

添加功能到 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)

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

添加 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){ //④
    })
  }
}

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

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

報錯 this錯誤

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

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

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

按照上面的方法, 報錯

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

把變量放到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 ) //⑤
    })
  }
}

GPU云服務器云服務器 asp mvc源代碼 linux 面向過程代碼安全編程思想 python思想

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107019.html

MVVM框架理解及其原理實現

摘要：小白一枚，一直使用的是，想要多了解一些其它的框架，正好最近越來越火熱，上的數已經超過了。框架理解說起這個模型，就不得不說框架。函數表示創建一個文本節點，函數表示創建一個數組。小白一枚，一直使用的是React，想要多了解一些其它的框架，正好最近Vue越來越火熱，Github上的Star數已經超過了React。而其背后蘊含的MVVM框架思想也一直跟React的組件化開發思想并駕齊驅，在這...

DevWiki 2019-08-23 10:43 評論0 收藏0
vue進階面試題

摘要：面試的時候，相關技術原理也一定是必考點。好了，進入正題，今天在這里給大家帶來一點的進階面試題。指令是直接銷毀和重建達到讓元素顯示和隱藏的效果。 Vue 越來越受歡迎了。放眼國內外，不管是 BAT 等大廠，還是創業公司，Vue 都有廣泛的應用。面試的時候，Vue 相關技術原理也一定是必考點。可以說，對于任何一個前端工程師來說，掌握 Vue 可能不是一個可選項，而更像一門必修課。很多人做...

Donald 2019-08-23 16:10 評論0 收藏0
vue進階面試題

摘要：面試的時候，相關技術原理也一定是必考點。好了，進入正題，今天在這里給大家帶來一點的進階面試題。指令是直接銷毀和重建達到讓元素顯示和隱藏的效果。 Vue 越來越受歡迎了。放眼國內外，不管是 BAT 等大廠，還是創業公司，Vue 都有廣泛的應用。面試的時候，Vue 相關技術原理也一定是必考點。可以說，對于任何一個前端工程師來說，掌握 Vue 可能不是一個可選項，而更像一門必修課。很多人做...

Gilbertat 2019-08-02 16:08 評論0 收藏0
北上廣深杭房價高壓下，這也許是程序員扎根的唯一出路...

摘要：在不考慮通脹和工資增長的情況下，除去吃喝需要攢年才能攢出一線城市房子的首付，以這樣的收入水平，基本上沒法扎根。簡單算一筆賬，目前小公司Java后端工資一般是1萬出頭，年薪普遍在20萬以下。在不考慮通脹和工資增長的情況下，除去吃喝需要攢30年才能攢出一線城市房子的首付，以這樣的收入水平，基本...

Pink 2021-11-18 10:02 評論0 收藏0