zoukankan      html  css  js  c++  java
  • Todo&Rocket

    Todo是怎么实现的?

    前面两篇博客分别介绍了MVC和Backbone.js的逻辑,但是实战获真知,在来一篇来显示下Todo是怎么通过Backbone.js连接起来的。

    忽略掉所有的代码,我们只是打开todos.js。

    先从整天上看,整个代码中有以下几个类,

    Model:Todo

    Collection: TodoList

    View: TodoView, AppView.

    页面中还有一个比较奇怪的符号,你也许需要注意,

    看到这里,我们大概懂了这些代码是来做什么的了,下面就可以去细看各个类中具体做了哪些工作,从上篇博客中我们知道,Backbone.js也是用事件来驱动的,所以我们直接去看两个View类中的事件处理函数,

    AppView:

     

    第一个事件是处理了输入框中的回车事件,第二个函数是处理了清楚所有Todo事件,第三个函数是处理了选择所有的Todo的事件。

     

    在转向另外一个TodoView,我们可以看到events中分别注册了选中单选框事件,编辑,删除,回车后完成编辑,停止编辑事件。

    现在我们可以将目光转向Model了,Model十分简单,只有一个保存数据到localstorage的操作。

    回想我们对Backbone.js的介绍,Backbone.js是怎么连接起来的呢?View来处理对事件的相应并把数据传送给Model,Model处理完成后去通过View去调用它的render函数来渲染对应的元素。这下整个页面的逻辑就豁然开朗了,前面还提到了模板,模板是来做什么呢?这里的模板和Asp.net的模板有几分类似,不过这里的模板看上去更加小巧下,他只是页面上一个很小的元素。看起来很神奇吧。

    ROCKET框架学习

    Rocket是一个基于Backbone.js的webapp开发框架,在他的介绍文档中总结了Rocket的一系列优点:

    化繁为简: 分而治之的控制模型,提供一种MVC分解模型,将复杂应用逻辑分解成树状控制结构,每个控制节点粒度(代码规模)适中。

    并行开发:满足并行开发需求,使SPA程序多人合作开发成为可能。

    有章可循:支持一系列的规范和流程,使开发更加顺手,利于功能模块的复用和后期维护。

    快速开发:基于框架进行webapp开发,节省重复造轮子的时间,丰富的脚手架帮助工程师迅速搭建webapp产品。

    既然Rocket有这么炫目的优点,我们倒真有必要去看下这个东西到底是什么样子。打开HelloRocket的页面,我们的第一反应是这个是用来做网页PPT的那货吧。还是先不要关心细节而是打开它主要js代码的实现,我们看到我们熟悉的Backbone.js的身影。还记得前一篇博客介绍的么?Backbone.js有两套系统,一个是Model, View,你可以在Todo中看到他们大放异彩,另外一套是router, history,后者可要在Rocket中大显身手了。Rocket对URL上的页面链接进行了封装,并加入一些绚丽的动画效果,于是你就看到HelloRocket的Slide效果了。

     -----------------------------------

     Xu Wang

     Tsinghua, School of Software

     Email:darenwang11@gmail.com

     QQ:2290826962 

  • 相关阅读:
    编译原理-确定有穷自动机(deterministic finite automata ,DFA)
    编译原理-正规式和正规集
    linux之sed用法
    Linux 中find命令
    运维工作应该掌握哪些技能?
    Last_SQL_Error: Error 'Can't drop database
    关于在centos下安装python3.7.0以上版本时报错ModuleNotFoundError: No module named '_ctypes'的解决办法
    python3.7安装, 解决pip is configured with locations that require TLS/SSL问题
    Linux date命令的用法(转)
    MySQL回滚到某一时刻数据的方法
  • 原文地址:https://www.cnblogs.com/juicygroup/p/3356266.html
Copyright © 2011-2022 走看看