美文网首页
MVC 学习使用及总结

MVC 学习使用及总结

作者: astak3 | 来源:发表于2019-02-15 21:14 被阅读0次

    模块化

    什么是模块化?就是把一个东西分成几个块(模块),块与块之间互相独立。

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

    模块化主要解决合作问题

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

    MVC

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


    mvc图片

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

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

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

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

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

    用 MVC 做简历

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

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

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


    image

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

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

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

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

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

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

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

    image

    框架

    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 果然是个大坑。

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

    相关文章

      网友评论

          本文标题:MVC 学习使用及总结

          本文链接:https://www.haomeiwen.com/subject/ypfveqtx.html