视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
深入解析Backbone.js框架的依赖库Underscore.js的作用_基础知识
2020-11-27 21:50:08 责编:小采
文档

backbone必须依赖underscore.js才能够使用,它必须通过underscore中的函数来完成访问页面元素、处理元素的基本操作。
注:backbone可以很好的与其它js库一起工作,所以说它是一个库,而不是框架。
Underscore并没有对原生对象进行扩展,而是调用_()方法进行封装,一旦封装完成,js对象就变为Underscore对象,也可以通过Underscore对象的Value()方法获取原生js对象中的数据。(jquery通过$()方法得到Jquery对象)
Underscore总共有60多个函数,按照处理对象的不同,可以分为集合类、数组类、功能函数类、对象类、工具函数类五大类模块。

underscore template()函数说明:

该函数包含三种模板:

(1)<% %>:包含逻辑代码,渲染后不会展现。
(2)<%= %>:数据类型,渲染后展示数据。
(3)<%- %>:将HTML标记转换为常用字符串,以避免代码攻击。

调用格式:



没有实现双向数据绑定。

1、Underscore对象封装
Underscore并没有在原生的JavaScript对象原型中进行扩展,而是像jQuery一样,将数据封装在一个自定义对象中(下文中称“Underscore对象”)。
你可以通过调用一个Underscore对象的value()方法来获取原生的JavaScript数据,例如:



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()方法是最常用用到的两个方法,它们用于迭代一个集合(数组或对象),并依次处理集合中的每一个元素,例如:



map()方法与each()方法的作用、参数相同,但它会将每次迭代函数返回的结果记录到一个新的数组并返回。

7、函数节流
函数节流是指控制一个函数的执行频率或间隔(就像控制水流的闸门一样),Underscore提供了debounce()和throttle()两个方法用于函数节流。
为了更清楚地描述这两个方法,假设我们需要实现两个需求:

需求1:当用户在文本框输入搜索条件时,自动查询匹配的关键字并提示给用户(就像在Tmall输入搜索关键字时那样)
首先分析第1个需求,我们可以绑定文本框的keypress事件,当输入框内容发生变化时,查询匹配关键字并展示。假设我想查询“windows phone”,它包含13个字符,而我输入完成只花了1秒钟(好像有点快,就意思意思吧),那么在这1秒内,调用了13次查询方法。这是一件非常恐怖的事情,如果Tmall也这样实现,我担心它会不会在光棍节到来之前就挂掉了(当然,它并没有这么脆弱,但这绝对不是最好的方案)
更好的方法是,我们希望用户已经输入完成,或者正在等待提示(也许他懒得再输入后面的内容)的时候,再查询匹配关键字。
最后我们发现,在我们期望的这两种情况下,用户会暂时停止输入,于是我们决定在用户暂停输入200毫秒后再进行查询(如果用户在不断地输入内容,那么我们认为他可能很明确自己想要的关键字,所以等一等再提示他)
这时,利用Underscore中的debounce()函数,我们可以轻松实现这个需求:

输出函数的返回值)。
<%- %>:用于输出数据,同时会将数据中包含的HTML字符转换为实体形式(例如它会将双引号转换为"形式),用于避免XSS攻击。
当我们希望将数据中的HTML作为文本显示出来时,常常会使用<%- %>标签。
Underscore还允许你修改这3种标签的形式,如果我们想使用{% %}、{%= %}、{%- %}作为标签,可以通过修改templateSettings来实现,就像这样:



在本例中,我们将模板内容和需要填充的数据传递给template方法,它会按以下顺序进行处理:

(1)将模板内容解析为可执行的JavaScript(解析模板标签)
(2)通过with语句将解析后的JavaScript作用域修改为我们传递的数据对象,这使我们能够直接在模板中通过变量形式访问数据对象的属性
(3)执行解析后的JavaScript(将数据填充到模板)
(4)返回执行后的结果
我们经常会遇到一种情况:多次调用template方法将数据渲染到同一个模板。
假设我们有一个分页列表,列表中的每一条数据都通过模板渲染,当用户进入下一页,我们会获取下一页的数据并重新渲染,实际上每次渲染的模板都是同一个,但刚才描述的template所有处理过程总会被执行。
其实Underscore的template方法提供了一种更高效的调用方式,我们将上面代码中的最后两句修改为:



你会发现细微的差别:我们在调用template方法时只传递了模板内容,而没有传递数据,此时template方法会解析模板内容,生成解析后的可执行JavaScript代码,并返回一个函数,而函数体就是解析后的JavaScript,因此当我们调用该函数渲染数据时,就省去了模板解析的动作。

你应该将返回的函数存储起来(就像我将它存储在render变量中一样),再通过调用该函数来渲染数据,特别是在同一个模板可能会被多次渲染的情况下,这样做能提高执行效率(具体提升多少,应该根据你的模板长度和复杂度而定,但无论如何,这都是一个良好的习惯)。

下载本文
显示全文
专题