zoukankan      html  css  js  c++  java
  • 初学Backbone

    简介

    Backbone是一款不错的前端MVC框架,它主要由Router,Model,View,Collection构成。当我们在一个页面中有许多交互,js操作,即构建富应用程序(rich client-side applications)时,用Backbone这类的框架来管理自己的代码是十分有用的。

    在Backbone里,我们一般会用Model来处理数据,包括数据的校验,Ajax等。用View与页面显示打交道,会在View中渲染el之类的。Collection只是Model的集合。MVC中的C其实隐藏在View中,并没有显式的Controller。在官方文档中说的是我们可以把View中事件处理作为Controller,而View中的template之类的渲染函数才是真正的View。

    Backbone的学习还是直接看官方的英文文档较好,不管是学习的速度还是质量。中文的翻译毕竟还是很让人迷惑的。。。。。

    Backbone官方文档:http://backbonejs.org/

    Model

    我们会用extend来生成我们自己的Model,后面的View,Collection,Router也是一样。在extend中,可以传入必要的参数进行构建:

    var Note = Backbone.Model.extend({
    
      initialize: function() { ... },
    
      author: function() { ... },
    
      coordinates: function() { ... },
    
      allowedToEdit: function(account) {
        return true;
      }
    
    });
    
    var PrivateNote = Note.extend({
    
      allowedToEdit: function(account) {
        return account.owns(this);
      }
    
    });

    因为在Backbone中,extend使用prototype实现的。于是按理说可以无限extend下去,不过应该不会有人extend很长吧。。。。

    几个特殊的函数要注意的:

    首先是initialize,上述例子中,我们如果var note = new Note,initialize函数会默认指向,将其中的值绑定到this对象中。

    然后是validate,如果我们定义了validate函数,那么调用note.isVaid()或者在调用Model原生的上传函数save,都会运行validate。来进行校验Model中保存的数据是否合理。

    View

    和Model,首先用extend:

    var DocumentRow = Backbone.View.extend({
    
      tagName: "li",
    
      className: "document-row",
    
      events: {
        "click .icon":          "open",
        "click .button.edit":   "openEditDialog",
        "click .button.delete": "destroy"
      },
    
      initialize: function() {
        this.listenTo(this.model, "change", this.render);
      },
    
      render: function() {
        ...
      }
    
    });

    render函数一般是用来渲染的,最后一般会加一句return this;。

    一般的,我们都会这么使用这个View:

    var documentRow = new DocumentRow({
        //options
    });
    $(targetEle).append(documentRow.render().el);

    el和$el的区别在于,$el是jQuery化的el。

    Collection

    Collection是同一个Model的实例的集合,可以往里添加实例,或者删除等等操作。

    Router

    Router一般会被用来作为项目或者组件的入口。同样是用extend:

    var Workspace = Backbone.Router.extend({
    
      routes: {
        "help":                 "help",    // #help
        "search/:query":        "search",  // #search/kiwis
        "search/:query/p:page": "search"   // #search/kiwis/p7
      },
    
      help: function() {
        ...
      },
    
      search: function(query, page) {
        ...
      }
    
    });

    routes中对应的是访问时地址后面的hash值所定义要执行的函数,然后可以再具体函数中初始化相应的View之类的。

    如果有人能看到这的话。。。肯定已经一团雾水了。。。刚开始的时候是这样。。特别是直接看中文的教程。。所以强烈推荐直接去官方文档上看

    最近刚入职,被拉去学Backbone,然后立马上项目。。还是交易模块的。。简直压力山大。。每天都是到晚上11点的节奏啊。。。

    不写了,睡觉去,明天有空再码一篇。。。

  • 相关阅读:
    pcs7 opc 连接问题
    nuget 多个程序引用同一个库时,当个这个库更新时,引用的程序都要跟新,否则会在运行时出错
    nuget update FileConflictAction
    a
    C#版本
    .NET Framework版本与CLR版本之间的关系
    c# 将一种数组类型转成另一种数组类型
    tfs 清除缓存,在需要时
    java枚举和仿枚举
    java反射的用法
  • 原文地址:https://www.cnblogs.com/cyITtech/p/3826518.html
Copyright © 2011-2022 走看看