Underscore.js是一个很精干的库,压缩后只有4KB。它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了JavaScript的编程。MVC框架Backbone.js就将这个库作为自己的工具库。除了可以在浏览器环境使用,Underscore.js还可以用于Node.js。

Underscore.js定义了一个下划线(_)对象,函数库的所有方法都属于这个对象。这些方法大致上可以分成:集合(collection)、数组(array)、函数(function)、对象(object)和工具(utility)五大类。

nderscore is a JavaScript library that provides a whole mess of 一大堆useful functional programming helpers without extending any built-in objects. It’s the answer to the question: “If I sit down in front of a blank HTML page, and want to start being productive immediately, what do I need?” … and the tie to go along with jQuery's tux andBackbone's suspenders.

Underscore provides 80-odd 80左右functions that support both the usual functional suspects:mapselectinvoke — as well as more specialized helpers: function binding, javascript templating, deep equality testing, and so on. It delegates to built-in functions, if present, so modern browsers will use the native implementations of forEachmap,reducefiltereverysome and indexOf.

A complete Test & Benchmark Suite is included for your perusal.

Underscore提供的60多个函数:

http://www.css88.com/doc/underscore/

部分函数:

Collections(集合) 
eachmapreducereduceRightfindfilterrejectallanyincludeinvoke,pluckmaxminsortBygroupBysortedIndexshuffletoArraysize

Arrays(数组) 
firstinitiallastrestcompactflattenwithoutunionintersection,differenceuniqzipindexOflastIndexOfrange

Functions(函数) 
bindbindAllmemoizedelaydeferthrottledebounceonceafterwrap,compose

Objects(对象) 
keysvaluesfunctionsextenddefaultsclonetapisEqualisEmpty,isElementisArrayisArgumentsisFunctionisStringisNumberisBoolean,isDateisRegExpisNaNisNullisUndefined

Utility(功能) 
noConflictidentitytimesmixinuniqueIdescapetemplate

Chaining 
chainvalue

Collection Functions (Arrays or Objects)

英文:

中文翻译:http://www.css88.com/doc/underscore/

each_.each(list, iterator, [context]) Alias: forEach 
Iterates over a list of elements, yielding each in turn to an iterator function. Theiterator is bound to the context object, if one is passed. Each invocation of iterator is called with three arguments: (element, index, list). If list is a JavaScript object,iterator's arguments will be (value, key, list). Delegates to the native forEachfunction if it exists, and returns the original list for chaining.

_.each([1, 2, 3], alert);
=> alerts each number in turn...
_.each({one: 1, two: 2, three: 3}, alert);
=> alerts each number value in turn...

Note: Collection functions work on arrays, objects, and array-like objects such asargumentsNodeList and similar. But it works by duck-typing, so avoid passing objects with a numeric length property. It's also good to note that an each loop cannot be broken out of — to break, use _.find instead.

map_.map(list, iterator, [context]) Alias: collect 
通过变换函数(iterator迭代器)把list中的每个值映射到一个新的数组中(愚人码头注:产生一个新的数组)。如果存在原生的map方法,就用原生map方法来代替。如果list是个JavaScript对象,iterator的参数是(value, key, list)

_.map([1, 2, 3], function(num){ return num * 3; });
=> [3, 6, 9]
_.map({one: 1, two: 2, three: 3}, function(num, key){ return num * 3; });
=> [3, 6, 9]

reduce_.reduce(list, iterator, memo, [context]) Aliases: inject, foldl 
别名为 inject 和 foldlreduce方法把list中元素归结为一个单独的数值。Memo是reduce函数的初始值,reduce的每一步都需要由iterator返回。这个迭代传递4个参数:memovalue 和 迭代的index(或者 key)和最后一个引用的整个 list

var sum = _.reduce([1, 2, 3], function(memo, num){ return memo + num; }, 0);
=> 6

reduceRight_.reduceRight(list, iterator, memo, [context]) Alias: foldr 
reducRight是从右侧开始组合的元素的reduce函数,如果存在JavaScript 1.8版本的reduceRight,则用其代替。Foldr在javascript中不像其它有懒计算的语言那么有用(lazy evaluation:一种求值策略,只有当表达式的值真正需要时才对表达式进行计算)。

var list = [[0, 1], [2, 3], [4, 5]];
var flat = _.reduceRight(list, function(a, b) { return a.concat(b); }, []);
=> [4, 5, 2, 3, 0, 1]

find_.find(list, iterator, [context]) Alias: detect 
遍历list,返回第一个通过iterator迭代器真值检测的元素值,如果没有值传递给测试迭代器将返回undefined。 如果找到匹配的元素,函数将立即返回,不会遍历整个list。

