JavaScript的MVC模式

开发 前端
我的目标是编写一个简单的 JavaScript 组件,来向大家展示一下 JavaScript 的强大。该组件是一个可编辑的项目列表(HTML中的 select 标签):用户可以选择某一项并删除它,或者添加新的项目到列表中。

本文介绍了模型-视图-控制器模式在 JavaScript 中的实现。

我喜欢 JavaScript,因为它是在世界上最灵活的语言之一。在 JavaScript 中,程序员可以根据自己的口味选择编程风格:面向过程或面向对象。如果你是一个重口味,JavaScript 一样可以应付自如:面向过程,面向对象,面向方面,使用 JavaScript 开发人员甚至可以使用函数式编程技术

这篇文章中,我的目标是编写一个简单的 JavaScript 组件,来向大家展示一下 JavaScript 的强大。该组件是一个可编辑的项目列表(HTML中的 select 标签):用户可以选择某一项并删除它,或者添加新的项目到列表中。组件将由三个类构成,分别对应着 MVC 设计模式的模型-视图-控制器。

这篇文章只是一个简单的指导。如果你希望在实际的项目中使用它,你需要进行适当的修改。我相信你拥有创建和运行 JavaScript 程序的一切:大脑,双手,文本编辑器(如记事本),浏览器(例如我的*** Chrome)。

既然我们的代码要使用 MVC 模式,因此我在这里简单介绍一个这个设计模式。 MVC 模式的英文名称是 Model-View-Controller pattern,顾名思义,其主要部分组成:

模型Model(),用于存储程序中使用到的数据;

视图(View),用不同的表现形式来呈现数据;

控制器(Controller),更新模型。

在维基百科对 MVC 体系结构的定义中,它由如下三部分组成:

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

视图(View) - 视图层能够实现数据有目的的显示,通常是一个用户界面元素。在视图中一般没有程序上的逻辑。在 Web 应用程序中的 MVC,通常把显示动态数据的 html 页面称为视图。

控制器(Controller) - 处理和响应事件,通常是用户操作,并监控模型上的变化,然后去修改视图。

The data of the component is a list of items, in which one particular item can be selected and deleted. So, the model of the component is very simple - it is stored in an array property and selected item property; and here it is:

我们将基于 MVC 实现一个数据列表组件,列表中的项目可以被选择和删除。因此,组件模型是非常简单的 - 它只需要两个属性:

数组 _items 用来存储所有元素;普通变量 _selectedIndex 用来存储选定的元素索引

代码如下:

  1. /**  
  2.  * 模型。  
  3.  *  
  4.  * 模型存储所有元素,并在状态变更时通知观察者(Observer)。  
  5.  */   
  6. function ListModel(items) {  
  7.     this._items = items;        // 所有元素  
  8.     this._selectedIndex = -1;   // 被选择元素的索引  
  9.  
  10.     this.itemAdded = new Event(this);  
  11.     this.itemRemoved = new Event(this);  
  12.     this.selectedIndexChanged = new Event(this);  
  13. }  
  14.  
  15. ListModel.prototype = {  
  16.     getItems : function () {  
  17.         return [].concat(this._items);  
  18.     },  
  19.  
  20.     addItem : function (item) {  
  21.         this._items.push(item);  
  22.         this.itemAdded.notify({item : item});  
  23.     },  
  24.  
  25.     removeItemAt : function (index) {  
  26.         var item;  
  27.  
  28.         item = this._items[index];  
  29.         this._items.splice(index, 1);  
  30.         this.itemRemoved.notify({item : item});  
  31.  
  32.         if (index === this._selectedIndex) {  
  33.             this.setSelectedIndex(-1);  
  34.         }  
  35.     },  
  36.  
  37.     getSelectedIndex : function () {  
  38.         return this._selectedIndex;  
  39.     },  
  40.  
  41.     setSelectedIndex : function (index) {  
  42.         var previousIndex;  
  43.  
  44.         previousIndex = this._selectedIndex;  
  45.         this._selectedIndex = index;  
  46.         this.selectedIndexChanged.notify({previous : previousIndex});  
  47.     }  
  48. };  

Event 是一个简单的实现了观察者模式(Observer pattern)的类:

  1. function Event(sender) {  
  2.     this._sender = sender;  
  3.     this._listeners = [];  
  4. }  
  5.  
  6. Event.prototype = {  
  7.     attach : function (listener) {  
  8.         this._listeners.push(listener);  
  9.     },  
  10.  
  11.     notify : function (args) {  
  12.         var index;  
  13.  
  14.         for (index = 0; index < this._listeners.length; index += 1) {  
  15.             this._listeners[index](this._sender, args);  
  16.         }  
  17.     }  
  18. };  

View 类需要定义控制器类,以便与它交互。虽然这个任务可以有许多不同的接口(interface),但我更喜欢最简单的。我希望我的项目是在一个 ListBox 控件和它下面的两个按钮:“加号”按钮添加项目,“减”删除所选项目。组件所提供的“选择”功能则需要 select 控件的原生功能的支持。

一个 View 类被绑定在一个 Controller 类上,其中「…控制器处理用户输入事件,通常是通过一个已注册的回调函数」(wikipedia.org)。

