- <!-- jsmvc.model.js -->
- <script>
- /**************************************************
- 转载自:http://developer.51cto.com/art/201212/372725.htm
- 我们将基于 MVC 实现一个数据列表组件,列表中的项目可以被选择和删除。因此,组件模型是非常简单的 - 它只需要两个属性:
- 数组 _items 用来存储所有元素;普通变量 _selectedIndex 用来存储选定的元素索引
- **************************************************/
- /**
- * 模型: 模型存储所有元素,并在状态变更时通知观察者(observer)
- *
- */
- function ListModel(items) {
- this._items = items; // 所有元素
- this._selectedIndex = -1; // 被选中的元素索引
- this.itemAdd = new Event(this);
- this.itemRemoved = new Event(this);
- this.selectedIndexChanged = new Event(this);
- }
- ListModel.prototype = {
- getItems: function() {
- return [].concat(this._items);
- },
- addItem: function(item) {
- this._items.push(item);
- this.itemAdd.notify({item:item});
- },
- removeItemAt: function(index) {
- var item;
- item = this._items[index];
- this._items.splice(index, 1);
- this.itemRemoved.notify({item:item});
- if (index === this._selectedIndex) this.setSelectedIndex(-1);
- },
- getSelectedIndex: function() {
- return this._selectedIndex;
- },
- setSelectedIndex: function(index) {
- var previousIndex;
- previousIndex = this._selectedIndex;
- this._selectedIndex = index;
- this.selectedIndexChanged.notify({previous:previousIndex});
- }
- }
- </script>
- <!-- jsmvc.event.js -->
- <script>
- /**************************************************************
- Event 是一个简单的实现了观察者模式(Observer pattern)的类:
- **************************************************************/
- function Event(sender) {
- this._sender = sender;
- this._listeners = [];
- }
- Event.prototype = {
- attach: function(listener) {
- this._listeners.push(listener);
- },
- notify: function(args) {
- var index;
- for (index = 0; index < this._listeners.length; index++) {
- this._listeners[index](this._sender, args);
- }
- }
- }
- </script>
- <!-- jsmvc.view.js -->
- <script>
- /*****************************************************************
- View 类需要定义控制器类,以便与它交互。虽然这个任务可以有许多不同的接口(interface),
- 但我更喜欢最简单的。我希望我的项目是在一个 ListBox 控件和它下面的两个按钮:“加号”按钮
- 添加项目,“减”删除所选项目。组件所提供的“选择”功能则需要 select 控件的原生功能的支持。
- ****************************************************************/
- /**
- * 视图
- *
- * 视图显示模型数据,并触发 UI 事件
- * 控制器用来处理这些用户交互事件
- */
- function ListView(model, elements) {
- this._model = model;
- this._elements = elements;
- this.listModified = new Event(this);
- this.addButtonClicked = new Event(this);
- this.delButtonClicked = new Event(this);
- var _this = this;
- // 绑定模型监听器, 当模型新增一个 item 时, view 层需要重新渲染
- this._model.itemAdd.attach(function() {
- _this.rebuildList();
- });
- // 绑定模型监听器
- this._model.itemRemoved.attach(function() {
- _this.rebuildList();
- });
- // 将监听器绑定到 html 控件上 -- 用于与 controller 交互
- this._elements.list.change(function(e) {
- _this.listModified.notify({index: e.target.selectedIndex});
- });
- // 将监听器绑定到 HTML 控件上 -- 用于与 controller 交互
- this._elements.addButton.click(function() {
- _this.addButtonClicked.notify();
- });
- // 将监听器绑定到 HTML 控件上 -- 用于与 controller 交互
- this._elements.delButton.click(function() {
- _this.delButtonClicked.notify();
- });
- }
- ListView.prototype = {
- show: function() {
- this.rebuildList();
- },
- rebuildList: function() {
- var list, items, key;
- list = this._elements.list;
- list.html('');
- items = this._model.getItems();
- for (key in items) {
- if (items.hasOwnProperty(key)) list.append('<option>'+items[key]+'</options>');
- }
- this._model.setSelectedIndex(-1);
- }
- }
- </script>
- <!-- jsmvc.controller.js -->
- <script>
- /**
- * 控制器
- * 控制器响应用户操作,调用模型上的变化函数
- *
- */
- function ListController(model, view) {
- this._model = model;
- this._view = view;
- var _this = this;
- // 绑定视图监听器
- this._view.listModified.attach(function(sender, args) {
- _this.updateSelected(args.index);
- });
- // 绑定视图监听器
- this._view.addButtonClicked.attach(function() {
- _this.addItem();
- });
- // 绑定视图监听器
- this._view.delButtonClicked.attach(function() {
- _this.delItem();
- });
- }
- ListController.prototype = {
- addItem: function() {
- var item = window.prompt('Add item:', '');
- if (item) this._model.addItem(item);
- // debug
- console.dir(this._model.getItems());
- },
- delItem: function() {
- var index;
- index = this._model.getSelectedIndex();
- if (index != -1) this._model.removeItemAt(this._model.getSelectedIndex());
- // debug
- console.dir(this._model.getItems());
- },
- updateSelected: function(index) {
- this._model.setSelectedIndex(index);
- // debug
- console.log(index);
- }
- }
- </script>
- <!-- index.html -->
- <script src1='http://ossweb-img.qq.com/images/js/jquery/jquery-1.7.1.min.js'></script>
- <script>
- //使用此 MVC 的完整代码
- $(function() {
- var model = new ListModel(['PHP', 'Javascript']),
- view = new ListView(model, {
- 'list': $('#list'),
- 'addButton': $('#plusBtn'),
- 'delButton': $('#minusBtn')
- }),
- controller = new ListController(model, view);
- view.show();
- });
- </script>
- <select id="list" size="10" style="width: 15em"></select><br/>
- <button id="plusBtn"> + </button>
- <button id="minusBtn"> - </button>
- //该片段来自于http://www.codesnippet.cn/detail/211120137389.html
来源: http://www.codesnippet.cn/detail/211120137389.html