- 浏览: 1150350 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (224)
- Web UI (11)
- Dynamic Language (7)
- Framework (9)
- Note & Try (17)
- JavaScript (38)
- Ant/Gant/Maven (2)
- Database (5)
- Software Engineering (13)
- Career (29)
- Team Management (5)
- Performance (12)
- Algorithm (17)
- News & Commets (23)
- System Design (17)
- OO Design (8)
- API Design (3)
- Programming Paradigms (8)
- Asynchronous Programming (5)
- Architecture (6)
最新评论
-
a2320064997:
请问博主,排序的动图是怎么做出来的?
排序算法一览(二):归并类排序、分布类排序和混合类排序 -
你的微笑我得阳光:
试试验证码
reCAPTCHA项目 -
mack:
一般采用json
对象转换的问题 -
fly_hyp:
我也做了一个中文编程软件,叫趣智思成
一些中文编程语言 -
facingSun:
受教了
前端解耦的一个最简单示例
注:教程请参见这里(本文有很多内容都是从这里翻译的),官方网站在这里;综合例子参见这里。
Backbone.js是一个前端MVC框架,model能够绑定键值对和自定义事件,集合具备可枚举方法的富API,视图具备事件处理能力,并且可以通过RESTful的JSON接口和你已有的API通信。
View
Backbone里的视图就是用来反映数据模型的,可以监听事件并响应,通过利用Underscore.js(这个真是一个牛逼哄哄的东西,自己看),还支持了JavaScript模板技术,把数据和模板分离开。
“el”熟悉就是浏览器创建的一个DOM对象的引用,是供backbone渲染的画布,每一个view都会有这样一个属性,如果不存在,backbone就会自己定义一个空的div来作为el,现在把"el"属性定义到div#search_container,看:
<div id="search_container"></div> <script type="text/javascript"> SearchView = Backbone.View.extend({ initialize: function(){ this.render(); }, render: function(){ //Pass variables in using Underscore.js Template var variables = { search_label: "My Search" }; // Compile the template using underscore var template = _.template( $("#search_template").html(), variables ); // Load the compiled HTML into the Backbone "el" this.el.html( template ); }, events: { "click input[type=button]": "doSearch" }, doSearch: function( event ){ // Button clicked, you can access the element that was clicked with event.currentTarget alert( "Search for " + $("#search_input").val() ); } }); var search_view = new SearchView({ el: $("#search_container") }); </script> <script type="text/template" id="search_template"> <!-- Access template variables with <%= %> --> <label><%= search_label %></label> <input type="text" id="search_input" /> <input type="button" id="search_button" value="Search" /> </script>
上面的代码说明一下:
- render方法就是渲染页面的方法;
- View层的事件绑定也支持了:
"click input[type=button]": "doSearch"; - 对于模板的使用,先定义这个模板:
<script type="text/template" id="search_template">……</script>
然后模板+数据来生成结果:
var template = _.template( $("#search_template").html(), variables );
然后再把结果渲染到画布上:
this.el.html( template );
Model
Model是JavaScript应用的核心,在这里它包括了包含大量逻辑的数据交互、转换、校验,属性的计算和访问控制:
Person = Backbone.Model.extend({ defaults: { name: 'Fetus', age: 0, children: [] }, initialize: function(){ alert("Welcome to this world"); }, adopt: function( newChildsName ){ var children_array = this.get("children"); children_array.push( newChildsName ); this.set({ children: children_array }); } }); var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']}); person.adopt('John Resig'); var children = person.get("children"); // ['Ryan', 'John Resig']
简单说明一下:
- default是用来定义Model的属性的默认取值的;
- 设值(setter)可以这样写:
set({ children: children_array }); - 而取值(getter)则这样写:
person.get("children")。
再来看看事件绑定的写法(看下面的bind方法的调用)和属性校验的写法(validate方法):
Person = Backbone.Model.extend({ // If you return a string from the validate function, // Backbone will throw an error validate: function( attributes ){ if( attributes.age < 0 && attributes.name != "Dr Manhatten" ){ return "You can't be negative years old"; } }, initialize: function(){ alert("Welcome to this world"); this.bind("error", function(model, error){ // We have received an error, log it, alert it or forget it :) alert( error ); }); } });
Router
Router以前是被backbone称为Controller的,它使用URL的hash来做地址映射。主要的写法有“*”和“:”两种:
var AppRouter = Backbone.Router.extend({ routes: { "/posts/:id/:action": "getPost", "*actions": "defaultRoute" // Backbone will try match the route above first }, getPost: function( id, action ) { // Note the variable in the route definition being passed in here alert( "Get post number " + id ); }, defaultRoute: function( actions ){ alert( actions ); } }); // Instantiate the router var app_router = new AppRouter; // Start Backbone history a neccesary step for bookmarkable URL's Backbone.history.start();
稍微说明一下:
- 如果URL为http://example.com/#/posts/121/delete的话,那么:
"/posts/:id/:action"匹配上了,那么id="121",action="delete"这样的参数传到getPost方法里;
如果没匹配上,"121/delete"将作为参数传到defaultRoute方法里。 - 在创建好所有的router之后,一定要调用一下Backbone.history.start()方法来route你的URL。
Collection
Collection其实就是一组Model的有序集合。
var Song = Backbone.Model.extend({ defaults: { name: "Not specified", artist: "Not specified" }, initialize: function(){ console.log("Music is the answer"); } }); var Album = Backbone.Collection.extend({ model: Song }); var song1 = new Song({ name: "How Bizarre", artist: "OMC" }); var song2 = new Song({ name: "Sexual Healing", artist: "Marvin Gaye" }); var song3 = new Song({ name: "Talk It Over In Bed", artist: "OMC" }); var myAlbum = new Album([ song1, song2, song3]); console.log( myAlbum.models ); // [song1, song2, song3]
说明一下:
- 对象集合怎么放进去(比如数组形式),它就怎么管理:
var myAlbum = new Album([ song1, song2, song3]);
文章系本人原创,转载请注明作者和出处
评论
3 楼
有女未长成
2012-05-23
RayChase 写道
有女未长成 写道
没个示例下载吗???
期待中
期待中
文章的第一句话的链接里面有。
http://backbonetutorials.com/examples/modular-backbone/
谢谢,第一句里面的前两个链接都点过,鬼使神差的就这个链接没点……
2 楼
RayChase
2012-05-14
有女未长成 写道
没个示例下载吗???
期待中
期待中
文章的第一句话的链接里面有。
http://backbonetutorials.com/examples/modular-backbone/
1 楼
有女未长成
2012-05-14
没个示例下载吗???
期待中
期待中
发表评论
-
JavaScript 3D图表
2013-08-24 19:36 3072在说3D图表以前,首先要明确两个概念,一个是数据的维度,一个 ... -
几道容易出错的JavaScript题目
2013-07-07 10:34 2214下面这几道JavaScript题目大多来自于周五的一个小分享 ... -
JavaScript使用for循环时出现的问题
2013-05-26 00:36 1614这个问题的讨论最初来自公司内部邮件,我只是把这个问题的讨论内 ... -
DNS劫持
2013-04-30 13:59 2109想谈一谈这个话题是因为最近有一位朋友抱怨他的博客在某些用户某 ... -
你没有抓住Promises的要点
2013-04-21 20:52 2418注:这篇文章翻译自《You're Missing the P ... -
程序员,都去写一写前端代码吧
2013-01-19 01:16 2630你可以认为我是一个极 ... -
用JavaScript截图
2013-01-08 23:13 7585使用JavaScript截图,这里我要推荐两款开源组件: ... -
JQuery表格插件介绍:Flexigrid和DataTables
2012-12-27 11:35 8880JQuery的表格插件有很多。Flexigrid和Dat ... -
Flot介绍
2012-12-22 18:56 2307最近在项目里面要用到JavaScript来绘制图表,JQ ... -
Function Invocation Patterns
2012-11-04 17:46 1325今天看到微博上大家在讨论一个JavaScript的小问题 ... -
d3介绍
2012-10-31 00:17 2556D3.js是一个基于数据的操作文档的JavaScript ... -
Dart,你凭什么挑战JavaScript?
2012-09-26 08:46 5793不妨先来打量一下JavaScript。JavaScrip ... -
关于CommonJS
2012-03-26 00:37 17194老实说,之前我对CommonJS也是一无所知,直到不久前Nod ... -
同步、异步转化和任务执行
2012-01-24 22:23 4192正如动静是相对的概念,有了它们,世界才充满盎然生气;变和不变也 ... -
JavaScript实现继承的几种方式
2012-01-07 23:21 12342在这篇文章中,介绍了 ... -
JavaScript重构(十):强化对象封装和模块封装
2011-09-19 22:44 36011、类本身就是一种封装形式,先来看看最简单的封装,JavaSc ... -
JavaScript 的 delete 用法
2011-01-09 11:59 16991、 var o = {}; o.x = new Ob ... -
疯狂的跨域技术
2011-01-09 19:39 2474[转]疯狂的跨域技术 原帖地址:http://itgeeker ... -
服务器端JavaScript
2011-01-11 00:05 1315JSConf2010的重要议题之一:node.js。 不要觉 ... -
JSConf 2010 (一):介绍、Google Chrome Frame 和 GitHub
2011-01-12 00:15 1661一年一度的JSConf大会又召开,这是2010的官网 http ...
相关推荐
, 《backbone.js应用程序开发》详细介绍了如何使用backbone.js完成web应用开发。全书从了解mvc、spa和backbone.js的基本知识开始,然后着手构建3个示例应用程序;此外,backbone和grunt-bbb、jquery mobile等开发...
Backbone.js is a popular library to build single page applications used by many start-ups around the world because of its flexibility, robustness and simplicity. It allows you to bring your own tools ...
Backbone.js提供了一套Web开发的框架,为复杂的JavaScript应用程序提供了一个MVC结构。 《Backbone.js应用程序开发》详细介绍了如何使用Backbone.js完成Web应用开发。全书从了解MVC、SPA和Backbone.js的基本知识...
《backbone.js应用程序开发》详细介绍了如何使用backbone.js完成web应用开发。全书从了解mvc、spa和backbone.js的基本知识开始,然后着手构建3个示例应用程序;此外,backbone和grunt-bbb、jquery mobile等开发工具...
Backbone.js is a popular library to build single page applications used by many start-ups around the world because of its flexibility, robustness and simplicity. It allows you to bring your own tools ...
backbone.d3, 使用 backbone.js 视图的可重用D3可视化 backbone.d3 backbone.d3 是一个 backbone.js 插件插件,它使用 D3.js 可视化库插件提供一组可重用图表。继续进行调优,了解更多信息 !版权和许可证版权所有 ...
[奥莱理] Backbone.js 应用程序开发 (英文版) [奥莱理] Developing Backbone.js Applications (E-Book) ☆ 出版信息:☆ [作者信息] Addy Osmani [出版机构] 奥莱理 [出版日期] 2013年05月29日 [图书页数] 374...
backbone.routemanager, 更好的backbone.js 项目路由管理 backbone.routemanager由 Tim Branyen @tbranyen 创建。向 Backbone.Router 提供缺少的特性。依赖于下划线,Backbone 和 jQuery 。 你可以使用定制配置完全...
, 《backbone.js应用程序开发》详细介绍了如何使用backbone.js完成web应用开发。全书从了解mvc、spa和backbone.js的基本知识开始,然后着手构建3个示例应用程序;此外,backbone和grunt-bbb、jquery mobile等开发...
backbone.js框架的简单入门教程,教程目的就是让初学者快速在项目中运用backbone.js
Backbone.js API中文文档,供有需要的伙伴们使用。 Backbone.js API中文文档,供有需要的伙伴们使用。 Backbone.js API中文文档,供有需要的伙伴们使用。
Tutorialspoint Backbone.js 教程
Apress.Beginning.Backbone.js.Dec.2013
You'll learn how to create structured JavaScript applications, using Backbone's own flavor of model-view-controller (MVC) architecture. Start with the basics of MVC, SPA, and Backbone, then get your ...
backbone.js,underscore.js,jquery-1.10.2.js
Backbone.js开发秘笈的官方源码
Backbone.js实战.zip 电子书 高清的