经历一段自我修炼,终于领悟到Backbone.js的关键知识点,也发现了原来MVC可以在前端这样梦幻的发挥,Backbone.js确实是一个很有魅力的前端MVC框架。
练就一门技术,需要有扎实的功底,从这点,开始认真研究Backbone.js的一些最基本的操作,以便我日后学习能更上一层楼。那就切入主题:
什么是mvc?
简单的理解就是:模型(models),视图(views),控制器(collections)。通过视图把浏览器的网址传给控制器,控制器对网址进行解析,然后去模型层获取数据,模型层将数据放回给控制器,接着控制器在放回给视图。
MVC思想
- 就是把模型和视图分离,通过控制器来连接它们
在前端没有mvc框架出来之前,对模型和视图的分离操作是很难办到的,有了像Backbone.js这样的框架出来之后,我们也可以像后台的MVC一样对视图和模型层进行分离操作。
Backbone模块
- Events:事件驱动方法
- Model:数据模型
- Collection:模型集合器
- Router:路由器
- History:开启历史管理
- Sync:同步服务器方式
- 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学习之二的更多相关文章
-
【转】Backbone.js学习笔记(二)细说MVC
文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...
-
Backbone.js学习之一
昨天一个我崇拜的朋友,徐飞送我一本名为<Backbone.js实战>书,让我心中狂喜,于是带着这份浓厚的兴趣,开始研究Backbone.js之路. 打开这本书的第一句话就很有哲理,“授人以 ...
-
backbone.js学习笔记
之前只接触过jQuery,看来Backbone是除了jQuery的第二大JS框架... backbone到底是个啥? 其实刚开始我也不知道=_=,我是这周二才听说居然还有这么个框架...于是乎我的导师 ...
-
Backbone.js学习之初识hello-world
说了好久好久要学习Backbone.js,现在终于下定决心开始学习了.然后呢,就根据我的学习进度在这里做个简单的记录,方便新人,也方便我自己以后回忆. 准备 用bower下载这几个库或框架也是醉了.. ...
-
【转】Backbone.js学习笔记(一)
文章转自: http://segmentfault.com/a/1190000002386651 基本概念 前言 昨天开始学Backbone.js,写篇笔记记录一下吧,一直对MVC模式挺好奇的,也对j ...
-
Backbone.js学习之Backbone.View(视图)
Backbone.js为复杂WEB应用程序提供模型(models).集合(collections).视图(views)的结构.其中模型用于绑定键值数据和自定义事件:集合附有可枚举函数的丰富API: 视 ...
-
Backbone.js学习之View
千呼万唤始出来,终于到最后一个要点View了.照旧,先来一睹官方文档: Backbone views are almost more convention than they are code - t ...
-
【转】require.js学习笔记(二)
require.js遵循AMD规范,通过define定义模块,require异步加载模块,一个js文件即一个模块. 一.模块加载require1.加载符合AMD规范模块 HTML: <scrip ...
-
Backbone.js学习之旅(一)
前言 刚到粑粑公司,就学习各种框架,进行各种开发,为了纪念挥泪的青春,只好写下…… 希望能合您胃口^_^!!! The First(文件准备) backobone 强制依赖于 underscore.j ...
随机推荐
-
阿里中间件——diamond
一.前言 最近工作不忙闲来无事,仔细分析了公司整个项目架构,发现用到了很多阿里巴巴集团开源的框架,今天要介绍的是中间件diamond. 二.diamond学习笔记 1.diamond简介 diamon ...
-
Xcode 的正确打开方式——Debugging(转载)
Xcode 的正确打开方式——Debugging 程序员日常开发中有大量时间都会花费在 debug 上,从事 iOS 开发不可避免地需要使用 Xcode.这篇博客就主要介绍了 Xcode 中几种能 ...
-
苹果iphone4s完美越狱后破解4g网络方法
苹果iphone4s完美越狱后破解4g网络方法教程 作者:佚名 字体:[增加 减小] 来源:互联网 时间:01-15 10:07:25我要评论 自从港版iPhone5s/c能够破解移动4G网络后, i ...
-
《A First Course in Probability》-chape4-离散型随机变量-几种典型分布列
超几何分布: 超几何分布基于这样一个模型,一个坛子中有N个球,其中m个白球,N-m个黑球,从中随机取n(不放回),令X表示取出来的白球数,那么: 我们称随机变量X满足参数为(n,m,M)的超几何分布. ...
-
Android源码编译过程之九鼎开发板
build_kernel() { # 进入源码顶层目录 cd ${BS_DIR_KERNEL} || # 编译配置文件 make ${BS_CONFIG_KERNEL} ARCH=arm CROSS_ ...
-
语义化标签SEO
语义标签 title 和 h1 的区别,我的理解是: title 是整个网页的标题,突出整个网站的内容,H1 突出的是一篇文章的内容. b 与 strong 的区别,b只是样式的加粗,strong 是 ...
-
php 实现简单购物车
今天在练习购物车以及提交订单,写的有点头晕,顺便也整理一下,这个购物车相对来说比较简单,用于短暂存储,并没有存储到数据库, 购物车对于爱网购的人来说简直是熟悉的不能再熟悉了,在写购物车之前,我们首先要 ...
-
TensorFlow at Google I/O 2018
2018 google I/O 上关于TF新功能以及TF技术生态方面的一些总结,更具体的内容可以去看2018 tfdev summit,这里面的内容会更加详细丰富.总的来说TensorFlow在庞大的 ...
-
caffe-windows环境配置(github上官方BVLC/caffe的推荐配置方法详解)
[转载来的文章:如有侵权,请联系我!我将马上删除!] 首先声明一下,如标题,本教程是caffe在windows系统上的配置方法,而且是github上官方BVLC/caffe目前推荐的配置方法,并不是使 ...
-
jetty在eclipse和Idea中的使用
eclipse中的配置 下载 http://www.eclipse.org/jetty/download.html 下载保存到特定的位置,解压. 整合到eclipse中 这里通过在eclipse中安装 ...