Underscore.js常用方法总结_其它
发布时间:2025-05-24 13:30:22 发布人:远客网络
一、Underscore.js常用方法总结_其它
1、Underscore.js是一个小型却功能强大的库，压缩后仅4KB，提供了丰富的函数式编程方法，极大地简化了JavaScript编程。它通过一个名为“_”的对象提供函数库，这些方法大致分为集合、数组、函数、对象、工具五大类。
2、在node.js中安装Underscore.js可以通过命令“npm install underscore”。但需要注意的是，由于node.js不支持使用_作为变量名，因此需要引入库并使用别名，如：var u= require("underscore");
3、与集合相关的功能包括map、each、reduce、filter、reject、every、some、find、contains、countBy和shuffle等。
4、例如，map方法可以遍历集合并应用一个操作到每个成员，然后将结果存储到数组中。如：_.map([1, 2, 3], function(num){ return num* 3;});返回结果为[3, 6, 9]。
5、filter和reject方法分别用于筛选集合中满足和不满足特定条件的成员。
6、every和some方法分别检查集合中所有或是否存在满足特定条件的成员。
7、find方法查找满足特定条件的第一个成员。
8、contains方法检查特定值是否存在于集合中。
9、countBy方法将集合中成员按照操作结果分类并返回计数。
10、shuffle方法将集合中的元素随机排序。
11、与对象相关的功能包括toArray、pluck等。
12、例如，toArray方法可以将对象转换为数组，如：_.toArray({a:0,b:1,c:2})返回结果为[0, 1, 2]。
13、与函数相关的方法如bind、bindAll、partial、memoize、delay、defer、throttle、debounce、once、after、wrap和compose等。
14、例如，bind方法可以绑定函数的执行上下文，partial方法可以预设部分参数，memoize方法可以缓存函数结果以提高性能，throttle和debounce方法可以控制函数的执行频率，after方法可以在一系列操作完成后执行函数，wrap方法可以封装函数行为。
15、与工具相关的功能包括template，它用于编译HTML模板，接受模板字符串、输入数据和设置参数。
16、例如，通过使用模板方法，可以将变量插入到HTML中，如：_.template("Hello<%=user%>!",{ user:""})返回结果为"Hello!"。
二、Underscore.js 的模板功能介绍与应用
Underscore.js是一个强大的JavaScript库，提供多种编程所需的实用功能，无需扩展原生对象。在构建小型或大型HTML5应用时，它都能发挥重要作用。其中，Underscore的前端模板功能尤其受到关注，尤其在数据处理方面更为便捷。
本文旨在介绍Underscore.js的模板功能及其应用。该功能类似于常见的前端模板，简化了数据操作，使得代码更加清晰、易于维护。下面是一个示例代码，以供参考学习。
<DOCTYPE html><html><head><meta charset="utf-8"/><title>Underscore</title><meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="format-detection" content="telephone=no"/><link href="index.css" rel="stylesheet" type="text/css"/><script src="jquery.js"></script><script src="underscore.js"></script></head><body></body></html>
<script id="t2" type="text/template"><%_.each(datas, function(item){%><div class="outer"><div class="title"><span><%=item.film%></span></div><ul class="ul"><%_.each(datas, function(item){%><li><a href="<%=item.url%>">【<%=item.title%>】</a></li><%});%></ul></div><%});%></script>
var datas= [{title:"一九四二",url:"//www.gxlcms.com",film:"电影1"},{title:"少年派的漂流",url:"//www.gxlcms.com",film:"电影2"},{title:"教父",url:"//www.gxlcms.com",film:"电影3"},{title:"肖申克的救赎",url:"//www.gxlcms.com",film:"电影4"},{title:"3d2012",url:"//www.gxlcms.com",film:"电影5"}];$("body").html( _.template($("#t2").html(), datas));
<script type="text/javascript">$('.ul').hide();$('.ul>li:last-child').addClass('last-li');$('body>div:first-child>ul').show();$('.title').click(function(){$(this).siblings().toggle();$(this).parent().siblings().children('.bbs-nav-ul').hide();})$('.title').hover(function(){$(this).toggleClass('hover');})$('.ul>li').hover(function(){$(this).toggleClass('hover');})</script>
三、1. underscore.js 介绍
1、了解Underscore.js，一个功能丰富的JavaScript工具库，帮助解决早期JavaScript数据处理的局限性。
2、Underscore.js提供了超过100个函数，包括常用函数如map、filter、invoke，以及额外的辅助函数，如函数绑定、JavaScript模板、快速索引创建、强类型相等测试等。
3、下载开发环境源码，可直接访问链接，选择未压缩代码以方便阅读。
4、通过简单示例展示数组去重的使用方法，可直接调用unique方法或作为函数调用。
5、流式编程概念，类似于jQuery的链式调用，允许对数据进行多次处理，最终得到结果。例如，先去重，然后每个数字乘以2。
6、总结Underscore.js的基本使用和价值。
7、随着ES6引入map、some、filter、reduce、forEach、any等方法，对Underscore.js的依赖减少。
8、学习Underscore.js内部设计思想对于提高编码技能和未来项目开发大有裨益。
9、一起深入探索Underscore.js的源码解读，提升技术实力！
