Backbone实战-初始Backbone-优快云博客

本文深入探讨了前端开发框架Backbone.js在管理复杂前端代码、处理单页应用中的AJAX交互请求方面的应用。通过介绍Backbone.js的MVC结构、关键特点及与依赖库Underscore.js的整合，文章详细展示了如何利用Backbone.js搭建一个结构清晰、易于维护的MVC应用。实例如何构建一个简单的Backbone应用也一并呈现，旨在帮助开发者理解并实践Backbone.js在实际项目中的高效开发流程。

　　随着人们对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>