谁能给我一个最通俗易懂的例子讲一下 javascript MVC?

2014-04-17 10:29:34 +08:00
 xiaomajia008
一直搞不懂MVC的概念, 没有后端开发经验, 看了网上的例子都很抽象...

最近在看javascript MVC的概念...头大阿..谁能给我讲讲?
4026 次点击
所在节点    程序员
9 条回复
zinking
2014-04-17 10:32:33 +08:00
说是说不清楚的, 你可以先不用MVC写个东西,然后再用MVC重构这个东西, 然后就高下立现了。 我当初反正就是这么学的
Mutoo
2014-04-17 10:32:53 +08:00
使用各种javascript mvc框架实现的todo,相关教程都可以在相应框架的书中看到
http://todomvc.com
Mutoo
2014-04-17 10:33:56 +08:00
hkongm
2014-04-17 11:06:57 +08:00
MVC适合后端,前端进化到MVVM,MVC>MVP>MVVM.
angularjs/knockoutjs/ember/avalon
lemonlwz
2014-04-17 11:13:08 +08:00
ext, senchaTouch 也是MVC架构的
otakustay
2014-04-17 11:27:15 +08:00
C从M拿数据给V,V画出界面
用户点了V元素,V事件,C接收事件,要啥逻辑处理下,要数据从M拿,然后通知V,V更新界面

以上是传统型MVC,说白了就2回事
wity_lv
2014-04-17 11:58:32 +08:00
先说一下最主观的做法:

get('data.json', function(data) {
renderDom(data);
// bala bala...
});

再说一下Model-View
function createModel(data) {
this.data = data;

var event = { data: data, .... };

fireEvent('change', data);
};

function createView(model) {
model.listen('change', function(event) {
renderDom(event.data);
}
}

// M和V分离,交互通过事件进行, 实现数据绑定.
var m = createModel({});
var v = createView(m);

get('data.json', function(data) {
m.update(data);
});

有没有注意到get操作并没有封装,如果m,v多了是不是会是问题,

下来是M-V-C
function createControler(m,v) {

this.m = m;
this.v = v;
this.fetchData = function() {

get('data.json', function(data) {
m.update(data);
});

}
}

var v = createController(m, v);
sternelee
2014-04-17 12:17:48 +08:00
bootstrap
otakustay
2014-04-17 16:20:39 +08:00
@wity_lv 我不大认同fetchData在controller做

http://blog.sourcing.io/mvc-style-guide

Models should abstract away XHR connections from the rest of the application.

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/108921

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX