资讯专栏INFORMATION COLUMN

MVC思想及其代码过程

luxixing / 644人阅读

摘要:详细代码过程中的重点如何把函数挂到和上三步注意搜索函数和函数如何添加小功能的视图到函数中搜索视图添加变量到注意是在什么情况下需要这样做搜索变量常见指向错误搜索错误是什么操作数据表示视图是控制器和服务器交互,将得到的数据交给,把数据填入,并监

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 = ""//②
        contentInput.value = ""//②
      })//②
      //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 ) //⑤
    })
  }
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/107019.html

相关文章

  • MVVM框架理解及其原理实现

    摘要:小白一枚,一直使用的是,想要多了解一些其它的框架,正好最近越来越火热,上的数已经超过了。框架理解说起这个模型,就不得不说框架。函数表示创建一个文本节点,函数表示创建一个数组。 小白一枚,一直使用的是React,想要多了解一些其它的框架,正好最近Vue越来越火热,Github上的Star数已经超过了React。而其背后蕴含的MVVM框架思想也一直跟React的组件化开发思想并驾齐驱,在这...

    DevWiki 评论0 收藏0
  • vue进阶面试题

    摘要:面试的时候,相关技术原理也一定是必考点。好了,进入正题,今天在这里给大家带来一点的进阶面试题。指令是直接销毁和重建达到让元素显示和隐藏的效果。 Vue 越来越受欢迎了。放眼国内外,不管是 BAT 等大厂,还是创业公司,Vue 都有广泛的应用。面试的时候,Vue 相关技术原理也一定是必考点。可以说,对于任何一个前端工程师来说,掌握 Vue 可能不是一个可选项,而更像一门必修课。 很多人做...

    Donald 评论0 收藏0
  • vue进阶面试题

    摘要:面试的时候,相关技术原理也一定是必考点。好了,进入正题,今天在这里给大家带来一点的进阶面试题。指令是直接销毁和重建达到让元素显示和隐藏的效果。 Vue 越来越受欢迎了。放眼国内外,不管是 BAT 等大厂,还是创业公司,Vue 都有广泛的应用。面试的时候,Vue 相关技术原理也一定是必考点。可以说,对于任何一个前端工程师来说,掌握 Vue 可能不是一个可选项,而更像一门必修课。 很多人做...

    Gilbertat 评论0 收藏0
  • 北上广深杭房价高压下,这也许是程序员扎根的唯一出路...

    摘要:在不考虑通胀和工资增长的情况下,除去吃喝需要攒年才能攒出一线城市房子的首付,以这样的收入水平,基本上没法扎根。 简单算一笔账,目前小公司Java后端工资一般是1万出头,年薪普遍在20万以下。在不考虑通胀和工资增长的情况下,除去吃喝需要攒30年才能攒出一线城市房子的首付,以这样的收入水平,基本...

    Pink 评论0 收藏0

发表评论

0条评论

luxixing

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<