var even = _.find([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
=> 2

filter_.filter(list, iterator, [context]) Alias: select 
遍历list中的每个值,返回包含所有通过iterator真值检测的元素值。如果存在原生filter方法,则用原生的filter方法。

var evens = _.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
=> [2, 4, 6]

where_.where(list, properties) 
遍历list中的每一个值,返回一个数组,这个数组包含包含properties所列出的属性的所有的键 - 值对。

_.where(listOfPlays, {author: "Shakespeare", year: 1611});
=> [{title: "Cymbeline", author: "Shakespeare", year: 1611},
{title: "The Tempest", author: "Shakespeare", year: 1611}]

findWhere_.findWhere(list, properties) 
遍历list中的每一个值,返回匹配properties所列出的属性的所有的键 - 值对的第一个值。

如果没有找到匹配的属性,或者list是空的,那么将返回undefined

_.findWhere(publicServicePulitzers, {newsroom: "The New York Times"});
=> {year: 1918, newsroom: "The New York Times",
reason: "For its public service in publishing in full so many official reports,
documents and speeches by European statesmen relating to the progress and
conduct of the war."}

reject_.reject(list, iterator, [context]) 
返回list中没有通过iterator真值检测的元素集合,与filter相反。

var odds = _.reject([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
=> [1, 3, 5]

对象相关方法

toArray方法将对象转为数组,只包含对象成员的值。典型应用是将对类似数组的对象转为真正的数组。

 _.toArray({a:0,b:1,c:2});
// [0, 1, 2]

pluck方法将多个对象的某一个属性的值,提取成一个数组。

var stooges = [{name : 'moe', age : 40}, {name : 'larry', age : 50}, {name : 'curly', age : 60}];

_.pluck(stooges, 'name');
// ["moe", "larry", "curly"]

与函数相关的方法

绑定运行环境和参数

在不同的运行环境下,JavaScript函数内部的变量所在的上下文是不同的。这种特性会给程序带来不确定性,为了解决这个问题,Underscore.js提供了两个方法,用来给函数绑定上下文。

(1)bind方法

该方法绑定函数运行时的上下文,返回一个新函数。

bind_.bind(function, object, *arguments) 
Bind a function to an object, meaning that whenever the function is called, the value of this will be the object. Optionally, pass arguments to the function to pre-fill them, also known as partial application.

var func = function(greeting){ return greeting + ': ' + this.name };
func = _.bind(func, {name: 'moe'}, 'hi');
func();
=> 'hi: moe'

bindAll_.bindAll(object, *methodNames) 
Binds a number of methods on the object, specified by methodNames, to be run in the context of that object whenever they are invoked. Very handy for binding functions that are going to be used as event handlers, which would otherwise be invoked with a fairly useless thismethodNames are required.

var buttonView = {
label : 'underscore',
onClick: function(){ alert('clicked: ' + this.label); },
onHover: function(){ console.log('hovering: ' + this.label); }
};
_.bindAll(buttonView, 'onClick', 'onHover');
// When the button is clicked, this.label will have the correct value.
jQuery('#underscore_button').bind('click', buttonView.onClick);
var o = {
p: 2,
m: function (){console.log(this.p);}
}; o.m()
// 2 _.bind(o.m,{p:1})()
// 1

上面代码将o.m方法绑定到一个新的对象上面。

除了前两个参数以外,bind方法还可以接受更多参数,它们表示函数方法运行时所需的参数。

var add = function(n1,n2,n3) {
console.log(this.sum + n1 + n2 + n3);
}; _.bind(add, {sum:1}, 1, 1, 1)()
// 4

上面代码中bind方法有5个参数,最后那三个是给定add方法的运行参数,所以运行结果为4。

2)bindall方法

该方法可以一次将多个方法,绑定在某个对象上面。

var o = {
p1 : '123',
p2 : '456',
m1 : function() { console.log(this.p1); },
m2 : function() { console.log(this.p2); },
}; _.bindAll(o, 'm1', 'm2');

上面代码一次性将两个方法(m1和m2)绑定在o对象上面。

(3)partial方法

除了绑定上下文,Underscore.js还允许绑定参数。partial方法将函数与某个参数绑定,然后作为一个新函数返回。

var add = function(a, b) { return a + b; };

add5 = _.partial(add, 5);

add5(10);
// 15

(4)wrap方法

该方法将一个函数作为参数,传入另一个函数,最终返回前者的一个新版本。

var hello = function(name) { return "hello: " + name; };

hello = _.wrap(hello, function(func) {
return "before, " + func("moe") + ", after";
}); hello();
// 'before, hello: moe, after'

上面代码先定义hello函数,然后将hello传入一个匿名定义,返回一个新版本的hello函数。

(5)compose方法

该方法接受一系列函数作为参数,由后向前依次运行,上一个函数的运行结果,作为后一个函数的运行参数。也就是说,将f(g(),h())的形式转化为f(g(h()))。

var greet    = function(name){ return "hi: " + name; };
var exclaim = function(statement){ return statement + "!"; };
var welcome = _.compose(exclaim, greet);
welcome('moe');
// 'hi: moe!'

上面代码调用welcome时,先运行greet函数,再运行exclaim函数。并且,greet函数的运行结果是exclaim函数运行时的参数。


underscore.js框架使用的更多相关文章

  1. (三)underscore.js框架Objects类API学习

    keys_.keys(object)  Retrieve all the names of the object's properties. _.keys({one: 1, two: 2, three ...

  2. 深入解析Backbone.js框架的依赖库Underscore.js的作用

    这篇文章主要介绍了深入解析Backbone.js框架的依赖库Underscore.js的作用,用过Node.js的朋友对Underscore一定不会陌生:)需要的朋友可以参考下 backbone必须依 ...

  3. Underscore.js

    概述 Underscore.js是一个很精干的库,压缩后只有4KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了JavaScript的编程.MVC框架Backbone.js就将这个库 ...

  4. 新手入门Underscore.js 中文(template)

    Underscore.js是一个很精干的库,压缩后只有4KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了javaScript的编程.MVC框架Backbone.js就将这个库作为自 ...

  5. js框架简明

    jquery 主要战场还是在dom这块.其它经典怀旧的2个需要了解一下,mootools, prototype.是他们启发了js向工程化,团队化,协作化发展的转变,yui虽然听说停止开发了,但他的代码 ...

  6. 一些站点使用的服务器软件、js 框架大收集 [ 整理中 ]

    Chrome 的扩展应用 ChromeSnifferPlus ( 开源中国地址:http://www.oschina.net/p/chromesnifferplus,GitHub 地址:https:/ ...

  7. template模版与Underscore.js

    template模版与Underscore.js 在项目中经常使用的模版是Underscore这个js框架的实用功能. 在html里面设定模板,然后js绑定数据,这样能避免在js中出现非常多的html ...

  8. 你需要了解的JS框架

    excanvas.js/Chart.js/cubism.js/d3.js/dc.js/dx.chartjs.js/echarts.js/flot.js       用途:构建数据统计图表,兼容多浏览器 ...

  9. underscore.js 源码

    underscore.js 源码 underscore]JavaScript 中如何判断两个元素是否 "相同" Why underscore 最近开始看 underscore.js ...

随机推荐

  1. UNIX环境高级编程第二版代码笔记

    1. 第一个程序 gcc 1.1.c  /tmp/ccbnJqcB.o: In function `main': 1.1.c:(.text+0x17): undefined reference to ...

  2. CentOS 6.3 源码安装LAMP(Linux+Apache+Mysql+Php)环境

    一.简介 什么是LAMP LAMP是一种Web网络应用和开发环境,是Linux, Apache, MySQL, Php/Perl的缩写,每一个字母代表了一个组件,每个组件就其本身而>言都是在它所 ...

  3. switch-case参数类型

    switch语句用法: 0. switch语句由一个控制表达式和多个case标签组成 1. switch控制表达式支持的类型有byte.short.char.int.enum(JDK5).String ...

  4. Java——(三)Collection之Set集合、HashSet类

    ------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ------- 一.Set集合 Set集合不允许包含相同的元素,如果试图把两个相同的元素加入同一个Set集合中, ...

  5. 关于SqlServer修改数据库常用信息的方法

    --系统表里存放各个数据库属性信息的表之一SELECT name AS [Logical Name], physical_name AS [DB File Path],type_desc AS [Fi ...

  6. (tomcat访问不了的两种解决方法)Bad Request(Invalid Hostname)

    显示这个页面的时候一般有几中解决方法: 第一种就是如下图所示的方法: 具体步骤是: 1.也就是左下角win的“运行”中输入cmd进入doc窗口中 2.输入代码:netstat -ano 3.找到占用8 ...

  7. Android之使用SharedPreferences保存用户偏好参数

    在Android应用中,我们常需要记录用户设置的一些偏好参数,,此时我们就需要用SharedPreferences和Editor将这些信息保存下来,在下次登录时读取. SharedPreference ...

  8. 如何管理你的 Javascript 代码

    今天不聊技术的问题,咱们来聊聊在前端开发中如何管理好自己的 Javascript 代码.首先,咱们先来说说一般都有哪些管理方式?我相信  seajs . requirejs  对于前端开发者而言都不陌 ...

  9. UIView用户事件响应

    UIView除了负责展示内容给用户外还负责响应用户事件.本章主要介绍UIView用户交互相关的属性和方法. 1.交互相关的属性 userInteractionEnabled 默认是YES ,如果设置为 ...

  10. SpringMVC4+thymeleaf3的一个简单实例(篇四:form表单数据验证)

    关于表单数据验证有很多中方法,这里我仅介绍JSR303注解验证.JSR303仅仅是一个规范,这里我们要用到它的一个实现:hibernate-validator. 注意在spring的配置文件sprin ...