理解javascript中的MVC模式

MVC模式是软件工程中的一种软件架构模式，一般分为三个部分：模型视图控制器；

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

视图：视图层的主要目的是监控模型层上的数据变化，并实时更新html页面。当然，它还包括一些事件或ajax请求操作(发布事件)的注册，所有这些都是在视图层完成的。

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

让我们实现一个简单的下拉框控件，我们可以添加或删除它。如下图所示：

代码如下：

/* 模型用于封装与应用程序的业务逻辑相关的数据以及对数据处理的方法。模型有对数据直接访问的权利。模型不依赖'视图' 和'控制器，也就是说模型它不关心页面如何显示及如何被操作。*/功能模式(elems) { //所有元素这个_ elems=elems//被选中元素的索引这个_ selectedIndex=-1；//增加一项this.itemAdd=新事件(这个)；//删除一项this.itemRemoved=新事件(这个)；this.selectedIndexChanged=新事件(这个)；}模式。原型={构造函数： '模式'，//获取所有的项getItems:函数(){ return [].concat(这个_ elems)；}, //增加一项addItem:函数{这个._ elems。push(elem)；这个。项目添加。notify({ elem : elem })；}, //删除一项removeItem:函数（索引){ var item=this ._ elems[index]；这个. elems.splice(索引，1);这个。项目已移除。通知({ elem 3360 item })；if(index===this ._ selectedIndex){ this。setselectedindex(-1)；} }，getSelectedIndex:函数(){返回此_ selectedIndex}，setSelectedIndex:函数(索引){ var previousIndex=this ._选择索引这个_selectedIndex=索引；这个。selectedindexchanged。notify({ previous : previous index })；}};/* 下面是观察者模式类，它又叫发布-订阅模式；它定义了对象间的一种一对多的关系，让多个观察者对象同时监听某一个主题对象，当一个对象发生改变时，所有依赖于它的对象都将得到通知*/函数事件(观察者){这个._观察者=观察者这个_ listeners=[]；}事件。原型={ constarutor : ' Event '，附加：函数（侦听器){这个._listeners.push(侦听器);}，notify:函数(objs){ for(var i=0，ilen=this )._ listeners.length我){这个_listeners[i](这_observer，objs)；} }};/* * 视图显示模型数据，并触发用户界面事件*/函数视图（模型，元素){这个模型=模型这个_元素=元素；this.listModified=新事件(这个)；这个。add buttonclicked=new Event(this)；这个。delbuttonclicked=new Event(this)；变量=这个；//绑定模型监听器这个模型。项目添加。attach()函数(){即。rebuild list()；});这个模型。项目已移除。attach()函数(){即。rebuild list()；});//将监听器绑定到超文本标记语言控件上这个. elements.list.change(函数{那个。列表已修改。通知({ index : e . target。selectedindex })；});//添加按钮绑定事件这个_elements.addButton.click(函数{那个。addbuttonclicked。notify()；});//删除按钮绑定事件这个. elements.delButton.click(函数{那个。点击Delbutton。notify()；});}视图。prototype={构造函数： ' View '，show : function(){ this。rebuild list()；}，重建列表：函数(){ var list=this ._elements.list，items，keylist。html(" ")；项目=这个模型。getitems()；用于(键入项){ if(items.hasOwnProperty(键)){ list。追加(' items[key]' ')；} }这个模型。setselectedindex(-1)；}};/* 控制器响应用户操作，调用模型上的变化函数负责转发请求，对请求进行处理*/函数控制器（模型，视图){这个模型=模型这个_ view=view变量=这个；这个. view.listModified.attach(函数(发送者，参数){那个。updateselected(args。索引)；});这个视图。addbuttonclicked。attach()函数(){即。additem()；});这个视图。点击delbuttonclicked。attach()函数(){即。delitem()；});}控制器。prototype={构造函数： ' Controller '，additem : function(){ var item=window。提示('添加项目： '，' ')；如果（项目){这个. model.addItem(项目);} }，delItem:函数(){ var index=this ._模型。getselectedindex()；if(index！==-1) {这个_model.removeItem(索引);} }，updateSelected:函数（索引){这个._model.setSelectedIndex(索引);}};超文本标记语言代码如下：

select id=' list ' size=' 10 ' style=' width : 10 rem ' selectbr/button id=' plus BTN ' button id=' mins BTN '-button页面初始化代码如下：

$(function(){ var Mode=new Mode([' PHP '，' JavaScript'])，view=new View(model，{ 'list' : $('#list ')，' addButton' : $('#plusBtn ')，' delButton ' : $(' # minusBtn '))})，controller=new Controller(model，View)；view . show()；});代码分析如下：

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

下拉框，实现用户添加一项，用户选择一项后删除一项的功能；当然，还会添加用户切换到该项目的事件；

例如，当我们现在添加一条数据时，我们在视图层上添加监控事件，如下所示：

//添加按钮绑定此事件。_ elements . addbutton . click(function(e){ that . addbuttonclicked . notify()；});然后在观察者类事件中调用notify(发布事件)方法，即. addbuttonclicked . notify()；众所周知，观察者模式也称为发布-订阅模式，它允许多个观察者对象同时监视一个主题对象。当主题对象发生变化时，所有依赖于它的对象都会得到通知。因此，在控制器级别，我们可以使用以下代码来监控发布者：

这个。_ view . addbuttonclicked . attach(function(){ that . additem()；});然后调用自己的方法addItem()；代码如下：

addItem:函数(){ var item=window . prompt(' Add item : '，' ')；如果(项目){这个。_model.addItem(项目)；}}调用模型层的方法addItem()；将一条数据插入选择框；模型层的addItem()方法代码如下：

//添加additem:函数(elem) {this。_ elems . push(elem)；this . item add . notify({ elem : elem })；}，在上面的代码中添加一项后，通过this.itemAdd发布消息，然后通过下面的代码在View层监控消息；代码如下：

//将模型侦听器绑定到此。_ model . item add . attach(function(){ that . rebuildlist()；});最后，在监测到Model上的数据发生了变化后，及时调用自己的方法rebuildList()，更新页面上的数据；

模型层主要用于封装业务数据。视图层主要发布事件操作并监控模型层上的数据。如果模型图层上有任何数据更改，页面操作会及时更新，并最终显示在页面上。控制器主要监控视图层的事件，调用模型层的方法更新模型上的数据。模型层上的数据更新后，将会发布一条消息，最终视图层将会进行监控。就是MVC的基本流程如上。MVC的优势：1。低耦合：视图层与业务层分离。如果页面上的显示发生变化，可以直接在视图层中进行更改，而无需移动模型层和控制层上的代码；也就是说，视图层已经与模型层和控制层分离。很容易改变应用层的数据层和业务规则。2.可维护性：将视图层与业务逻辑层分离也使得WEB应用程序更容易维护和修改。MVC的缺点：个人认为适合大型项目，但不适合中小型项目，因为只需要一点点JS代码就可以实现简单的增删改操作，但是MVC模式的代码量明显增加了。学习的成本也增加了，当然，使用一些封装的MVC库或框架就好了。

以上是对javascript中MVC模式的实现方法、优缺点的详细分析，希望对大家的学习有所帮助。