专栏首页Python程序员杂谈7、backbone实例todos分析(一)

7、backbone实例todos分析(一)

新版地址: backbone第二版更新.

​经过前面的几篇文章,backbone中的modelcollectionrouterview,都简单的讲了一下,我觉得看完这几篇文章,你应该达到的水平,或者说我要达到的目的就是:已经能够在自己的web项目或者是平时的练习中用的上backbone了。

其实对于一个web开发老手来说,基本上看完前面的内容,你已经可以把backbone的使用和自己的开发经验结合起来进行应用了,要想更进一步的话需要去看backbone的官方文档,或者去看官方实例。

这里我就backbone官网上的实例todos进行下分析,毕竟人家自己的东西,自己写出来应该能够把backbone的特性发挥的淋漓尽致,并且代码应该也是足够优秀的,不然也会放出来让大家参考。

好了,废话这么多,下面开始正题。todos的代码这里下载:https://github.com/documentcloud/backbone/

​首先应该来看下功能,先看截图:

​从这个界面我们可以总结出来,这个Todos有哪些功能:

1、添加任务。

2、修改任务(包括内容,状态)。

3、删除任务。

4、任务完成情况统计。

总体上就这四项功能。

​这个项目仅仅是在web端运行的,没有服务器进行支持,所以项目中使用了一个叫做backbone-localstorage的js库,用来把数据存储到前端。

因为backbone为mvc模式,根据对这种模式的使用经验,我们应该从分析其数据模型开始。当然,你也可以从其他地方入手。

这里我们显然是可以看到它的源代码的,所以直接来看其model层,:

/**

   *基本的Todo模型,属性为:content,order,done。

   **/

  var Todo = Backbone.Model.extend({

    // 设置默认的属性

    defaults: {

      content: "empty todo...",

      done: false

    },

    //确保每一个content都不为空

    initialize: function() {

      if (!this.get("content")) {

        this.set({"content": this.defaults.content});

      }

    },

    // 将一个任务的完成状态置为逆状态

    toggle: function() {

      this.save({done: !this.get("done")});

    },



    //从localStorage中删除一个条目

    clear: function() {

      this.destroy();

    }

  });

这段代码是很好理解的,不过我依然是画蛇添足的加上了一些注释。这个Todo显然就是对应页面上的每一个任务条目。那么显然应该有一个collection来统治(管理)所有的任务,所以再来看collection:

/**

   *Todo的一个集合,数据通过localStorage存储在本地。

   **/

  var TodoList = Backbone.Collection.extend({

    // 设置Collection的模型为Todo

    model: Todo,
    //存储到本地,以todos-backbone命名的空间中
    localStorage: new Store("todos-backbone"),

    //获取所有已经完成的任务数组

    done: function() {

      return this.filter(function(todo){ return todo.get('done'); });

    },



    //获取任务列表中未完成的任务数组

    remaining: function() {

      return this.without.apply(this, this.done());

    },



    //获得下一个任务的排序序号,通过数据库中的记录数加1实现。

    nextOrder: function() {

      if (!this.length) return 1;

      return this.last().get('order') + 1;

    },



    //Backbone内置函数,根据todo对象的加入顺序进行排列

    comparator: function(todo) {

      return todo.get('order');

    }

  });

collection的主要功能有以下几个:

1、按序存放Todo对象;2、获取完成的任务数目;3、获取未完成的任务数目;4、获取下一个要插入数据的序号。

这里面有三个新的函数需要解释下:

第一个是comparator,这是backbone的内置函数,起作用就是collection中数据的排序依据。文档参考这里:http://documentcloud.github.com/backbone/#Collection-comparator

第二个是获取完成任务数目时调用的this.filter 这个函数,它是underscore的内置函数,作用是遍历当前对象,然后过滤出对象中指定内容为True的对象,并将这些对象放到数组中返回。参考文档:http://documentcloud.github.com/underscore/#filter

第三个是获取未完成任务数据是调用的 this.without.apply(this, this.done())这个函数,without也是underscore里面的函数。而后面的那个apply是javascript的内置函数,作用是把当前的上下文传入到函数中。这段代码的意思其实就是从this(也就是collection中),排除已经完成的任务(this.done()),返回数组。参考:http://stackoverflow.com/questions/9137398/backbone-js-todo-collection-what-exactly-is-happening-in-this-return-stateme

