摘要:详细代码过程中的重点如何把函数挂到和上三步注意搜索函数和函数如何添加小功能的视图到函数中搜索视图添加变量到注意是在什么情况下需要这样做搜索变量常见指向错误搜索错误是什么操作数据表示视图是控制器和服务器交互,将得到的数据交给,把数据填入,并监
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思想
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
摘要:小白一枚,一直使用的是,想要多了解一些其它的框架,正好最近越来越火热,上的数已经超过了。框架理解说起这个模型,就不得不说框架。函数表示创建一个文本节点,函数表示创建一个数组。 小白一枚,一直使用的是React,想要多了解一些其它的框架,正好最近Vue越来越火热,Github上的Star数已经超过了React。而其背后蕴含的MVVM框架思想也一直跟React的组件化开发思想并驾齐驱,在这...
摘要:在不考虑通胀和工资增长的情况下,除去吃喝需要攒年才能攒出一线城市房子的首付,以这样的收入水平,基本上没法扎根。 简单算一笔账,目前小公司Java后端工资一般是1万出头,年薪普遍在20万以下。在不考虑通胀和工资增长的情况下,除去吃喝需要攒30年才能攒出一线城市房子的首付,以这样的收入水平,基本...
阅读 2415·2021-10-08 10:17
阅读 1805·2021-09-06 15:02
阅读 2519·2019-08-29 17:30
阅读 2635·2019-08-29 13:24
阅读 1482·2019-08-29 11:12
阅读 3319·2019-08-28 17:52
阅读 645·2019-08-26 11:30
阅读 3560·2019-08-26 11:01