webMVC思想分析

一、Web MVC背景：
随着web 前端的迅速发展，我们在浏览网页时，随处可见各种各样复杂的界面，如浏览器主界面，出现的很多的a、span、li标签等等，而且它们的内容是实时更改的，通过前端向服务器发送请求，后台将请求数据发回给前端，通过解析，处理，最终呈现给用户的；在界面运行状态，服务器也有可能向前端发送数据等等。其中的复杂过程可想而知，代码量也是很大，当这样庞大的代码量遇到优化，或者在更改需求的情况下，由于代码之间的耦合度很高，联系紧密，要修改的甚至是重新编代码代价实在是太大，所以MVC模块化的思想在前端发展中显得尤为重要；将数据、控制、视图分开，模块化进行编写，降低了代码之间的联系，使得代码在优化、修改中都是很容易进行的，为企业在前端开发时节省了大量的人力，财力，同时在编码效率上也得到了很大的提高。

二、Web MVC概念：

Model：就是处理与数据有关的内容，包括数据的存储、查询、更新等内容。
View:负责数据的展示，与用户进行交互，就是我们平时看到的界面，html片段、,css、js模板，不包含任何的逻辑处理。
Controller:处理与事件有关的逻辑；是view和model联系的桥梁，当前端界面发送数据请求时，controller委托给model处理，然后将请求数据交给view从而呈现给用户。
Web MVC致力于模块分离，各干各的事情，彼此之间不受影响，使得代码之间的耦合度降低，有助于代码的修改和优化。

                图2-1-1

在这里再提到一个概念：命名空间，就是给一个对象添加属性来管理一个空间，这个命名空间可以是一个对象也可以是一个函数；在函数下的命名空间我们很容易理解，如：函数中的局部变量在外部是不能调用的，但是给window增加的对象局部变量是可以访问的；在对象中添加对象，方法，通过对象名来调用，避免命名冲突和模型中的方法和回调函数混在一起，也是符合MVC思想的。

三、Web MVC实例:
这里我用一个视频系统管理中的课程管理的过程演示一下web MVC和命名空间在实践中的应用过程：

                    图3-1-1

图3-1-1的klass、year、month等用于存储从服务器发送过来的所有课程管理界面需要的所有数据。展示的是当前正在进行的课程、无效的课程和全部课程信息在前端的存储位置。
在图中我们可以看到：在window.valid、window.all、window.invalid中的内容基本是一样的，但是它们之间不会有任何的影响，这就是命名空间的优点。
这样做的优点在于：减少了访问服务器的次数，界面的加载和多次刷新速度都会很快，大大地提高了用户体验。

图3-1-2

图3-1-2是存储用户点击分页时，存储当前界面的课程信息；当用户再次点击该页面时便可直接在该对象中取出数据。

图3-1-3

图3-1-3起到一个调度员的作用，用于前端页面数据查询，在model中通过传递getKlass()这个回调函数作为参数，在view中便可实现前端界面的多次刷新。

                图3-1-4

图3-1-4是view中的界面楔入部分；通过一个util中实现各种工具，在通过将modal、navigation、tableSet、Carousel等模块化，通过一个专门用来写界面的model中的方法进行解析，再楔入数据，很快就实现一个界面，大大提高了界面编程。

                图3-1-5

图3-1-5就是我上述提到的写界面的model。对其中的数据进行解析，楔入内容就实现了moal,
Modal头部固定，可通过多次楔入modalContent，实现modal的多次复用，减少了代码量，提高了用户对页面请求时，页面的加载速度。

图3-1-6

图3-1-6是controller中的事件触发器的组成中的分页页面触发部分。