MVC 学习使用及总结

模块化

什么是模块化？就是把一个东西分成几个块（模块），块与块之间互相独立。

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

模块化主要解决合作问题

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

MVC

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

MVC具体是什么呢？阮一峰老师给了我们很好的解答：

1）最上面的一层，是直接面向最终用户的"视图层"（View）。它是提供给用户的操作界面，是程序的外壳。

2）最底下的一层，是核心的"数据层"（Model），也就是程序需要操作的数据或信息。

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

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

用 MVC 做简历

学习了 MVC 思想后，用 MVC 思想做了简历的留言板。

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

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

我做这个大概要实现的功能是：

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

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

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

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

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

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

框架

MVC 的 V，页面可视区域document.querySelector('.messages')，所有操作都是在它内部。

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

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

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

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

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

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

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

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

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

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