Backbone实战-初始Backbone
2015-09-11 11:29
274 查看
随着人们对web应用程序用户体验的重视,越来越多的应用强化了前端代码的开发,使得前端的Javascript代码越加冗长而无序,各类AJAX交互请求错综复杂,如何科学有效地管理这些前端代码,是众多Web开发者面临的一道难题。基于这样一种背景,人们沿用服务器端的MVC结构体系,将其运用于前端技术的开发与管理,而Backbone就是这种结构的最佳实践。
数据模型(Model): 负责数据原型的创建和各类事件的自定义,并通过Key/Value形式绑定原型数据。
数据集合(Controller): 通过数据模型集合所提供的API向原型中添加各类数据并管理这些数据。
视图(View): 绑定页面中元素的内容并处理相应事件,并通过RESTful JSON接口方式与原有应用程序中的数据进行动态交互。
继承特性。
事件统一管理。
绑定页面模板。
服务端无缝交互。
依赖库underscore.js是一个最基础的函数库,该库按类别分为集合,数组,函数,对象,实用工具等,开发人员值需要调用这些已封装好的库函数,就可以想使用Jquery框架一样,轻松处理Dom元素和处理元素事件。
实现代码:
Backbone简介
Backbone可以打造一个模型(Model) - 视图(View) - 控制器(Controller)即MVC类结构的应用程序。通过这种结构,能够高效、分门别类地管理Web应用程序中纷乱复杂的Javascript代码,以及处理单页界面(SPI)中含有大量复杂的AJAX交互请求。Backbone的MVC结构
Backbone的功能如此强大,主要原因是它提供了一套非常完整的MVC结构的Web开发框架。在这套框架中,数据模型(Model): 负责数据原型的创建和各类事件的自定义,并通过Key/Value形式绑定原型数据。
数据集合(Controller): 通过数据模型集合所提供的API向原型中添加各类数据并管理这些数据。
视图(View): 绑定页面中元素的内容并处理相应事件,并通过RESTful JSON接口方式与原有应用程序中的数据进行动态交互。
Backbone的特点
MVC结构化。继承特性。
事件统一管理。
绑定页面模板。
服务端无缝交互。
Backbone应用程序文件结构
Backbone依赖文件underscore.js,所以需要在之前引入,此外,为了方便开发人员选择和处理元素,经常引入一些第三方Javascript库,如jQuery,Zepto,Prototype,这些Javascript库结合Backbone主框架和依赖库,共同构建一个开发Backbone应用的框架。Underscore介绍
如果要使用Backbone框架必须先导入依赖库Underscore.js,这是因为Backbone.js不能单独使用,必须通过underscore.js中的函数完成访问页面元素、处理元素的基本操作。依赖库underscore.js是一个最基础的函数库,该库按类别分为集合,数组,函数,对象,实用工具等,开发人员值需要调用这些已封装好的库函数,就可以想使用Jquery框架一样,轻松处理Dom元素和处理元素事件。
实例: 调用 _.bindAll()函数显示hello,underscore!
_.bindAll(object, *methodNames)函数解释:把methodNames参数指定的一些方法绑定到object上,这些方法就会在对象的上下文环境中执行。绑定函数用作事件处理函数时非常便利,否则函数被调用时this的指向会有变化。methodNames参数是必须的。<!--引入backbone.js和underscore.js库文件,注意引用顺序--> <script> var divView={ el:"#divTip", tip:"hello,underscore!", onClick:function(){ $(this.el).html(this.tip); } } _.bindAll(divView,"onClick");//如果不执行这个绑定,那么divView.onClick的执行环境将在$("#divTip")对象上,那么执行函数中的this将会指向$("#divTip"); $(div.View).click(divView.onClick); </script>
开发第一个Backbone页面
功能描述:在新建的HTML页面中,通过导入Backbone文件搭建一个简单的MVC结构。当用户进入页面时,ID为"divTip"的元素显示"hello,backbone!"的字样。实现代码:
<!--依次引入jquery,underscore,bankbone库文件--> <body> <div id="divTip"></div> </body> <script> $(funciton(){ //第一步 定义模型类 var Test = Backbone.Model.extend({ //数据模型默认的属性值 defaults:{ content:"" } }) //第二步 定义集合类 var TestList = Backbone.Collection.extend({ //将model属性值重置为Test,指明这个集合是Test的数据集 model:Test }) //向模型中添加数据 var data = new TestList({ content:"hello,backbone!" }) //第三步 定义View对象 var TestView = Backbone.View.extend({ //目标元素,不写默认将创建一个空的div el:"#divTip", //初始化函数,实例化这个view对象时自动执行. initialize:function(){ //数据集data是一个集合对象,里面的models属性是保存着所有数据的数组 $(this.el).html(data.models[0].content); } }) //实例化视图类,执行视图类中的initialize函数 var app = new TestView(); }) </script>
总结
本节先从Backbone框架的特点讲起,通过实例介绍了Backbone依赖库underscore的使用方法,最后,通过一个完整的实例极少了Backbone开发一个MVC页面应用的过程,通过本借的学习,是读者初步了解Backbone框架构建MVC应用核心类的方法和流程。相关文章推荐
- spring mvc+mybatis+sql server简单配置
- java正则表达式应用--验证字符串是否为数字(转载)
- epoll
- Latin文中line-height的一些概念
- seaJS入门
- vs中能编译通过,但是会有红色下划线提示未定义标示符问题
- RocketMQ集群配置 / localtransactionexecuter
- Android Handler leak 分析及解决办法
- 浅说秋色园域名被国家互联网应急中心封与解的过程
- 几乎兼容所有浏览器的html5视频播放策略
- 反思之前错误的编程学习方法
- HTML DOM之 window document body
- 重大喜讯!CocoStudio终于支持导出LUA文件了!
- CocoStudio导出的LUA文件怎么使用?
- linux查看文件有多少行
- Java获取Webapp下的css、js、image资源
- jmeter学习笔记(1)——http default request的用法
- SQLyog导入csv文件sql
- UIView 坐标转换
- 那些年我们一起去过的网吧