最轻量级的前端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的更多相关文章

  1. 前端MVC框架Backbone 1.1.0源码分析(一)

    前言 如何定义库与框架 前端的辅助工具太多太多了,那么我们是如何定义库与框架? jQuery是目前用的最广的库了,但是整体来讲jQuery目的性很也明确针对“DOM操作”,当然自己写一个原生态方法也能 ...

  2. 前端MVC框架Backbone 1.1.0源码分析系列

    Backbone.js 是一个在JavaScript环境下的 模型-视图-控制器 (MVC) 框架.任何接触较大规模项目的开发人员一定会苦恼于各种琐碎的事件回调逻辑.以及金字塔般的代码.而且,在传统的 ...

  3. 前端mvc框架backbone.js入门[转]

    原文地址:http://www.cnblogs.com/zhjh256/p/6083618.html 关于backbone.js的优缺点,这里就不详谈了,网上关于这方面的讨论很多了,而且各种框架之所以 ...

  4. 前端mvc框架backbone.js入门

    关于backbone.js的优缺点,这里就不详谈了,网上关于这方面的讨论很多了,而且各种框架之所以长久生存,通常都是有其特定优势和擅长点的. 使用backbone.js作为前端框架的应用通常都是htm ...

  5. 前端MVC框架Backbone 1.1.0源码分析(二) - 模型

    模型是什么? Models are the heart of any JavaScript application, containing the interactive data as well a ...

  6. Web前端MVC框架的意义分析

    前言: Web前端开发是Web技术发展中的一个重要组成部分,在传统的前端开发中由于外界因素的影响导致其开发形式呈现出简单化的特点,即以页面为主体来展示界面中的信息.然而随着科学技术的不断进步,Web前 ...

  7. 前端MVC框架、类库、UI框架选择

    CSS预处理器sass(基于Ruby服务端版)less(客户端版:基于js; 服务端版:基于nodejs) 前端UI框架JqueryMiniUI: http://www.miniui.com/(适用于 ...

  8. Web前端MVC框架

    MVC: 模型层(model).视图层(view).控制层(controller) Model:即数据模型,用来包装和应用程序的业务逻辑相关的数据或者对数据进行处理,模型可以直接访问数据. View: ...

  9. 前端MVC框架对比

    首先要特别说明一下,作者认为以下四个功能是十分重要的: UI Bindings(UI绑定):作者想说的不仅仅是模板,而是想谈一种在底层模型出现变化时,视图层能够自动相应地更新的陈述性方法.一旦您用过了 ...

随机推荐

  1. mysql数据库管理工具sqlyog在首选项里可以设置默认查询分页条数和字体，改写关键字大小写

    sqlyog设置一直习惯用sqlyog来管理mysql数据库,但有三个地方用得不是很爽:1.默认查询条数只有1000条经常需要勾选掉重新查询.2.自动替换关键字大小写,有时候字段名为关键字的搞成大写的 ...

  2. POJ 1509 最小表示法

    题目链接:http://poj.org/problem?id=1509 题意:给定一个字符串,求一个起点使字符串从该起点起的字符串字典序最小[题目的字符串起点从1开始] 思路:最小表示法模板题 #de ...

  3. bpl 包的编写和引用

    转载:http://www.cnblogs.com/gxch/archive/2011/04/23/bpl.html 为什么要使用包? 答案很简单:因为包的功能强大.设计期包(design-time ...

  4. 【noip暑假tarjan专题】

    %%%奎老师 A:傻逼缩点...傻逼编译器卡我next... B:就是这道奎老师没讲清楚的题,明明小朋友们都一A嘛,,,明明细节有很多嘛,,,怎么都这么熟练啊. C:本质还是B,换了个马甲而已. D: ...

  5. EF框架step by step(1)—Database-First

    ADO.NET Entity Framework 是微软以 ADO.NET 为基础所发展出来的对象关系对应 (O/R Mapping) 解决方案,现已经包含在 Visual Studio 2008 S ...

  6. .htaccess 的写法

    RewriteCond RewriteRule 记录下现在我会的: RewriteEngine On#RewriteRule ^(.*)/(.*)/$ index.php?m=index&c= ...

  7. ACM 图像有用区域

    图像有用区域 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 “ACKing”同学以前做一个图像处理的项目时,遇到了一个问题,他需要摘取出图片中某个黑色线圏成的区域以 ...

  8. [Cocos2D-x For WP8]Tile Map创建地图

    在Cocos2D-x里面创建Tile Map地图是需要用到.tmx的地图文件的,那么创建Tile Map地图文件,我们可以通过地图编辑器来创建,地图编辑器可以在网站:http://www.mapedi ...

  9. 如何伪装成为一名前端（JS方向）

    作为一个菜鸟级别的.NET开发者,在连服务器都没搞定的情况下,要研究前端,这是在扯淡,不过,迫于工作的需要,时常需要去前端打杂,所以经常伪装成为一名前端,有时候竟产生错觉,去应聘Y一份前端work吧. ...

  10. 【wikioi】1041 Car的旅行路线

    题目链接 算法:最短路(数据弱,Floyd也能过) 惨痛的教训:此题我至少提交了20次,原因在于= =太草率和粗心了,看到那个多少组数据以为是城市的数量,导致数组开得小小的= =.(对不起,wikio ...