backbone必须依赖underscore.js才能够使用,它必须通过underscore中的函数来完成访问页面元素、处理元素的基本操作。 注:backbone可以很好的与其它js库一起工作,所以说它是一个库,而不是框架。 Underscore并没有对原生对象进行扩展,而是调用_()方法进行封装,一旦封装完成,js对象就变为Underscore对象,也可以通过Underscore对象的Value()方法获取原生js对象中的数据。(jquery通过$()方法得到Jquery对象) Underscore总共有60多个函数,按照处理对象的不同,可以分为集合类、数组类、功能函数类、对象类、工具函数类五大类模块。
该函数包含三种模板:
(1)<% %>:包含逻辑代码,渲染后不会展现。 (2)<%= %>:数据类型,渲染后展示数据。 (3)<%- %>:将HTML标记转换为常用字符串,以避免代码攻击。
调用格式:
没有实现双向数据绑定。
1、Underscore对象封装
Underscore并没有在原生的JavaScript对象原型中进行扩展,而是像jQuery一样,将数据封装在一个自定义对象中(下文中称“Underscore对象”)。 你可以通过调用一个Underscore对象的value()方法来获取原生的JavaScript数据,例如:// underscoreData对象的原型中包含了Underscore中定义的所有方法,你可以任意使用
var underscoreData = _(jsData);
2、优先调用JavaScript 1.6内置方法
Underscore中有许多方法在JavaScript1.6中已经被纳入规范,因此在Underscore对象内部,会优先调用宿主环境提供的内置方法(如果宿主环境已经实现了这些方法),以此提高函数的执行效率。 而对于不支持JavaScript 1.6的宿主环境,Underscore会通过自己的方式实现,而对开发者来说,这些完全是透明的。 这里所说的宿主环境,可能是Node.js运行环境,或客户端浏览器。3、改变命名空间
Underscore默认使用_(下划线)来访问和创建对象,但这个名字可能不符合我们的命名规范,或容易引起命名冲突。 我们可以通过noConflict()方法来改变Underscore的命名,并恢复_(下划线)变量之前的值,例如:4、链式操作
还记得我们在jQuery中是如何进行链接操作吗?例如:Underscore同样支持链式操作,但你需要先调用chain()方法进行声明:
如果调用了chain()方法,Underscore会将所调用的方法封装在一个闭包内,并将返回值封装为一个Underscore对象并返回:
5、扩展Underscore
我们可以通过mixin()方法轻松地向Underscore中扩展自定义方法,例如:这些方法被追加到Underscore的原型对象中,所有创建的Underscore对象都可以使用这些方法,它们享有和其它方法同样的环境。
6、遍历集合
each()和map()方法是最常用用到的两个方法,它们用于迭代一个集合(数组或对象),并依次处理集合中的每一个元素,例如:arr[i] = item + 1;
});
var obj = {
first : 1,second : 2
}
_(obj).each(function(value,key) {
return obj[key] = value + 1;
});
map()方法与each()方法的作用、参数相同,但它会将每次迭代函数返回的结果记录到一个新的数组并返回。
7、函数节流
函数节流是指控制一个函数的执行频率或间隔(就像控制水流的闸门一样),Underscore提供了debounce()和throttle()两个方法用于函数节流。 为了更清楚地描述这两个方法,假设我们需要实现两个需求:需求1:当用户在文本框输入搜索条件时,自动查询匹配的关键字并提示给用户(就像在Tmall输入搜索关键字时那样) 首先分析第1个需求,我们可以绑定文本框的keypress事件,当输入框内容发生变化时,查询匹配关键字并展示。假设我想查询“windows phone”,它包含13个字符,而我输入完成只花了1秒钟(好像有点快,就意思意思吧),那么在这1秒内,调用了13次查询方法。这是一件非常恐怖的事情,如果Tmall也这样实现,我担心它会不会在光棍节到来之前就挂掉了(当然,它并没有这么脆弱,但这绝对不是最好的方案) 更好的方法是,我们希望用户已经输入完成,或者正在等待提示(也许他懒得再输入后面的内容)的时候,再查询匹配关键字。 最后我们发现,在我们期望的这两种情况下,用户会暂时停止输入,于是我们决定在用户暂停输入200毫秒后再进行查询(如果用户在不断地输入内容,那么我们认为他可能很明确自己想要的关键字,所以等一等再提示他) 这时,利用Underscore中的debounce()函数,我们可以轻松实现这个需求: