Backbone.js实战
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.3 Backbone依赖库的使用

在正式开发Backbone应用之前，有必要介绍Backbone的依赖库Underscore.js，因为它是一个Backbone应用正常运行的基础。如果要使用Backbone框架必须先导入依赖库Underscore.js，这是因为Backbone.js不能独立使用，必须通过依赖库Underscore.js中的函数完成访问页面元素、处理元素的基本操作。

无论是Backbone还是Underscore都是DocumentCloud公司的一个开源项目，但相对于主框架文件Backbone.js而言，依赖库Underscore.js是一个最基础的函数库，该库按类别又可以划分为集合、数组、函数、对象、实用工具等，与其他常用的JavaScript库一样，函数库将对象、集合、数组的操作进行了封装，开发人员只需要调用这些已封装好的库函数，就可以像使用jQuery框架一样，轻松控制DOM元素和处理元素事件。

1.3.1 使用_.bindAll()函数绑定对象方法

以“_”开头是依赖库Underscore的一个特征，用于区分其他库函数名，“.”后面就是函数的名称。接下来通过简单的示例来演示Underscore函数的强大功能。

示例1-1 调用_.bindAll()函数显示hello,underscore!

1.功能描述

在新建的HTML页面中添加一个<div>元素，单击该元素会调用_.bindAll()函数绑定的对象方法，在元素中显示“hello,underscore!”字样。

2.实现代码

新建一个HTML文件1-1.html，加入如代码清单1-1所示的代码。

代码清单1-1 使用_.bindAll()函数绑定对象方法

<!DOCTYPE html>
<html>
<head>
    <title>underscore中_.bindAll函数示例</title>
    <script src="Js/jquery-1.8.2.min.js"
            type="text/javascript"></script>
    <script src="Js/underscore-min.js"
            type="text/javascript"></script>
</head>
<body>
    <div id="divTip">点击我</div>
    <script type="text/javascript">
        var divView = {
            ele: '#divTip',
            tip: 'hello,underscore!',
                onClick: function ()
               { $(this.ele).html(this.tip); }
        };
        _.bindAll(divView, 'onClick'); 
        $(divView.ele).bind('click', divView.onClick);
    </script>
</body>
</html>

3.页面效果

执行代码后的页面效果如图1-4所示。

图1-4 使用_.bindAll()函数绑定对象方法

4.源码分析

在上述页面代码中，为了能更加方便地访问DOM元素，首先在<head>元素中导入jQuery库和Backbone依赖库Underscore.js文件。然后，在<script>元素中添加实现功能的JavaScript代码。在代码中，先定义一个divView对象，对象内部包含一个onClick方法，该方法的功能是将指定元素的显示内容设置为“hello,underscore!”。

接下来通过下列代码将对象内部onClick方法与divView对象相绑定。

_.bindAll(divView, 'onClick');

其中，bindAll是依赖库Underscore中的一个函数，功能是将多个方法绑定在指定的对象中。完成绑定后，可以通过对象调用绑定后的方法，使用十分方便。该函数的调用格式如下所示。

_.bindAll(object, *methodNames)

在上述代码中，括号中的“object”为绑定方法的对象，“*methodNames”为方法名称，如果有多个方法名，可以用逗号隔开。

通过bindAll函数完成对象的方法绑定之后，通过jQuery中的bind方法将divView对象的onClick方法绑定到指定元素的click事件中。单击该元素时，将执行onClick方法中的代码，最终将字符内容“hello,underscore!”显示在页面中。

1.3.2 使用_.keys()函数检索对象属性名称

依赖库Underscore中除了包含处理DOM元素的函数集之外，还包含大量对象、集合、数组的处理函数，如下列代码所示。

var tmp = _.keys({ name: "陶国荣",
    sex: "男",
    email: "tao_guo_rong@163.com"
});
console.log(tmp[1]);

在上述代码中，keys()是依赖库Underscore中的一个对象函数，用于检索出对象属性的名称。执行上述代码后，将在控制台输出“sex”，由于索引号是从“0”开始，因此索引号为“1”的对象名为“sex”。

除上述两个简单的函数之外，依赖库Underscore还提供了许多方便调用的内部方法，通过这些方法，开发人员可以很方便地在页面中与服务器进行数据交互，及时响应并处理客户的操作请求，更多关于Underscore库中的内部函数和方法，将在第2章进行详细介绍。

上一章目录下一章