您的位置:首页 > 其它

Backbone实战-初始Backbone

2015-09-11 11:29 274 查看
  随着人们对web应用程序用户体验的重视,越来越多的应用强化了前端代码的开发,使得前端的Javascript代码越加冗长而无序,各类AJAX交互请求错综复杂,如何科学有效地管理这些前端代码,是众多Web开发者面临的一道难题。基于这样一种背景,人们沿用服务器端的MVC结构体系,将其运用于前端技术的开发与管理,而Backbone就是这种结构的最佳实践。

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应用核心类的方法和流程。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: