最轻量级的前端Mvc框架backbone
最轻量级的前端Mvc框架backbone依赖最轻量级的库understore
backbone并非将前端再次切分为mvc，而是分为了七大模块，分别是：Events、Model、Collection、Router、History、Sync、View
一个Model对应一个View,如果是多个Model时，则进化为一个Collection对应一个View
Sync负责与服务器端进行交互
官方网站
http://backbonejs.org/
github地址
https://github.com/jashkenas/backbone
demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdn.bootcss.com/backbone.js/1.3.3/backbone-min.js"></script>
</head>
<body>
<script type="text/javascript">
/**
* 知识点：实例化模块
*/
// var model = new Backbone.Model();
// var Collection = new Backbone.Collection();
// var view = new Backbone.View();
/**
* 知识点：get/set
* Model赋值
*/
// var model = new Backbone.Model();
// model.set("name","Lee");
// alert(model.get("name"));
/**
* 知识点：Model转化为Collection
* Model实例化、初始化时快速赋值
*/
// var model_1 = new Backbone.Model({'name':'Lee'});
// var model_2 = new Backbone.Model({'name':'Mp'});
// var Collection = new Backbone.Collection();
// Collection.add(model_1);
// Collection.add(model_2);
// alert(JSON.stringify(Collection));
/**
* 知识点：extent
* 继承？Model中定义实例方法和静态方法
*/
// var M = Backbone.Model.extend
// (
// {
// //第一个参数是一个对象，用于定义实例方法
// aaa:function(){
// alert("aaa");
// }
// },
// {
// //第二个参数是一个对象，用于定义静态方法
// bbb:function(){
// alert("bbb");
// }
// }
// );
// var _m = new M();
// _m.aaa(); //调用实例方法
// M.bbb(); //调用静态方法
/**
* 知识点：defaults
* Model初始化变量（可以初始化方法，但暂时不知道如何调用）
*/
// var M = Backbone.Model.extend({
// defaults:{
// name:"Lee"
// }
// })
// var m = new M();
// alert(m.get("name"));
/**
* 知识点：initialize/on/change:name
* 构造函数、事件监听，指定对象事件监听
*/
// var M = Backbone.Model.extend({
// defaults:{
// name:"Lee"
// },
// //构造函数
// initialize : function(){
// //绑定事件：当model的值发生改变时
// //如果你想指定某一个值发生改变，可以'change'改为：'change:name'
// this.on('change:name',function(){
// alert("change");
// })
// }
// })
// var m = new M();
// m.set("name","Mp");
/**
* （重难点）
* 知识点：View、ListenTo
* Model和View相结合
* ListenTo 和 on的区别就在于第一个参数this.model，它将作为第三个参数this.show的参数
* 根据场景，这个model实质上是被改变的name
*/
// var M = Backbone.Model.extend({
// defaults:{
// name:"Lee"
// }
// });
// var V = Backbone.View.extend({
// initialize:function(){
// this.listenTo(this.model,'change',this.show);
// },
// show:function(model){
// $("body").append('<div>' + model.get("name") + '</div>');
// }
// });
// var m = new M();
// var v = new V({model:m});
// m.set("name","Mp");
/**
* 知识点：sync、save
* 创建和更新，但暂时不知道怎么和服务器交互
*/
// Backbone.sync = function(method,model){
// alert(method + ":" + JSON.stringify(model));
// model.set("id",1); //这个model == m，当save发生时、会检测model有没有id这个属性，
// //没有就是create事件，如果有就是update事件.所以第一次会是create，第二次会是update
// //所以如果想一开始就是update,可以直接在外部使用m.set("id",1);
// };
// var M = Backbone.Model.extend({
// defaults:{
// name:"Lee"
// },
// url:"/user"
// });
// var m = new M();
// m.save();
// m.save({name:'Mp'});
/**
* 知识点： Collection.fetch
* 读取,暂时不知道如何和服务器交互
*/
// Backbone.sync = function(method,model){
// //如果是fetch的话就是read事件
// alert(method + ":" + JSON.stringify(model));
// };
// var C = Backbone.Collection.extend({
// initialize:function(){
// this.on('reset',function(){
// alert("123");
// });
// },
// url:'/user'
// });
// var c = new C();
// c.fetch();
/**
* 知识点：Router,routes
* 路由，学习hash配置和函数、参数等
*/
// var R = Backbone.Router.extend({
// routes:{
// "help": "help", //index.html#help
// "search/:query": "search", //index.html#search/asd
// "search/:query/p:page": "search2" //index.html#search/asd/p1
// },
// help:function(){alert("help")},
// search:function(query){alert(query)},
// search2:function(query,page){alert(query + "~~~~~" + page)}
// })
// var r = new R();
// Backbone.history.start();
/**
* 知识点：View 的 el,events
*/
// var V = Backbone.View.extend({
// el:$("body"),
// events:{
// 'click #myinput' : 'aaa',
// 'mouseover li':'bbb'
// },
// aaa:function(){alert("123")},
// bbb:function(){alert("456")}
// })
// var v = new V();
</script>
<input type="button" id="myinput" value='按钮'></input>
<ul>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
</body>
</html>
最轻量级的前端Mvc框架backbone的更多相关文章
- 前端MVC框架Backbone 1.1.0源码分析(一)
前言 如何定义库与框架 前端的辅助工具太多太多了,那么我们是如何定义库与框架? jQuery是目前用的最广的库了,但是整体来讲jQuery目的性很也明确针对“DOM操作”,当然自己写一个原生态方法也能 ...
- 前端MVC框架Backbone 1.1.0源码分析系列
Backbone.js 是一个在JavaScript环境下的 模型-视图-控制器 (MVC) 框架.任何接触较大规模项目的开发人员一定会苦恼于各种琐碎的事件回调逻辑.以及金字塔般的代码.而且,在传统的 ...
- 前端mvc框架backbone.js入门[转]
原文地址:http://www.cnblogs.com/zhjh256/p/6083618.html 关于backbone.js的优缺点,这里就不详谈了,网上关于这方面的讨论很多了,而且各种框架之所以 ...
- 前端mvc框架backbone.js入门
关于backbone.js的优缺点,这里就不详谈了,网上关于这方面的讨论很多了,而且各种框架之所以长久生存,通常都是有其特定优势和擅长点的. 使用backbone.js作为前端框架的应用通常都是htm ...
- 前端MVC框架Backbone 1.1.0源码分析(二) - 模型
模型是什么? Models are the heart of any JavaScript application, containing the interactive data as well a ...
- Web前端MVC框架的意义分析
前言: Web前端开发是Web技术发展中的一个重要组成部分,在传统的前端开发中由于外界因素的影响导致其开发形式呈现出简单化的特点,即以页面为主体来展示界面中的信息.然而随着科学技术的不断进步,Web前 ...
- 前端MVC框架、类库、UI框架选择
CSS预处理器sass(基于Ruby服务端版)less(客户端版:基于js; 服务端版:基于nodejs) 前端UI框架JqueryMiniUI: http://www.miniui.com/(适用于 ...
- Web前端MVC框架
MVC: 模型层(model).视图层(view).控制层(controller) Model:即数据模型,用来包装和应用程序的业务逻辑相关的数据或者对数据进行处理,模型可以直接访问数据. View: ...
- 前端MVC框架对比
首先要特别说明一下,作者认为以下四个功能是十分重要的: UI Bindings(UI绑定):作者想说的不仅仅是模板,而是想谈一种在底层模型出现变化时,视图层能够自动相应地更新的陈述性方法.一旦您用过了 ...
随机推荐
- HDU 5652 India and China Origins（经典并查集）
特别经典的一个题,还有一种方法就是二分+bfs 题意:空间内n*m个点,每个点是0或者1,0代表此点可以走,1代表不能走.接着经过q年,每年一个坐标表示此点不能走.问哪年开始图上不能出现最上边不能到达 ...
- Android学习系列(39)--Android主题和样式之系统篇（上）
[基于最新的Android4.4的源码分析] 每家公司或者每个移动团队无不想开发出一套自己的UI框架,融入自己的设计和特性,这必然会去修改android的ui.所以,学习和理解android的UI设计 ...
- matlab坐标外围背景变白色
set(gcf,'Color',[1,1,1]) 默认图片是这样的: 出图之前使用命令,外围变白后效果如下:
- 不同java 版本的新功能
Java 5 泛型 自动装箱/拆箱 增强的for 类型安全的枚举 可变参数 静态导入 Annotation Concurrent Package Java 6 Web Service 支持Annota ...
- POJ3308 Paratroopers（最小割/二分图最小点权覆盖）
把入侵者看作边,每一行每一列都是点,选取某一行某一列都有费用,这样问题就是选总权最小的点集覆盖所有边,就是最小点权覆盖. 此外,题目的总花费是所有费用的乘积,这时有个技巧,就是取对数,把乘法变为加法运 ...
- C#调用本机摄像头
这段时间一个小项目中需要调用本机的摄像头进行拍照,网上搜集了一些资料以及解决的一些小问题,在此记录以便后续使用. 硬件环境:联想C360一体机,自带摄像头 编写环境:vs2010 语言:C# WPF ...
- Struts2上传大小限制
Struts中报错 the request was rejected because its size (***) exceeds the configured maximum (2097152) 最 ...
- zookeeper清除日志文件工具
zookeeper运行时间长了以后,日志会成为一个比较大的问题.比如作者压力测试hbase一周以后,zookeeper日志文件达到了10G的规模.由于zookeeper日志文件不能随意删除,因为一个长 ...
- BZOJ 3339 & 莫队+"所谓的暴力"
题意: 给一段数字序列,求一段区间内未出现的最小自然数. SOL: 框架显然用莫队.因为它兹瓷离线. 然而在统计上我打了线段树...用&维护的结点...400w的线段树...然后二分查找... ...
- Haskell 笔记 ③
①循环?NO!请递归思考问题! 手艹一个求列表中最大值代码,C语言中习惯性for扫一下比较出最大值.但是可以用递归! maximum'::(Ord a)=>[a]->a maximum' ...