经历一段自我修炼,终于领悟到Backbone.js的关键知识点,也发现了原来MVC可以在前端这样梦幻的发挥,Backbone.js确实是一个很有魅力的前端MVC框架。

练就一门技术,需要有扎实的功底,从这点,开始认真研究Backbone.js的一些最基本的操作,以便我日后学习能更上一层楼。那就切入主题:

什么是mvc?

简单的理解就是:模型(models),视图(views),控制器(collections)。通过视图把浏览器的网址传给控制器,控制器对网址进行解析,然后去模型层获取数据,模型层将数据放回给控制器,接着控制器在放回给视图。

MVC思想

  • 就是把模型和视图分离,通过控制器来连接它们

在前端没有mvc框架出来之前,对模型和视图的分离操作是很难办到的,有了像Backbone.js这样的框架出来之后,我们也可以像后台的MVC一样对视图和模型层进行分离操作。

Backbone模块

  1. Events:事件驱动方法
  2. Model:数据模型
  3. Collection:模型集合器
  4. Router:路由器
  5. History:开启历史管理
  6. Sync:同步服务器方式
  7. View:视图

先从模型开始

  模型

        创建模型对象 直接new Backbone.Model()简单易懂

var model = new Backbone.Model();

var mode2 = new Backbone.Model({'name':'hello'});

模型集合

         创建模型集合对象

var modelList = new Backbone.Collection();

往模型集合里添加模型数据

modelList.add(model);

modelList.add(mode2);

模型操作

在Backbone.js提供了模型操作的方法:列举几个常用的

extend

             (要想创建自己的模型类型,就用此方法进行扩展,在这里可以初始化属性,也可以自定义函数)

var m = Backbone.Model.extend({
                        defaults:{
                               name:'klm'
                        },
                        a:function(){
                               alert(123);
                        }
                    });

set

            (向模型设置一个或多个散列属性)

var model = Backbone.Model();

model.set('name','hello');

get

            (获取模型里的数据)

model.get('name');

继承

               首先我们要有一个父类,和一个子类 才能构成继承关系

父类对象:

var fu = Backbone.Model.extend({
                                              defaults:{
                                                       name:'klm'
                                               },
                                              a:function(){
                                                      alert(123);
                                              }
                                });

在这个fu对象中封装了一个属性name和一个a函数

子类对象:

var zi =  Backbone.Model.extend();

想让子类对象拥有父类的属性和方法,操作如下:

var zi = new fu;
                               zi.a();
                               zi.get('name')

这样就实现继承方式。

其实学什么只要用心什么都好学! 今天就到这,继续激情的前进着!

Backbone.js学习之二的更多相关文章

  1. 【转】Backbone.js学习笔记(二)细说MVC

    文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...

  2. Backbone.js学习之一

    昨天一个我崇拜的朋友,徐飞送我一本名为<Backbone.js实战>书,让我心中狂喜,于是带着这份浓厚的兴趣,开始研究Backbone.js之路. 打开这本书的第一句话就很有哲理,“授人以 ...

  3. backbone.js学习笔记

    之前只接触过jQuery,看来Backbone是除了jQuery的第二大JS框架... backbone到底是个啥? 其实刚开始我也不知道=_=,我是这周二才听说居然还有这么个框架...于是乎我的导师 ...

  4. Backbone.js学习之初识hello-world

    说了好久好久要学习Backbone.js,现在终于下定决心开始学习了.然后呢,就根据我的学习进度在这里做个简单的记录,方便新人,也方便我自己以后回忆. 准备 用bower下载这几个库或框架也是醉了.. ...

  5. 【转】Backbone.js学习笔记(一)

    文章转自: http://segmentfault.com/a/1190000002386651 基本概念 前言 昨天开始学Backbone.js,写篇笔记记录一下吧,一直对MVC模式挺好奇的,也对j ...

  6. Backbone.js学习之Backbone.View(视图)

    Backbone.js为复杂WEB应用程序提供模型(models).集合(collections).视图(views)的结构.其中模型用于绑定键值数据和自定义事件:集合附有可枚举函数的丰富API: 视 ...

  7. Backbone.js学习之View

    千呼万唤始出来,终于到最后一个要点View了.照旧,先来一睹官方文档: Backbone views are almost more convention than they are code - t ...

  8. 【转】require.js学习笔记(二)

    require.js遵循AMD规范,通过define定义模块,require异步加载模块,一个js文件即一个模块. 一.模块加载require1.加载符合AMD规范模块 HTML: <scrip ...

  9. Backbone.js学习之旅(一)

    前言 刚到粑粑公司,就学习各种框架,进行各种开发,为了纪念挥泪的青春,只好写下…… 希望能合您胃口^_^!!! The First(文件准备) backobone 强制依赖于 underscore.j ...

随机推荐

  1. 大数计算_BigNum优化_加减乘除乘方取余_带注释_数组

    #include <iostream> #include <algorithm> #include <cstring> #include <cstdlib&g ...

  2. How To Use Proguard in Android APP

    在Android开发完成即将发布给用户使用时,还有最后重要的一步:代码混淆,这时候,Proguard就派上用场了,大家谁也不想辛辛苦苦写的代码太容易被别人反编译过来,而Proguard就是帮我们实现这 ...

  3. openfire 服务器名称:后面的黄色叹号

    然后点击重新获取证书,然后重新启动服务,问题解决!

  4. MySQL 监控

    •Table_locks_immediate  The number of times that a request for a table lock could be granted immedia ...

  5. poj 3278:Catch That Cow(简单一维广搜)

    Catch That Cow Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 45648   Accepted: 14310 ...

  6. POJ1351 Number of Locks(数学)

    截至写博客为止,貌似这是网上第一个采用数学公式来处理的. 网上的题解都是DFS或是动态规划,但感觉可以推公式直接用数学的方法处理,想了好久,终于推出公式. 题意:一个长度为n的由数字1,2,3,4 组 ...

  7. 对服务器的ftp端口进行修改

    对服务器的ftp端口进行了修改,把21端口改了,比如221端口,就这样用221连接的时候,连接登录成功,但打不开目录,为何,总结如下: 1.完成一个FTP的传输过程不仅仅只需要21一个端口,而是2个端 ...

  8. SOLR+LUCENE错误

    java.lang.NoClassDefFoundError: org/apache/lucene/analysis/synonym/SynonymFilter 该错误发生在自定义SOLR服务器时,原 ...

  9. JqueryEasyUI 解决IE下datagrid无法刷新的问题 分类: JavaScript JqueryEasyUI 2014-09-20 10:05 510人阅读 评论(1) 收藏

    问题描述: 在使用JqueryEasyUI 时,发现在IE下$('#table').datagrid('reload');无效,数据并没有被刷新,究其原因,是因为刷新时,datagrid请求的url没 ...

  10. wp8 入门到精通 数据库更新字段(一)

    public class UserInfoDB : BaseDB { public UserInfoDB() : base(@"Data Source=isostore:\MakeLove\ ...