模块化
什么是模块化?就是把一个东西分成几个块(模块),块与块之间互相独立。
在台式机时代,很多人都自己主装过电脑,选购自己喜欢的显示器,鼠标,键盘,主机,配备性能强劲的cpu、显卡、内存等主成最强配置,这些单个物体都是模块,互相独立,可以根据自己的爱好选择。
模块化主要解决合作问题
- 自己与自己合作
- 自己与以前的自己合作
- 自己与别人合作
MVC
MVC 是一种代码组织形式,他不是任何一种框架,也不是任何一种技术,它就是一种组织代码的思想,我们要做到事情就是把 M 和 V 传给 C,C 负责初始化 M,然后对 V 进行操作。
画成图就是这样:
mvc图片
MVC具体是什么呢?阮一峰老师给了我们很好的解答:
1)最上面的一层,是直接面向最终用户的"视图层"(View)。它是提供给用户的操作界面,是程序的外壳。
2)最底下的一层,是核心的"数据层"(Model),也就是程序需要操作的数据或信息。
3)中间的一层,就是"控制层"(Controller),它负责根据用户从"视图层"输入的指令,选取"数据层"中的数据,然后对其进行相应的操作,产生最终结果。
这三层之间紧密联系,又互相独立,每层内部的变化不影响其他层。
用 MVC 做简历
学习了 MVC 思想后,用 MVC 思想做了简历的留言板。
我没有自己买服务器,用了线上免费的服务器——leancloud,具体的使用方法可以看它的使用文档,这里就不在赘述了。
先上图,静态页面是仿造网易云音乐做的,做完下来发现有点丑。
image
我做这个大概要实现的功能是:
- 用户可以留言,必须要输入用户名和留言内容(留言区左边方框本来是头像,我把它做成输用户名的地方)
- 点击发表后,留言会立马出现在留言墙上
- 评论条数实时更新
- 显示日期
- 点赞功能
- 回复功能
本想全部用原生 JS 做的,无奈自己水平太次,有些地方使用的 jQuery。
目前做好的功能是1、2、3,剩余三个做了一部分,其中点赞功能在我实践下来,貌似实现不了,数据传送到后台,不能累计,所以只做了静态的更新,一刷新就没了。
显示日期功能,自己对原生 JS 掌握的不好,没有做成我们常用的日期格式。
回复功能,今天来不及做了,因为还需要做两套样式,一套是回复时的输入框,以及上墙后的样式(这点最后再来做吧)。
今天花时间比较多的地方是动态创建 DOM 元素,还没有效果,用原生 JS 真的好难实现,我刚开始全部用createElement
创建标签,然后在一个个appendChild
到页面中,长长的写了一坨,还不能复用,突然就想到自己能不能实现jQuery
的html
方法,果然很傻很天真,jQuery
源代码看了半天没看懂。算了,果断放弃,还是老老实实使用它吧。
框架
MVC 的 V,页面可视区域document.querySelector('.messages')
,所有操作都是在它内部。
MVD 的 M,操作服务器,获取和保存数据,只负责操作服务器,至于返回数据的操作统一由 C 完成
- 初始化 AV 对象 initAV
- 请求数据 fetch
- 保存数据 save
2 和 3 都是返回 Promise 对象,可以直接在后面进行then
操作。
MVC 的 C,负责监听 V、调用 M;M 和 V 都在初始化的时候传递给 C,C 内部不直接操作 M 和 V。
- 常用的变量
- init:初始化变量和各操作
- 绑定事件:目前只做了留言功能
- 进入页面后,加载留言
- 留言后发送服务器,并上墙
用 MVC 思想的,每个模块里面也都是各个独立的,每个方法只做该部分该做的事情,这次我做的不是很好,还是有很多混在了一起。
C 部分除了上面讲的的 DOM 操作外,还有两个比较费时的地方。
第一个是,我需要的数据是用户名,留言内容和时间,这三个数据放在了两个属性里面,如果我要自己实现动态创建 DOM 的话,这数据很难拿到,需要反复的遍历后台返回的对象,这就会造成新能很差。后来想到了一种方法——把他们以对象的形式分别push
到数组,出现了一个问题,数组的下标全是偶数,并不是0,1,2,3,4 这样排列的,这两个卡在了一起,后来用了 jQuery 之后配合 ES6 语法,很轻松就搞定了(偷懒了)。
第二个是留言上墙时,留言总数实时更新,数据拿到之后,怎么弄都不能加1,老当成字符串解析,但用 typeof 检测返回的又是 number ,搞的头都晕,试到最后才想起parseInt
,我艹,好了,我的天。typeof 果然是个大坑。
总之今天收货挺大的,发现自己有好多问题,主要两点:代码思路不清晰,出错了会卡很久;做之前没考虑全,做到最后才发现最关键的数据拿不到,白白浪费时间。
网友评论