这篇文章先分析到这里,下篇文章继续分析。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 9、backbone实例todos分析(三)总结

    在前两篇文章中,我们已经对这个todos的功能、数据模型以及各个模块的实现细节进行了分析,这篇文章我们要对前面的分析进行一个整合。前面我们说过,有了肉和菜,剩下...

    the5fire
  • 8、backbone实例todos分析(二)view的应用

    在上一篇文章中我们把todos这个实例的数据模型进行了简单的分析, 有关于数据模型的操作也都知道了。接着我们来看剩下的两个view的模型,以及它们对页面的操作。

    the5fire
  • 11、backbone实例todos扩展+web服务器

    在第7节的时候,我们对backbone的功能进行了分析,建立了web端的model。在本节中我们将对原先的todos进行扩展,使其能够将数据存到server端的...

    the5fire
  • backbone.js中的异常处理

    今天收到一个网友(暖阳下的懒猫)对backbone.js中的提问邮件,回答了下,觉得应该有其他人也会遇到这样的问题,于是征求了暖阳下的懒猫同意,把邮件发到这里,...

    the5fire
  • 15、backbone实战:webchat(四)server端开发

    关于django开发应用,相比大家都已经熟悉了,不熟悉的可以移步到这里:django使用

    the5fire
  • 12、backbone实战:web在线聊天室(backbone+django+sqlite)(一)功能分析

    在上一节中我们通过django搭建了webserver端,但是那毕竟是基于已有的todos代码来做的,总会觉得少了点什么。现在最后来从头开始做一个完整的实例,来...

    the5fire
  • 14、backbone实战:webchat(三)web端开发

    沿着上一篇文章的思路,我们先来把javascript模板建立起来,模板用来取代上一篇中html代码里的:

    the5fire
  • React---使用react脚手架搭建项目

      第二步,切换到想创项目的目录,使用命令:create-react-app hello-react

    半指温柔乐
  • Go语言开发RESTFul JSON API

    也许我们之前有使用过各种各样的API, 当我们遇到设计很糟糕的API的时候,简直感觉崩溃至极。希望通过本文之后,能对设计良好的RESTful API有一个初步认...

    李海彬
  • 笔记︱利用python + flask制作一个简易本地restful API

    原版官网:http://flask-restful.readthedocs.io/en/latest/ 中文官网:http://www.pythondoc....

    素质
  • Flask 扩展系列之 Flask-R

    Flask-RESTful是一个Flask的扩展,它增加了对快速构建REST APIs的支持。它是一种轻量级的抽象,可以与现有的ORM/库一起工作。Flask-...

    py3study
  • 【译】Graphql, gRPC和端对端类型检验

    StackPath最近发布了新的门户网站,它让用户可以一站式地配置我们所提供的服务(CDN,WAF, DNS以及Monitoring)。这个项目涉及到整合不同的...

    腾讯IVWEB团队
  • Vue.js-列表渲染 原

    我们用v-for指令根据一组数组的选项列表进行渲染,v-for指令需要以item in items形式的特殊语法,items是源数据数组并且item是数组元素迭...

    tianyawhl
  • Python的Flask框架开发RESTful API

    运行python app.py,Flask自带的Server在端口5000上监听:

    测试开发社区
  • [OHIF-Viewers]医疗数字阅片-医学影像-Module: Panel-自定义面板-中二-Redux&react-redux状态管理详解

    英文原版 https://redux.js.org/ 中文 https://www.redux.org.cn/

    landv
  • 如何优雅的设计 React 组件

    如今的 Web 前端已被 React、Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式。那么,为什么大家会觉...

    iKcamp
  • 如何优雅的设计 React 组件

    作者:晓冬 本文原创,转载请注明作者及出处 如今的 Web 前端已被 React、Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然...

    iKcamp
  • Redux(一):基本概念

    React是一个单向数据流的view层框架,单向数据流、组件化、生命周期是其特点。在React组件关系中,组件状态由自己管理,父子组件通过props传递;兄弟组...

    Ashen
  • Reflux系列01:异步操作经验小结

    本文作者:IMWeb 陈映平 原文出处:IMWeb社区 未经同意,禁止转载 写在前面 在实际项目中,应用往往充斥着大量的异步操作,如ajax请求,定时...

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券