本次作为留言板第三次更新,主要是优化代码,增强代码的可读性,可维护性。
使用了MVC的代码组织形式,清晰代码结构。
1.js代码
1.1 View部分,
View(视图),看得见的东西。
告诉程序,我的代码是什么样子,在页面的哪一块。
![](https://img.haomeiwen.com/i13648554/910ec4a4f5d4b2d7.png)
1. Model部分
Model(数据)数据,所有与数据相关的操作,都放在里面。
告诉程序,我的数据有哪些操作?如初始化(init),获取数据(fetch),保存数据(save)
![](https://img.haomeiwen.com/i13648554/c3c2852a5f5338c4.png)
1.3 Controller部分
Controller(控制器),控制其他的所有的代码。
负责其他的所有事情,稍微复杂一点。
![](https://img.haomeiwen.com/i13648554/992c7307fcc801b9.png)
![](https://img.haomeiwen.com/i13648554/61434f452491bc7b.png)
![](https://img.haomeiwen.com/i13648554/a46f183be07f8481.png)
![](https://img.haomeiwen.com/i13648554/a9899e03eea9a162.png)
1.4 这里是代码调用
![](https://img.haomeiwen.com/i13648554/70e7ae2e252976a1.png)
1.5 js代码整体写在message.js文件中,并且用到自执行的匿名函数,封装代码,减少全局变量,增加代码的可维护性。
2.页面效果
![](https://img.haomeiwen.com/i13648554/0d40a0bb8e41383e.png)
![](https://img.haomeiwen.com/i13648554/67a7c0a430cad524.png)
![](https://img.haomeiwen.com/i13648554/3e5d4d714112c165.png)
网友评论