理解javascript中的MVC模式(简述javascript)

编辑：rootadmin

推荐整理分享理解javascript中的MVC模式(简述javascript)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:javascript的理解,javascript的理解,js怎么理解,javascript的理解,javascript深入理解,javascript的理解,javascript中的函数如何理解,javascript中的函数如何理解,内容如对您有帮助，希望把文章链接给更多的朋友！

MVC模式是软件工程中一种软件架构模式，一般把软件模式分为三部分，模型(Model)+视图(View)+控制器(Controller);

模型：模型用于封装与应用程序的业务逻辑相关的数据以及对数据处理的方法。模型有对数据直接访问的权利。模型不依赖 “视图” 和 “控制器”, 也就是说模型它不关心页面如何显示及如何被操作.

视图：视图层最主要的是监听模型层上的数据改变，并且实时的更新html页面。当然也包括一些事件的注册或者ajax请求操作(发布事件),都是放在视图层来完成。

控制器：控制器接收用户的操作，最主要是订阅视图层的事件，然后调用模型或视图去完成用户的操作;比如：当页面上触发一个事件，控制器不输出任何东西及对页面做任何处理; 它只是接收请求并决定调用模型中的那个方法去处理请求, 然后再确定调用那个视图中的方法来显示返回的数据。

下面我们来实现一个简单的下拉框控件，我们可以对它进行增删操作；如下图所示：

代码如下：

HTML代码如下：

页面初始化代码如下：

代码分析如下：

先分析下我们是要实现什么样的功能，基本功能有：

一个下拉框，通过用户输入的操作来实现用户增加一项及用户选中一项后删除一项的功能;当然也添加了用户切换到那一项的事件;

比如我们现在来增加一条数据的时候，在视图层上添加监听事件，如下代码：

然后调用观察者类Event中的方法notify(发布一个事件) that.addButtonClicked.notify();大家都知道，观察者模式又叫发布-订阅模式，让多个观察者对象同时监听某一个主题对象，当某一个主题对象发生改变的时候，所有依赖它的对象都会得到通知;因此在控制层(Controller)我们可以使用如下代码对发布者进行监听操作：

之后调用自身的方法addItem();代码如下：

调用模型层(model)的方法addItem();把一条数据插入到select框里面去;model(模型层)的addItem()方法代码如下：

如上代码增加一项后，通过 this.itemAdd 发布一个消息，然后在视图层(View)上通过如下代码来监听这个消息;代码如下：

最后监听到模型上(Model)的数据发生改变后，及时调用自身的方法rebuildList()去更新页面上的数据;

模型层(Model)最主要做业务数据封装操作。视图层(View)主要发布事件操作及监听模型层上的数据，如果模型层上有数据改变的时候，及时更新页面操作，最后显示给页面上来，控制层(Controller)主要监听视图层(View)的事件，调用模型层(Model)的方法来更新模型上的数据，模型层数据更新后，会发布一条消息出去，最后视图层(View)通过监听模型层(Model)的数据变化，来更新页面的显示; 如上是MVC的基本流程。MVC的优点： 1. 耦合性低：视图层和业务层分离了，如果页面上显示改变的话，直接在视图层更改即可，不用动模型层和控制层上的代码;也就是视图层与模型层和控制层已经分离了;所以很容易改变应用层的数据层和业务规则。 2. 可维护性：分离视图层和业务逻辑层也使得WEB应用更易于维护和修改。MVC的缺点：个人觉得适合于大型项目，对于中小型项目并不适合，因为要实现一个简单的增删改操作，只需要一点点JS代码，但是MVC模式代码量明显增加了。对于学习成本也就提高了，当然如果使用一些封装好的MVC库或者框架就好了。

标签: 简述javascript

本文链接地址:https://www.jiuchutong.com/biancheng/382745.html 转载请保留说明！

上一篇：探讨JavaScript语句的执行过程(javascript语言入门教程)

下一篇：很不错的两款Bootstrap Icon图标选择组件