下面是 View 和 Controller 类:

  1. /**  
  2.  * 视图。  
  3.  *   
  4.  * 视图显示模型数据,并触发 UI 事件。  
  5.  * 控制器用来处理这些用户交互事件  
  6.  */   
  7. function ListView(model, elements) {  
  8.     this._model = model;  
  9.     this._elements = elements;  
  10.  
  11.     this.listModified = new Event(this);  
  12.     this.addButtonClicked = new Event(this);  
  13.     this.delButtonClicked = new Event(this);  
  14.  
  15.     var _this = this;  
  16.  
  17.     // 绑定模型监听器  
  18.     this._model.itemAdded.attach(function () {  
  19.         _this.rebuildList();  
  20.     });  
  21.  
  22.     this._model.itemRemoved.attach(function () {  
  23.         _this.rebuildList();  
  24.     });  
  25.  
  26.     // 将监听器绑定到 HTML 控件上  
  27.     this._elements.list.change(function (e) {  
  28.         _this.listModified.notify({ index : e.target.selectedIndex });  
  29.     });  
  30.  
  31.     this._elements.addButton.click(function () {  
  32.         _this.addButtonClicked.notify();  
  33.     });  
  34.  
  35.     this._elements.delButton.click(function () {  
  36.         _this.delButtonClicked.notify();  
  37.     });  
  38. }  
  39.  
  40. ListView.prototype = {  
  41.     show : function () {  
  42.         this.rebuildList();  
  43.     },  
  44.  
  45.     rebuildList : function () {  
  46.         var list, items, key;  
  47.  
  48.         list = this._elements.list;  
  49.         list.html('');  
  50.  
  51.         items = this._model.getItems();  
  52.         for (key in items) {  
  53.             if (items.hasOwnProperty(key)) {  
  54.                 list.append($('<option>' + items[key] + '</option>'));  
  55.             }  
  56.         }  
  57.  
  58.         this._model.setSelectedIndex(-1);  
  59.     }  
  60. };  
  61.  
  62. /**  
  63.  * 控制器。  
  64.  *  
  65.  * 控制器响应用户操作,调用模型上的变化函数。  
  66.  */   
  67. function ListController(model, view) {  
  68.     this._model = model;  
  69.     this._view = view;  
  70.  
  71.     var _this = this;  
  72.  
  73.     this._view.listModified.attach(function (sender, args) {  
  74.         _this.updateSelected(args.index);  
  75.     });  
  76.  
  77.     this._view.addButtonClicked.attach(function () {  
  78.         _this.addItem();  
  79.     });  
  80.  
  81.     this._view.delButtonClicked.attach(function () {  
  82.         _this.delItem();  
  83.     });  
  84. }  
  85.  
  86. ListController.prototype = {  
  87.     addItem : function () {  
  88.         var item = window.prompt('Add item:''');  
  89.         if (item) {  
  90.             this._model.addItem(item);  
  91.         }  
  92.     },  
  93.  
  94.     delItem : function () {  
  95.         var index;  
  96.  
  97.         index = this._model.getSelectedIndex();  
  98.         if (index !== -1) {  
  99.             this._model.removeItemAt(this._model.getSelectedIndex());  
  100.         }  
  101.     },  
  102.  
  103.     updateSelected : function (index) {  
  104.         this._model.setSelectedIndex(index);  
  105.     }  
  106. };  

当然,Model, View, Controller 类应当被实例化。

下面是一个使用此 MVC 的完整代码:

  1. $(function () {  
  2.     var model = new ListModel(['PHP''JavaScript']),  
  3.  
  4.     view = new ListView(model, {  
  5.         'list' : $('#list'),   
  6.         'addButton' : $('#plusBtn'),   
  7.         'delButton' : $('#minusBtn')  
  8.     }),  
  9.  
  10.     controller = new ListController(model, view);          
  11.     view.show();  
  12. });  
  13.  
  14. <select id="list" size="10" style="width: 15em"></select><br/>  
  15. <button id="plusBtn">  +  </button>  
  16. <button id="minusBtn">  -  </button>  

原文链接:http://justjavac.com/javascript/2012/12/14/model-view-controller-mvc-javascript.html

责任编辑:张伟 来源: justjavac
相关推荐

2017-11-23 17:21:31

Yii框架IntelYii框架深度剖析

2020-12-22 09:32:36

JavaScripMixin mixins

2023-10-30 10:20:45

2012-10-29 11:16:13

2011-06-02 18:02:50

iPhone MVC

2009-07-10 16:14:29

MVC设计模式Swing

2013-11-06 09:39:30

JavaScriptMVC框架

2009-02-12 09:55:22

AjaxMVCDojo

2009-07-15 18:11:17

MVC模式学习

2012-02-29 09:41:14

JavaScript

2010-09-13 09:18:22

JavaScript模块模式

2012-02-09 16:09:17

JavaScript

2012-12-25 09:38:41

JavaScript设计模式

2021-02-19 14:07:03

JavaScript编程开发

2011-04-22 09:26:57

MVC设计

2015-09-08 13:39:10

JavaScript设计模式

2012-05-09 10:09:18

JavaMEJava

2009-07-30 13:45:40

ASP.NET开发模式MVC模式

2009-04-30 09:15:25

三层结构MVC架构

2023-11-02 21:11:11

JavaScript设计模式
点赞
收藏

51CTO技术栈公众号