MVC学习使用及总结

模块化

什么是模块化&＃xff1f;就是把一个东西分成几个块&＃xff08;模块&＃xff09;&＃xff0c;块与块之间互相独立。

在台式机时代&＃xff0c;很多人都自己主装过电脑&＃xff0c;选购自己喜欢的显示器&＃xff0c;鼠标&＃xff0c;键盘&＃xff0c;主机&＃xff0c;配备性能强劲的cpu、显卡、内存等主成最强配置&＃xff0c;这些单个物体都是模块&＃xff0c;互相独立&＃xff0c;可以根据自己的爱好选择。

模块化主要解决合作问题

1. 自己与自己合作
2. 自己与以前的自己合作
3. 自己与别人合作

MVC

MVC 是一种代码组织形式&＃xff0c;他不是任何一种框架&＃xff0c;也不是任何一种技术&＃xff0c;它就是一种组织代码的思想&＃xff0c;我们要做到事情就是把 M 和 V 传给 C&＃xff0c;C 负责初始化 M&＃xff0c;然后对 V 进行操作。
画成图就是这样&＃xff1a;

MVC具体是什么呢&＃xff1f;阮一峰老师给了我们很好的解答&＃xff1a;

1&＃xff09;最上面的一层&＃xff0c;是直接面向最终用户的"视图层"&＃xff08;View&＃xff09;。它是提供给用户的操作界面&＃xff0c;是程序的外壳。

2&＃xff09;最底下的一层&＃xff0c;是核心的"数据层"&＃xff08;Model&＃xff09;&＃xff0c;也就是程序需要操作的数据或信息。

3&＃xff09;中间的一层&＃xff0c;就是"控制层"&＃xff08;Controller&＃xff09;&＃xff0c;它负责根据用户从"视图层"输入的指令&＃xff0c;选取"数据层"中的数据&＃xff0c;然后对其进行相应的操作&＃xff0c;产生最终结果。

这三层之间紧密联系&＃xff0c;又互相独立&＃xff0c;每层内部的变化不影响其他层。

用 MVC 做简历

学习了 MVC 思想后&＃xff0c;用 MVC 思想做了简历的留言板。

我没有自己买服务器&＃xff0c;用了线上免费的服务器——leancloud&＃xff0c;具体的使用方法可以看它的使用文档&＃xff0c;这里就不在赘述了。

先上图&＃xff0c;静态页面是仿造网易云音乐做的&＃xff0c;做完下来发现有点丑。

我做这个大概要实现的功能是&＃xff1a;

1. 用户可以留言&＃xff0c;必须要输入用户名和留言内容&＃xff08;留言区左边方框本来是头像&＃xff0c;我把它做成输用户名的地方&＃xff09;
2. 点击发表后&＃xff0c;留言会立马出现在留言墙上
3. 评论条数实时更新
4. 显示日期
5. 点赞功能
6. 回复功能

本想全部用原生 JS 做的&＃xff0c;无奈自己水平太次&＃xff0c;有些地方使用的 jQuery。

目前做好的功能是1、2、3&＃xff0c;剩余三个做了一部分&＃xff0c;其中点赞功能在我实践下来&＃xff0c;貌似实现不了&＃xff0c;数据传送到后台&＃xff0c;不能累计&＃xff0c;所以只做了静态的更新&＃xff0c;一刷新就没了。

显示日期功能&＃xff0c;自己对原生 JS 掌握的不好&＃xff0c;没有做成我们常用的日期格式。

回复功能&＃xff0c;今天来不及做了&＃xff0c;因为还需要做两套样式&＃xff0c;一套是回复时的输入框&＃xff0c;以及上墙后的样式&＃xff08;这点最后再来做吧&＃xff09;。

今天花时间比较多的地方是动态创建 DOM 元素&＃xff0c;还没有效果&＃xff0c;用原生 JS 真的好难实现&＃xff0c;我刚开始全部用createElement创建标签&＃xff0c;然后在一个个appendChild到页面中&＃xff0c;长长的写了一坨&＃xff0c;还不能复用&＃xff0c;突然就想到自己能不能实现jQuery的html方法&＃xff0c;果然很傻很天真&＃xff0c;jQuery源代码看了半天没看懂。算了&＃xff0c;果断放弃&＃xff0c;还是老老实实使用它吧。

框架

MVC 的 V&＃xff0c;页面可视区域document.querySelector(&＃39;.messages&＃39;)&＃xff0c;所有操作都是在它内部。

MVD 的 M&＃xff0c;操作服务器&＃xff0c;获取和保存数据&＃xff0c;只负责操作服务器&＃xff0c;至于返回数据的操作统一由 C 完成

1. 初始化 AV 对象 initAV
2. 请求数据 fetch
3. 保存数据 save

2 和 3 都是返回 Promise 对象&＃xff0c;可以直接在后面进行then操作。

MVC 的 C&＃xff0c;负责监听 V、调用 M&＃xff1b;M 和 V 都在初始化的时候传递给 C&＃xff0c;C 内部不直接操作 M 和 V。

1. 常用的变量
2. init&＃xff1a;初始化变量和各操作
3. 绑定事件&＃xff1a;目前只做了留言功能
4. 进入页面后&＃xff0c;加载留言
5. 留言后发送服务器&＃xff0c;并上墙

用 MVC 思想的&＃xff0c;每个模块里面也都是各个独立的&＃xff0c;每个方法只做该部分该做的事情&＃xff0c;这次我做的不是很好&＃xff0c;还是有很多混在了一起。

C 部分除了上面讲的的 DOM 操作外&＃xff0c;还有两个比较费时的地方。

第一个是&＃xff0c;我需要的数据是用户名&＃xff0c;留言内容和时间&＃xff0c;这三个数据放在了两个属性里面&＃xff0c;如果我要自己实现动态创建 DOM 的话&＃xff0c;这数据很难拿到&＃xff0c;需要反复的遍历后台返回的对象&＃xff0c;这就会造成新能很差。后来想到了一种方法——把他们以对象的形式分别push到数组&＃xff0c;出现了一个问题&＃xff0c;数组的下标全是偶数&＃xff0c;并不是0,1,2,3,4 这样排列的&＃xff0c;这两个卡在了一起&＃xff0c;后来用了 jQuery 之后配合 ES6 语法&＃xff0c;很轻松就搞定了&＃xff08;偷懒了&＃xff09;。

第二个是留言上墙时&＃xff0c;留言总数实时更新&＃xff0c;数据拿到之后&＃xff0c;怎么弄都不能加1&＃xff0c;老当成字符串解析&＃xff0c;但用 typeof 检测返回的又是 number &＃xff0c;搞的头都晕&＃xff0c;试到最后才想起parseInt&＃xff0c;我艹&＃xff0c;好了&＃xff0c;我的天。typeof 果然是个大坑。

总之今天收货挺大的&＃xff0c;发现自己有好多问题&＃xff0c;主要两点&＃xff1a;代码思路不清晰&＃xff0c;出错了会卡很久&＃xff1b;做之前没考虑全&＃xff0c;做到最后才发现最关键的数据拿不到&＃xff0c;白白浪费时间。