脚本宝典收集整理的这篇文章主要介绍了

MVC 学习使用及总结

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

模块化

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

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

模块化主要解决合作问题

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

MVC

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

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到页面中,长长的写了一坨,还不能复用,突然就想到自己能不能实现jQueryhtml方法,果然很傻很天真,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 果然是个大坑。

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

总结

以上是脚本宝典为你收集整理的

MVC 学习使用及总结

全部内容,希望文章能够帮你解决

MVC 学习使用及总结

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过