V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.
Tankpt
V2EX  ›  Backbone.js

渣渣想请教下有关backbone的一点入门理解问题

  •  
  •   Tankpt · 2013-12-17 11:13:30 +08:00 · 6324 次点击
    这是一个创建于 3987 天前的主题,其中的信息可能已经有所发展或是发生改变。
    前几天去面试实习,无奈问道了前端的mvc,顿时表示不知道,然后回来看了下,看别人推荐,选了backbone这个,然后大概粗略的看了下官网的文档,然后在csnd啥的看了几个例子,有点不解,就是,我看里面有的什么model,view,colletion,这些我感觉理解起来有点困难。

    说了那么说的话,其实问题就一个,就是好难体会他这种mvc的思想,之前写的时候都是一条龙的页面html再加上需要绑定的事件的jquery。就是理解不了这个思想,新手问了一个比较2的问题,请轻拍,希望过来人能给一些文章或者是资料什么的好参考下,特此感谢了~~
    11 条回复    2016-07-25 01:27:55 +08:00
    refresh
        1
    refresh  
       2013-12-17 11:35:21 +08:00
    backbone的教程已经很多了,model是数据层,view负责数据呈现,collection负责控制。
    楼主看这个:http://todomvc.com/,非常全的各种mvc例子。
    meteor
        2
    meteor  
       2013-12-17 11:39:17 +08:00
    我是喜欢看视频的.
    https://www.codeschool.com/courses/anatomy-of-backbonejs
    虽然买不起, 但是提供免费看的也不错.
    如果时间多的话,可以看下书.
    http://addyosmani.github.io/backbone-fundamentals/
    不知道有没有中文的.
    FrankFang128
        3
    FrankFang128  
       2013-12-17 12:32:49 +08:00 via Android
    你用就Query的时候也用了MVC思想,只是你不知道
    Tankpt
        4
    Tankpt  
    OP
       2013-12-17 12:34:58 +08:00
    @FrankFang128 嗯。。应该是的。。感觉都没深入了解。很有欠缺。。
    Tankpt
        5
    Tankpt  
    OP
       2013-12-17 12:36:20 +08:00
    @refresh 很感谢你的回复。。。这个网站真好
    Tankpt
        6
    Tankpt  
    OP
       2013-12-17 12:36:44 +08:00
    @meteor 恩恩。。我看了点。不错。正好练听力。。谢谢先
    zztczcx
        7
    zztczcx  
       2013-12-17 17:34:59 +08:00
    其实就是换了一种组织 代码的方式。
    Tankpt
        8
    Tankpt  
    OP
       2013-12-17 20:35:47 +08:00
    @zztczcx 能否再详细说一下呢。。
    FrankFang128
        9
    FrankFang128  
       2014-01-23 23:59:32 +08:00   ❤️ 2
    MVC 对于 JS 来说,是舶来品,同时是必需品。
    先说为什么是舶来品。因为 MVC 前几年和 JS 一点关系也没有。MVC 常用在后台程序里,PHP 的 MVC 框架多了去了。我就大概的介绍下,我写后台也没写多久。
    一般来说 MVC 都有一个 R(Router,即路由),不懂这个概念没关系,先来看看程序员怎么用 Router。
    假设我们用 PHP 实现一个 MVC 的 Todo 网站,那么一个熟悉 MVC 的后台开发人员首先要「设计 URL」
    http://example.com/todo/list 这个页面用来展示 todo list
    http://example.com/todo/add 用于添加 todo
    暂且就要这两个URL吧。Router 的作用就是根据 url,找相应的代码来负责响应(Router 本身不负责响应)。

    Router 的实现

    if url is /todo/list
    > then call somebody to show the list page
    if url is /todo/add
    > then call somebody to show the adding page
    if url is /todo/remove

    那么谁来当这个 somebody 呢?它就是 Todo 类,这个类有 list 和 add 两个方法。看上去很完美的样子。为什么 Router 不直接做出响应,非要 Todo 类响应呢?分工明确嘛。

    这个 Todo 类,被命名为控制器C(为什么叫控制器?因为待会它要控制 Model 和 View)

    Todo 的实现

    function list
    > get all the todo MODELs
    > generate a VIEW with the MODELs
    > RESPONSE the user with the VIEW

    RESPONSE 就是向浏览器发送页面的意思,而 VIEW 差不多就是页面的意思,MODEL 呢?当然是数据。
    数据可以是从数据库里得到的。这里你就看到 Controller 是如何在操纵 View 和 Model 了。

    function add
    > if METHOD == get
    > > RESPONSE with the adding VIEW
    > if METHOD == post
    > > get todo name from the post params
    > > generate a MODEL with the todo name
    > > save the MODEL (to mysql)
    > > RESPONSE with the success VIEW

    add 方法首先判断 METHOD 是 get 还是 post。如果是 get(当你在浏览器里输入一个网址时,就是在 get 该网址),就展示添加页面,这个页面可能是一个表单,几个输入框,一个提交按钮。当用户点击提交时,就是 post 了一个请求。如果 METHOD 是 post,就新建一个 model,存到 mysql,然后向用户返回一个成功页面(success VIEW)

    MVC 的流程基本就是这样了。
    为什么是 MVC?因为通用。哪个网站没有 Model(数据),除非你是全静态网站;哪个网站没有 View(页面HTML)。而 Controller,是为了解藕,Model 现在只负责数据了,View 只负责页面 HTML,那么其他的脏活累活谁做?Controller。 Router 是来干什么的呢?活太多了,需要多个 Controller 来做,是不是需要一个监工/指挥/经理呢?比如现在这个 Todo 网站允许用户注册了,是不是需要一个 User 类来负责登录、注册呢?Router 就是给他们俩指派任务的人。

    我理解的后台 MVC 就是这样了。
    晚了,前端的 MVC 下次再讲。
    TomIsion
        10
    TomIsion  
       2016-07-22 17:37:11 +08:00
    @FrankFang128 可以抽时间讲讲前端的 MVC 么 讲的很通俗易懂~
    FrankFang128
        11
    FrankFang128  
       2016-07-25 01:27:55 +08:00
    @TomIsion 这是我 2014 年挖的坑……
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2312 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 01:49 · PVG 09:49 · LAX 17:49 · JFK 20:49
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.