关闭

关闭

关闭

封号提示

内容

首页 Backbonejs入门教程

Backbonejs入门教程.pdf

Backbonejs入门教程

闪电一水
2012-04-20 0人阅读 0 0 0 暂无简介 举报

简介:本文档为《Backbonejs入门教程pdf》,可适用于IT/计算机领域

Blog:http:wwwthefirenet共享、交流、提高Backbonejs入门教程作者:胡阳(thefire)blog:http:wwwthefirenet关于作者更多信息:http:wwwthefirenetabout制作日期:版权声明本电子读物所登载文章,著作权均归作者本人持有。除特别声明外,本电子读物之内容采用如下CC(CreativeCommons)协议授权:署名非商业性使用相同方式共享。Blog:http:wwwthefirenet共享、交流、提高目录写在前面的话、初识backbonejs、通过helloworld来认识下backbone、backbone中的model实例、backbone的collection实例、backbone中的Router实例、backbone中的view实例、backbone实例todos分析(一)、backbone实例todos分析(二)view的应用、backbone实例todos分析(三)总结、django开发环境搭建及使用、backbone实例todos扩展web服务器、backbone实战:webchat(一)功能分析、backbone实战:webchat(二)详细设计、backbone实战:webchat(三)web端开发、backbone实战:webchat(四)server端开发、总结的说、backbonejs相关资源Blog:http:wwwthefirenet共享、交流、提高写在前面的话这一系列的文章写了这么久也算是告一段落了为了方便大家查看制作成PDF格式的放到网上待有兴趣学习backbonejs的同学参考。第一次写完一系列的东西以前有过很多写系列文章的冲动不过都是写了一段时间就因为一些事放下了如:设计模式还有tomcat源码。其实这一系列文章的主要目的还是让初学backbonejs的人能够快速的把它用到项目上。写backbone的原因是在我搜索查找关于它的学习资料时发现中文的资料比较少也比较散虽然看到有网友在博客上说打算写但毕竟只是打算因此我就一边学习一边把里面的东西大概的梳理了一下写成文章。把这些东西写出来不是说明我有多厉害而只是表现我渴望学习、提高、分享。对于这些东西我未必完全掌握但是我尽量把我知道的东西写出来分享出去。任何一个人都是从菜鸟慢慢成长起来的而你成长过程中的所有经历恰恰又是下一代或者说你后面菜鸟所渴望知道的同时也是对你以后成长大有帮助的。所以不管你觉得自己有多菜你都应该把你学到的思考的东西写下来哪怕只有一点。所有的文章中会有很多不足的地方你如果发现错误欢迎到对应的博文链接上拍砖。每篇文章都给了链接方便大家快速跳转到网页。最后写上一句话以显示我的文学水平(表拍砖):没有开始怎么会有成长没有总结怎么会有收获没有分享怎么会有升华。Blog:http:wwwthefirenet共享、交流、提高、初识backbonejs作者:胡阳本文链接:http:wwwthefirenettouchbackbonejshtmlbackbone英文意思是:勇气脊骨但是在程序里面尤其是在backbone后面加上后缀js之后它就变成了一个框架一个js库。backbonejs不知道作者是以什么样的目的来对其命名的可能是希望这个库会成为web端开发中脊梁骨。好了八卦完了开始正题。backbonejs提供了一套web开发的框架通过Models进行keyvalue绑定及custom事件处理,通过Collections提供一套丰富的API用于枚举功能,通过Views来进行事件处理及与现有的Application通过RESTfulJSON接口进行交互它是基于jquery和underscore的一个js框架。整体上来说backbonejs是一个web端javascript的mvc框架算得上是重量级的框架。它能让你像写java代码一些写js代码定义类类的属性以及方法。更重要的是它能够优雅的把原本无逻辑的javascript代码进行组织并且提供数据和逻辑相互分离的方法减少代码开发过程中的数据和逻辑混乱。通过backbone你可以把你的数据当作Models通过Models你可以创建数据进行数据验证销毁或者保存到服务器上。当界面上的操作引起model中属性的变化时model会触发change的事件那些用来显示model状态的views会接受到model触发change的消息进而发出对应的响应并且重新渲染新的数据到界面。在一个完整的backbone应用中你不需要写那些胶水代码来从DOM中通过特殊的id来获取节点或者手工的更新HTML页面因为在model发生变化时views会很简单的进行自我更新。上面是一个简单的介绍关于backbone我看完他的介绍和简单的教程之后第一印象是它为前端开发制定了一套自己的规则在这个规则下我们可以像使用django组织python代码一样的组织js代码它很优雅能够使前端和server的交互变得简单。在查backbone资料的时候发现没有很系统的中文入门资料和更多的实例所以我打算自己边学边写争取能让大家通过一系列文章能快速的用上backbonejs。关于backbone的更多介绍参看这个:http:documentcloudgithubcombackbonehttp:backbonetutorialscombackbone的应用范围:它既然是一个重量级的框架那就不是随便什么地方都能用的不然就会出现杀鸡用牛刀费力Blog:http:wwwthefirenet共享、交流、提高不讨好的结果。那么适用在哪些地方呢?根据我对backbonejs功能的理解如果单个网页上有非常复杂的业务逻辑那么用它很合适它可以很容易的操作dom和组织js代码。豆瓣的阿尔法城是一个极好的例子。当然除了我自己分析的应用范围之外在backbone的文档上看到了很多使用它的外国站点有很多说明backbone还是很易用的。、通过helloworld来认识下backbone作者:胡阳本文链接:http:wwwthefirenethelloworldbackbonehtml先来说一下这个helloworld的功能:在页面上有一个报道的按钮点击弹出输入框输入内容确认最后内容会加到页面上。页面图如下:下面来看代码:<!>DOCTYPEhtml<html><head><title>thefirenetbackbonejsHelloWorld<title><head>Blog:http:wwwthefirenet共享、交流、提高<body><buttonid=""check>报到<button><ulid=""worldlist><ul><ahref=":"httpwwwthefirenet>更多教程<a><body><scriptsrc=":"httpajaxgoogleapiscomajaxlibsjqueryjqueryminjs><script><scriptsrc=":"httpdocumentcloudgithubcomunderscoreunderscoreminjs><script><scriptsrc=":"httpdocumentcloudgithubcombackbonebackboneminjs><script><script>(($){function=({WorldBackboneModelextend创建一个World的对象拥有name属性:name})=({WorldsBackboneCollectionextendWorld对象的集合:(,){initializefunctionmodelsoptions("",)thisbindaddoptionsviewaddOneWorld}})=({AppViewBackboneViewextend:$(""),elbody:(){initializefunction构造函数实例化一个World集合类并且以字典方式传入AppView的对象=(,{:})thisworldsnewWorldsviewthis},:{events"#":"",clickcheckcheckIn事件绑定绑定Dom中id为check的元素},:(){checkInfunction=("varworldnameprompt请问您是哪星人")(=="")='ifworldnameworldname未知'=({:})varworldnewWorldnameworldname()thisworldsaddworldBlog:http:wwwthefirenet共享、交流、提高},:(){addOneWorldfunctionmodel$("#")("<worldlistappendli>这里是来自<b>"('')"<modelgetnameb>星球的问候:helloworld!<li>")}})实例化AppView=varappviewnewAppView})()jQuery<script><html>我认为代码是直观的这里面涉及到backbone的三个部分view、model、collection以后都会提到这里只要了解model代表一个数据模型collection是模型的一个集合而view是用来处理页面以及简单的页面逻辑的。、backbone中的model实例作者:胡阳本文链接:http:wwwthefirenetbackbonemodelhtml关于backbone最基础的一个东西就是model这个东西就像是后端开发中的数据库映射那个model一样也是数据对象的模型并且应该是和后端的model有相同的属性(仅是需要通过前端来操作的属性)。下面就从实例来一步一步的带大家来了解backbone的model到底是什么样的一个东西。首先定义一个html的页面:<!>DOCTYPEhtml<html><head><title>thefirebackbonemodel<title><head><body><body><scriptsrc=":"httpajaxgoogleapiscomajaxlibsjqueryjqueryminjs><script><scriptsrc=":"httpajaxcdnjscomajaxlibsunderscorejsunderscoreminjs><script><scriptsrc=":"httpajaxcdnjscomajaxlibsbackbonejsbackboneminjs><script>Blog:http:wwwthefirenet共享、交流、提高<script>(($){function***此处填充代码**})()jQuery<script><html>下面的代码需要填到这个html的script标签中的function中。、最简单的一个对象Man=BackboneModelextend({initialize:function(){alert(',!'Heyyoucreateme)}})varman=newMan这个就很简单了在helloworld里面也有了一个model的展现不定义了属性这里是一个初始化时的方法或者称之为构造函数、对象赋值的两种方法第一种直接定义设置默认值。Man=BackboneModelextend({initialize:function(){alert(',!'Heyyoucreateme)},defaults:{name:'张三',age:''}})varman=newManalert(manget(''name))第二种赋值时定义Man=BackboneModelextend({initialize:function(){Blog:http:wwwthefirenet共享、交流、提高alert(',!'Heyyoucreateme)}})manset({name:''thefire,age:''})alert(manget(''name))取值的时候都是用get。、对象中的方法Man=BackboneModelextend({:initializefunction(){alert(',!'Heyyoucreateme)},:defaults{:name'张三',:age''},:aboutMefunction(){return'我叫'thisget(''name)',今年'thisget(''age)'岁'}})varman=newManalert(manaboutMe())、监听对象中属性的变化Man=BackboneModelextend({initialize:function(){alert(',!'Heyyoucreateme)初始化时绑定监听thisbind(":"changename,function(){varname=thisget(""name)alert("你改变了name属性为:"name)})},defaults:{name:'张三',age:''},aboutMe:function(){return'我叫'thisget(''name)',今年'thisget(''age)'岁'Blog:http:wwwthefirenet共享、交流、提高}})varman=newManmanset({name:''thefire})触发绑定的change事件alert。、为对象添加验证规则以及错误提示Man=BackboneModelextend({initialize:function(){alert(',!'Heyyoucreateme)初始化时绑定监听thisbind(":"changename,function(){varname=thisget(""name)alert("你改变了name属性为:"name)})thisbind(""error,function(model,error){alert(error)})},defaults:{name:'张三',age:''},validate:function(attributes){if(attributesname==''){return"name不能为空!"}},aboutMe:function(){return'我叫'thisget(''name)',今年'thisget(''age)'岁'}})varman=newManmanset({name:''})根据验证规则弹出错误提示。、对象的获取和保存需要服务器端支持才能测试。首先需要为对象定义一个url属性调用save方法时会post对象的所有属性到server端。Man=BackboneModelextend({url:''save,initialize:function(){Blog:http:wwwthefirenet共享、交流、提高alert(',!'Heyyoucreateme)初始化时绑定监听thisbind(":"changename,function(){varname=thisget(""name)alert("你改变了name属性为:"name)})thisbind(""error,function(model,error){alert(error)})},defaults:{name:'张三',age:''},validate:function(attributes){if(attributesname==''){return"name不能为空!"}},aboutMe:function(){return'我叫'thisget(''name)',今年'thisget(''age)'岁'}})varman=newManmanset({name:''thefire})mansave()会发送POST到模型对应的url数据格式为{"":"","":}jsonnamethefireage然后接着就是从服务器端获取数据使用方法()fetchoptionsvarman=newMan第一种情况如果直接使用fetch方法那么他会发送get请求到你model的url中你在服务器端可以通过判断是get还是post来进行对应的操作。manfetch()第二种情况在fetch中加入参数如下:manfetch({url:''getmans})这样就会发送get请求到getmans这个url中服务器返回的结果样式应该是对应的json格式数据同save时POST过去的格式。不过接受服务器端返回的数据方法是这样的:manfetch({url:''getmans,success:function(model,response){Blog:http:wwwthefirenet共享、交流、提高alert(''success)model为获取到的数据alert(modelget(''name))},error:function(){当返回格式不正确或者是非json数据时会执行此方法alert(''error)}})注:上述代码仅仅均为可正常执行的代码不过关于服务器端的实例在后面会有。这里还要补充一点就是关于服务器的异步操作都是通过Backbonesync这个方法来完成的调用这个方法的时候会自动的传递一个参数过去根据参数向服务器端发送对应的请求。比如你savebackbone会判断你的这个对象是不是新的如果是新创建的则参数为create如果是已存在的对象只是进行了改变那么参数就为update如果你调用fetch方法那参数就是read如果是destory那么参数就是delete。也就是所谓的CRUD(“create”,“read”,“update”,or“delete”)而这四种参数对应的请求类型为POSTGETPUTDELETE。你可以在服务器根据这个request类型来做出相应的CRUD操作。PS:忘了解释关于url和urlRoot的事情了如果你设置了url那么你的CRUD都会发送对应请求到这个url上但是这样又一个问题就是delete请求发送了请求但是却没有发送任何数据那么你在服务器端就不知道应该删除哪个对象(记录)所以这里又一个urlRoot的概念你设置了urlRoot之后你发送PUT和DELETE请求的时候其请求的url地址就是:baseurlmodelid这样你就可以在服务器端通过对url后面值的提取更新或者删除对应的对象(记录)。有一个例外需要提醒下:如果model和collection一起使用那么你定义的在collection中的url将取代model所定义的urlRoot但是model中的urlRoot也必须存在。关于这个Backbonesync以后可能会说到不过目前先以简单入门为主。、backbone的collection实例作者:胡阳本文链接:http:wwwthefirenetbackbonecollectionhtmlcollection是model对象的一个有序的集合概念理解起来十分简单在通过几个例子来看一下会觉得更简单。、关于book和bookshelf的例子Blog:http:wwwthefirenet共享、交流、提高Book=BackboneModelextend({default:{title:''default},initialize:function(){(',!')alertHeyyoucreateme}})BookShelf=BackboneCollectionextend({model:Book})varbook=newBook({title:''book})varbook=newBook({title:''book})varbook=newBook({title:''book})=(,,)varbookShelfnewBookShelfbookbookbook注意这里面是数组,或者使用addvarbookShelf=newBookShelfbookShelfadd(book)bookShelfadd(book)bookShelfadd(book)Blog:http:wwwthefirenet共享、交流、提高bookShelfremove(book)基于underscore这个js库还可以使用each的方法获取collection中的数据bookShelfeach(function(book){alert(bookget(''title))})很简单不解释、使用fetch从服务器端获取数据首先要在上面的的Bookshelf中定义url注意collection中并没有urlRoot这个属性。或者你直接在fetch方法中定义url的值如下:bookShelffetch({url:''getbooks,success:function(collection,response){collectioneach(function(book){alert(bookget(''title))})},error:function(){alert(''error)}})其中也定义了两个接受返回值的方法具体含义我想很容易理解返回正确格式的数据就会调用success方法错误格式的数据就会调用error方法当然error方法也看添加和success方法一样的形参。对应的BookShelf的返回格式如下:{'title':'book'},{'title':'book'}、reset方法这个方法的时候是要和上面的fetch进行配合的collection在fetch到数据之后会调用reset方法所以你需要在collection中定义reset方法或者是绑定reset方法。这里使用绑定演示:Blog:http:wwwthefirenet共享、交流、提高bookShelfbind(''reset,showAllBooks)showAllBooks=function(){bookShelfeach(function(book){将book数据渲染到页面。})}绑定的步骤要在fetch之前进行。下面给出关于collection的完整代码需要服务器端支持才行服务器端的搭建在后面会写到。<!>DOCTYPEhtml<html><head><title>thefirebackbonecollection<title><head><body><body><scriptsrc=":"httpajaxgoogleapiscomajaxlibsjqueryjqueryminjs><script><scriptsrc=":"httpajaxcdnjscomajaxlibsunderscorejsunderscoreminjs><script><scriptsrc=":"httpajaxcdnjscomajaxlibsbackbonejsbackboneminjs><script><script>(($){functioncollection是一个简单的models的有序集合、一个简单的例子=({BookBackboneModelextend:{default:''titledefault},:(){initializefunction(',!')alertHeyyoucreateme}})=({BookShelfBackboneCollectionextendBlog:http:wwwthefirenet共享、交流、提高:modelBook})=({:''})varbooknewBooktitlebook=({:''})varbooknewBooktitlebook=({:''})varbooknewBooktitlebook=(,,)varbookShelfnewBookShelfbookbookbook注意这里面是数组,或者使用add=varbookShelfnewBookShelf()bookShelfaddbook()bookShelfaddbook()bookShelfaddbook()bookShelfremovebook*(=forvarii<){bookShelfmodelslengthi((alertbookShelfmodelsiget''title))}*基于underscore这个js库还可以使用each的方法获取collection中的数据((){bookShelfeachfunctionbook((alertbookget''title))})、使用fetch从服务器端获取数据,使用reset渲染(bookShelfbind''reset,)showAllBooks({:bookShelffetchurl''getbooks,:(,){successfunctioncollectionresponse((){collectioneachfunctionbook((alertbookget''title))})},:(){errorfunction(alert''error)}})=(){showAllBooksfunction((){bookShelfeachfunctionbook将book数据渲染到页面。})}上述代码仅仅均为可正常执行的代码不过关于服务器端的实例在后面会有。Blog:http:wwwthefirenet共享、交流、提高})()jQuery<script><html>、backbone中的Router实例作者:胡阳本文链接:http:wwwthefirenetbackbonerouterhtml关于这个router的使用我现在依然是心存疑惑的。每点击一次这样的链接action会触发一个事件但是url也会改变这样刷性的话岂不是会自动触发事件。或者这个东西只是用在单个页面的网站上或者移动设备网站上或者是我还不会用。大概解释下Router:Backbone中的router见名知意router有路由的意思显然这里是要控制url的。BackboneRouter会把你连接中的#标签当做是url路径即便我心存疑惑依然是要写几个例子测试一下的。毕竟实践才能解惑。、一个简单的例子varAppRouter=BackboneRouterextend({routes:{"*"actions:""defaultRoute},defaultRoute:function(actions){alert(actions)}})Blog:http:wwwthefirenet共享、交流、提高varapprouter=newAppRouterBackbonehistorystart()需要通过调用Backbonehistorystart()方法来初始化这个Router这个Router的使用很像是django的urlconf文件提供的功能如果你懂得django的话。在页面上需要有这样的a标签:<ahref="#actions">testActions<a>、这个routes映射要怎么传参数呢看下面例子立马你就知道了varAppRouter=BackboneRouterextend({routes:{":"postsid:""getPost,"*"actions:""defaultRoute},getPost:function(id){alert(id)},defaultRoute:function(actions){alert(actions)}})varapprouter=newAppRouterBackbonehistorystart()对应的页面上应该有一个超链接:<ahref="#posts">Post<a>Blog:http:wwwthefirenet共享、交流、提高从上面已经可以看到匹配#标签之后内容的方法有两种:一种是用“:”来把#后面的对应的位置作为参数还有一种是“*”它可以匹配所有的url下面再来演练一下。varAppRouter=BackboneRouterextend({routes:{":"postsid:""getPost,"*"downloadpath:""downloadFile,对应的链接为<a="#"><>hrefdownloaduserimagesheygifdownloadgifa"::"routeaction:""loadView,对应的链接为<="#">ahrefdashboardgraphLoadRouteAction<>Viewa"*"actions:""defaultRoute},getPost:function(id){alert(id)},defaultRoute:function(actions){alert(actions)},downloadFile:function(path){alert(path)userimagesheygif},loadView:function(route,action){Blog:http:wwwthefirenet共享、交流、提高alert(route""action)dashboardgraph}})varapprouter=newAppRouterBackbonehistorystart()总结router的使用看起来能够去除通过对dom节点的绑定来触发事件的那种繁琐但唯一让我觉得不爽的就是点击之后如果再刷新就会重新执行一遍对应的方法因为url已经变了。或许这个也是可以解决的问题只是我还没有发现。另外在其他的模块中(指:model,view,collection)也可以通过使用routes:{}来根据链接触发函数。下面给出完整的代码注释自己去掉试验:<!>DOCTYPEhtml<>html<>head<><>titlethefirebackboneroutertitle<>head<>body<="#"><>ahrefpostsPosta<="#"><>ahrefdownloaduserimagesheygifdownloadgifa<="#"><>ahrefdashboardgraphLoadRouteActionViewa<>body<=":"><>scriptsrchttpajaxgoogleapiscomajaxlibsjqueryjqueryminjsscript<=":"><>scriptsrchttpajaxcdnjscomajaxlibsunderscorejsunderscoreminjsscript<=":"><>scriptsrchttpdocumentcloudgithubcombackbonebackboneminjsscript<>script(($){functionBackbone中的router见名知意router有路由的意思显然这里是要控制url的。BackboneRouter会把你连接中的#标签当做是url路径**、来看一个简单的例子=({varAppRouterBackboneRouterextend:{routes"*":""actionsdefaultRouteBlog:http:wwwthefirenet共享、交流、提高},:(){defaultRoutefunctionactions()alertactions}})=varapprouternewAppRouter()Backbonehistorystart、既然是对

用户评价(1)

关闭

新课改视野下建构高中语文教学实验成果报告(32KB)

抱歉,积分不足下载失败,请稍后再试!

提示

试读已结束,如需要继续阅读或者下载,敬请购买!

评分:

/14

意见
反馈

立即扫码关注

爱问共享资料微信公众号

返回
顶部

举报
资料