V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xiaomajia008
V2EX  ›  程序员

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

  •  
  •   xiaomajia008 · 2014-04-17 10:29:34 +08:00 · 4122 次点击
    这是一个创建于 3875 天前的主题,其中的信息可能已经有所发展或是发生改变。
    一直搞不懂MVC的概念, 没有后端开发经验, 看了网上的例子都很抽象...

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

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

    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
        8
    sternelee  
       2014-04-17 12:17:48 +08:00 via Android
    bootstrap
    otakustay
        9
    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.
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   6052 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 02:30 · PVG 10:30 · LAX 18:30 · JFK 21:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.