- 浏览: 111391 次
- 性别:
- 来自: 深圳
最新评论
-
lmh2072005:
<div class="quote_title ...
new Date(date) -
hisense731:
也可以这样就不用报错了。
var date = "A ...
new Date(date) -
vimest:
知道IE的就已经足够了,opera,chrome,safari ...
再次总结下css的一些hack
转自:http://www.alexatnet.com/content/model-view-controller-mvc-javascript
The article describes an implementation of Model-View-Controller software design pattern in JavaScript. I like JavaScript programming, because it is the most flexible language in the world. With the JavaScript language developers can create applications either in procedural or object-oriented style. It supports almost all programming styles and techniques that I know. I've seen procedural, object-oriented, aspect-oriented JavaScript code snippets. A determined developer can even use functional programming techniques in JavaScript applications. My goal for this article is to write a simple JavaScript component that can show a power of the language. The component is a kind of the HTML ListBox ("select" HTML tag) control with an editable list of items: the user can select item and remove it or add new items into the list. Component will consist of three classes that implement the Model-View-Controller design pattern. I hope, this article can be just a good reading for you, but it would be much better if you consider running the example and adapting it to you needs. I believe you have everything to create and run JavaScript programs: brains, hands, text editor (notepad), and Internet browser (IE or Firefox). The Model-View-Controller pattern, which I'm about to use in the code, requires some description here. As you may know, the name of the pattern is based on the names of its main parts: Model, which stores an application data model; View, which renders Model for an appropriate representation; and Controller, which updates Model. Wikipedia defines typical components of the Model-View-Controller architecture as follows: 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: Event is a simple class for implementing the Observer pattern: The View class requires defining controls for interacting with. There are numerous alternatives of interface for the task, but I prefer a most simple one. I want my items to be in a Listbox control and two buttons below it: "plus" button for adding items and "minus" for removing selected item. The support for selecting an item is provided by Listbox's native functionality. A View class is tightly bound with a Controller class, which "... handles the input event from the user interface, often via a registered handler or callback" (from wikipedia.org). Here are the View and Controller classes: And of course, the Model, View, and Controller classes should be instantiated. The sample, which you can below, uses the following code to instantiate and configure the classes:
/**
* The Model. Model stores items and notifies
* observers about changes.
*/
var
ListModel =
function
(items) {
this
._items = items;
this
._selectedIndex = -1;
this
.itemAdded =
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
.itemAdded.notify({item: item});
},
removeItemAt :
function
(index) {
var
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 =
this
._selectedIndex;
this
._selectedIndex = index;
this
.selectedIndexChanged.notify({previous: previousIndex});
}
};
var
Event =
function
(sender) {
this
._sender = sender;
this
._listeners = [];
};
Event.prototype = {
attach :
function
(listener) {
this
._listeners.push(listener);
},
notify :
function
(args) {
for
(
var
i = 0; i <
this
._listeners.length; i++) {
this
._listeners[i](
this
._sender, args);
}
}
};
var
ListView =
function
(model, controller, elements) {
this
._model = model;
this
._controller = controller;
this
._elements = elements;
var
_this =
this
;
// attach model listeners
this
._model.itemAdded.attach(
function
() {
_this.rebuildList();
});
this
._model.itemRemoved.attach(
function
() {
_this.rebuildList();
});
// attach listeners to HTML controls
this
._elements.list.change(
function
(e) {
_this._controller.updateSelected(e);
});
};
ListView.prototype = {
show :
function
() {
this
.rebuildList();
var
e =
this
._elements;
var
_this =
this
;
e.addButton.click(
function
() { _this._controller.addItem() });
e.delButton.click(
function
() { _this._controller.delItem() });
},
rebuildList :
function
() {
var
list =
this
._elements.list;
list.html(
''
);
var
items =
this
._model.getItems();
for
(
var
key
in
items)
list.append($(
'<option>'
+ items[key] +
'</option>'
))
this
._model.setSelectedIndex(-1);
}
};
var
ListController =
function
(model) {
this
._model = model;
};
ListController.prototype = {
addItem :
function
() {
var
item = prompt(
'Add item:'
,
''
);
if
(item)
this
._model.addItem(item);
},
delItem :
function
() {
var
index =
this
._model.getSelectedIndex();
if
(index != -1)
this
._model.removeItemAt(
this
._model.getSelectedIndex());
},
updateSelected :
function
(e) {
this
._model.setSelectedIndex(e.target.selectedIndex);
}
};
$(
function
() {
var
model =
new
ListModel([
'PHP'
,
'JavaScript'
]);
var
view =
new
ListView(model,
new
ListController(model),
{
'list'
: $(
'#list'
),
'addButton'
: $(
'#plusBtn'
),
'delButton'
: $(
'#minusBtn'
)
}
);
view.show();
});
<
select
id
=
"list"
size
=
"10"
style
=
"width: 15em"
></
select
><
br
/>
<
button
id
=
"plusBtn"
> + </
button
>
<
button
id
=
"minusBtn"
> - </
button
>
发表评论
-
javascript 判断对象的值是否相等
2012-08-02 10:04 3799经常要判断两个对象的值是否相等 ,写了个方法用来比较,和对象深 ... -
javascript 跟踪效果
2012-03-21 14:06 1000<!DOCTYPE HTML> <html ... -
javascript 判断操作系统
2011-12-12 11:53 1133function checkSys() { //var ... -
js获取地址栏参数
2011-11-18 15:00 1418根据参数获取相应的值 1. func ... -
JSON对象和字符串
2011-11-14 16:43 1576JSON和字符串互转在ajax交互中经常用到,以前用过eval ... -
javascript中的编码和解码
2011-11-11 10:59 14771. encodeURIComponent(url) 函数可把 ... -
鼠标滚轮事件
2011-08-19 17:19 931滚轮事件:IE/chrome/opera/saf ... -
new Date(date)
2011-08-08 12:22 2078在做日历插件的时候遇到的记录一下: var date = & ... -
关于圆角的问题,谁有更好的方式?
2011-07-28 12:36 753现在越来越多的网站喜欢上了圆角,css3 可以很轻松的实现 , ... -
更新下前端相关笔记
2011-07-27 18:57 2289color:red; /* 所有浏览 ... -
获取页面元素的位置
2011-07-26 18:14 920通常需要到获取页面元素相对窗口的位置: func ... -
javascript Object.extend的用法
2011-07-18 18:05 4015javascript Object.extend的用法 ... -
正则表达式笔记
2011-07-14 18:31 834使用RegExp的显式构造 ... -
getElementByClass
2011-07-14 18:20 5638实际应用中很多地方需 ...
相关推荐
CorMVC stands for: Client-Only-Required 一个javascript的MVC框架 Model-View-Controller, and is my laboratory experiment in application architecture held completely seperate from server-side ...
Web development expert Dino Esposito takes you through the web framework’s Model-View-Controller (MVC) design model, and covers the tools you need to cleanly separate business logic from the user ...
You will work with the power of the Model-View-Controller (MVC) pattern on the client, creating a strong foundation for complex and rich web apps. Best-selling author Adam Freeman explains how to ...
Web development expert Dino Esposito takes you through the web framework’s Model-View-Controller (MVC) design model, and covers the tools you need to cleanly separate business logic from the user ...
Writing for professional programmers, Walther explains the crucial concepts that make the Model-View-Controller (MVC) development paradigm work so well and shows exactly how to apply them with the ASP...
You'll learn how to create structured JavaScript applications, using Backbone's own flavor of model-view-controller (MVC) architecture. Start with the basics of MVC, SPA, and Backbone, then get your ...
You’ll learn how to create structured JavaScript applications, using Backbone’s own flavor of model-view-controller (MVC) architecture. Start with the basics of MVC, SPA, and Backbone, then get ...
原文:Model-View-Controller (MVC) with JavaScript作者:Alex@Net译文:JavaScript 的 MVC 模式译者:justjavac 本文介绍了模型-视图-控制器模式在 JavaScript 中的实现。 我喜欢 JavaScript,因为它是在世界上最...
You will work with the power of the Model-View-Controller (MVC) pattern on the client, creating a strong foundation for complex and rich web apps. Best-selling author Adam Freeman explains how to ...
You'll learn how to create structured JavaScript applications, using Backbone's own flavor of model-view-controller (MVC) architecture. Start with the basics of MVC, SPA, and Backbone, then get your ...
You'll learn how to create structured JavaScript applications, using Backbone's own flavor of model-view-controller (MVC) architecture. Start with the basics of MVC, SPA, and Backbone, then get your ...
You will work with the power of the Model-View-Controller (MVC) pattern on the client, creating a strong foundation for complex and rich web apps. Best-selling author Adam Freeman explains how to ...
Developed and maintained by Google, AngularJS brings the Model-View-Controller (MVC) pattern to JavaScript applications and provides a high quality foundation for building complex and powerful apps ...
猫叫声 它是什么 这是一个Javascript中具有最小依赖关系的模型视图控制器模式的非常简单的示例。 演示
src --controller --model --view srcApi --Apicontroller --Apimodel 在这个专案上: 仪表板管理员 权限=>创建用户并添加路由权限。 从终端创建控制器,模型,视图。 具有特定角色的用户 用户可以修改个人...
计算器使用Model-View-Controller(MVC)设计模式的香草JavaScript计算器。 如何运行:计算器上线后,将包含一个查看链接。模型描述管理数据,该数据将是计算器将评估并计算结果的数学表达式。执行计算用户的中缀...
You’ll start by learning core concepts such as the Model-View-Controller architectural pattern, and then work your way toward advanced topics. The authors demonstrate ASP.NET MVC 4 best practices and...
Developed and maintained by Google, AngularJS brings the Model-View-Controller (MVC) pattern to JavaScript applications and provides a high quality foundation for building complex and powerful apps ...
最为核心的是:MVC(Model–view–controller)、模块化、自动化双向数据绑定、语义化 标签、依赖注入等等。 AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。它可通过 <script> 标签添加到 ...