新手入门Underscore.js中文（template）

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

Underscor.js定义了一个下划线&＃xff08;_&＃xff09;对象&＃xff0c;函数库的所有方法都属于这个对象。这些方法大致上可以分成&＃xff1a;集合&＃xff08;collection&＃xff09;、数组&＃xff08;array&＃xff09;、函数&＃xff08;function&＃xff09;、对象&＃xff08;object&＃xff09;和工具&＃xff08;utility&＃xff09;五大类。

集合相关方法

Javascript语言的数据集合&＃xff0c;包括两种结构&＃xff1a;数组和对象。以下的方法同时适用于这两种结构。

数组处理

数组处理指的是对数组元素进行加工。

map方法对集合的每个成员依次进行某种操作&＃xff0c;将返回的值依次存入一个新的数组。

1. _.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]

    

each方法与map类似&＃xff0c;依次对数组所有元素进行某种操作&＃xff0c;不返回任何值。

1. _.each([1, 2, 3], alert);
   _.each({one : 1, two : 2, three : 3}, alert);

    

reduce方法依次对集合的每个成员进行某种操作&＃xff0c;然后将操作结果累计在某一个初始值之上&＃xff0c;全部操作结束之后&＃xff0c;返回累计的值。该方法接受三个参数。第一个参数是被处理的集合&＃xff0c;第二个参数是对每个成员进行操作的函数&＃xff0c;第三个参数是累计用的变量。

1. _.reduce([1, 2, 3], function(memo, num){ return memo &＃43; num; }, 0);
   // 6

    

reduce方法的第二个参数是操作函数&＃xff0c;它本身又接受两个参数&＃xff0c;第一个是累计用的变量&＃xff0c;第二个是集合每个成员的值。

shuffle方法返回一个打乱次序的集合。

1. _.shuffle([1, 2, 3, 4, 5, 6]);
   // [4, 1, 6, 3, 5, 2]

    

数组特征

Underscore.js提供了一系列方法&＃xff0c;判断数组元素的特征。这些方法都返回一个布尔值&＃xff0c;表示是否满足条件。

every方法判断数组的所有元素是否都满足某个条件。如果都满足则返回true&＃xff0c;否则返回false。

1. _.every([1, 2, 3, 4, 5, 6], function(num){ return num % 2 &＃61;&＃61; 0; });
   // false

    

some方法则是只要有一个元素满足&＃xff0c;就返回true&＃xff0c;否则返回false。

1. _.some([1, 2, 3, 4, 5, 6], function(num){ return num % 2 &＃61;&＃61; 0; });
   // true

    

size方法返回集合的成员数量。

1. _.size({one : 1, two : 2, three : 3});
   // 3

    

数组过滤

Underscore.js提供了一系列方法&＃xff0c;用于过滤数组&＃xff0c;找到符合要求的成员。

filter方法依次对集合的每个成员进行某种操作&＃xff0c;只返回操作结果为true的成员。

1. _.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 &＃61;&＃61; 0; });
   // [2, 4, 6]

    

reject方法只返回操作结果为false的成员。

1. _.reject([1, 2, 3, 4, 5, 6], function(num){ return num % 2 &＃61;&＃61; 0; });
   // [1, 3, 5]

    

find方法依次对集合的每个成员进行某种操作&＃xff0c;返回第一个操作结果为true的成员。如果所有成员的操作结果都为false&＃xff0c;则返回undefined。

1. _.find([1, 2, 3, 4, 5, 6], function(num){ return num % 2 &＃61;&＃61; 0; });
   // 2

    

contains方法表示如果某个值在数组内&＃xff0c;则返回true&＃xff0c;否则返回false。

1. _.contains([1, 2, 3], 3);
   // true

    

countBy方法依次对集合的每个成员进行某种操作&＃xff0c;将操作结果相同的成员算作一类&＃xff0c;最后返回一个对象&＃xff0c;表明每种操作结果对应的成员数量。

1. _.countBy([1, 2, 3, 4, 5], function(num) {
   return num % 2 &＃61;&＃61; 0 ? &＃39;even&＃39; : &＃39;odd&＃39;;
   });
   // {odd: 3, even: 2}

    

对象相关方法

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

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

    

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

1. var stooges &＃61; [{name : &＃39;moe&＃39;, age : 40}, {name : &＃39;larry&＃39;, age : 50}, {name : &＃39;curly&＃39;, age : 60}];
   _.pluck(stooges, &＃39;name&＃39;);
   // ["moe", "larry", "curly"]

    

与函数相关的方法

绑定运行环境和参数

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

&＃xff08;1&＃xff09;bind方法

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

1. 

   var o &＃61; {
   p: 2,
   m: function (){console.log(this.p);} }; o.m() // 2 _.bind(o.m,{p:1})() // 1

   

    

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

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

1. var add &＃61; function(n1,n2,n3) {
   console.log(this.sum &＃43; n1 &＃43; n2 &＃43; n3);
   };
   _.bind(add, {sum:1}, 1, 1, 1)() // 4

    

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

&＃xff08;2&＃xff09;bindall方法

该方法可以一次将多个方法&＃xff0c;绑定在某个对象上面。

1. 

   var o &＃61; {
   p1 : &＃39;123&＃39;,
   p2 : &＃39;456&＃39;,
   m1 : function() { console.log(this.p1); }, m2 : function() { console.log(this.p2); }, }; _.bindAll(o, &＃39;m1&＃39;, &＃39;m2&＃39;);

   

    

上面代码一次性将两个方法&＃xff08;m1和m2&＃xff09;绑定在o对象上面。

&＃xff08;3&＃xff09;partial方法

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

1. var add &＃61; function(a, b) { return a &＃43; b; };
   add5 &＃61; _.partial(add, 5);
   add5(10); // 15

    

&＃xff08;4&＃xff09;wrap方法

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

1. var hello &＃61; function(name) { return "hello: " &＃43; name; };
   hello &＃61; _.wrap(hello, function(func) { return "before, " &＃43; func("moe") &＃43; ", after"; }); hello(); // &＃39;before, hello: moe, after&＃39;

    

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

&＃xff08;5&＃xff09;compose方法

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

1. var greet &＃61; function(name){ return "hi: " &＃43; name; };
   var exclaim &＃61; function(statement){ return statement &＃43; "!"; }; var welcome &＃61; _.compose(exclaim, greet); welcome(&＃39;moe&＃39;); // &＃39;hi: moe!&＃39;

    

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

函数运行控制

Underscore.js允许对函数运行行为进行控制。

&＃xff08;1&＃xff09;memoize方法

该方法缓存一个函数针对某个参数的运行结果。

1. var fibonacci &＃61; _.memoize(function(n) {
   return n <2 ? n : fibonacci(n - 1) &＃43; fibonacci(n - 2);
   });

    

&＃xff08;2&＃xff09;delay方法

该方法可以将函数推迟指定的时间再运行。

1. var log &＃61; _.bind(console.log, console);
   _.delay(log, 1000, &＃39;logged later&＃39;);
   // &＃39;logged later&＃39;

    

上面代码推迟1000毫秒&＃xff0c;再运行console.log方法&＃xff0c;并且指定参数为“logged later”。

&＃xff08;3&＃xff09;defer方法

该方法可以将函数推迟到待运行的任务数为0时再运行&＃xff0c;类似于setTimeout推迟0秒运行的效果。

1. _.defer(function(){ alert(&＃39;deferred&＃39;); });

    

&＃xff08;4&＃xff09;throttle方法

该方法返回一个函数的新版本。连续调用这个新版本的函数时&＃xff0c;必须等待一定时间才会触发下一次执行。

1. // 返回updatePosition函数的新版本
   var throttled &＃61; _.throttle(updatePosition, 100);
   // 新版本的函数每过100毫秒才会触发一次 $(window).scroll(throttled);

    

&＃xff08;5&＃xff09;debounce方法

该方法返回的新函数有调用的时间限制&＃xff0c;每次调用必须与上一次调用间隔一定的时间&＃xff0c;否则就无效。它的典型应用是防止用户双击某个按钮&＃xff0c;导致两次提交表单。

1. $("button").on("click", _.debounce(submitForm, 1000, true));

    

上面代码表示click事件发生后&＃xff0c;调用函数submitForm的新版本。该版本的两次运行时间&＃xff0c;必须间隔1000毫秒以上&＃xff0c;否则第二次调用无效。最后那个参数true&＃xff0c;表示click事件发生后&＃xff0c;立刻触发第一次submitForm函数&＃xff0c;否则就是等1000毫秒再触发。

&＃xff08;6&＃xff09;once方法

该方法返回一个只能运行一次的新函数。该方法主要用于对象的初始化。

1. var initialize &＃61; _.once(createApplication);
   initialize();
   initialize();
   // Application只被创造一次

    

&＃xff08;7&＃xff09;after方法

该方法返回的新版本函数&＃xff0c;只有在被调用一定次数后才会运行&＃xff0c;主要用于确认一组操作全部完成后&＃xff0c;再做出反应。

1. var renderNotes &＃61; _.after(notes.length, render);
   _.each(notes, function(note) {
   note.asyncSave({success: renderNotes});
   });

    

上面代码表示&＃xff0c;函数renderNotes是函数render的新版本&＃xff0c;只有调用notes.length次以后才会运行。所以&＃xff0c;后面就可以放心地等到notes的每个成员都处理完&＃xff0c;才会运行一次renderNotes。

工具方法

链式操作

Underscore.js允许将多个操作写成链式的形式。

1. _.(users)
   .filter(function(user) { return user.name &＃61;&＃61;&＃61; name })
   .sortBy(function(user) { return user.karma }) .first() .value()

    

template

该方法用于编译html模板。它接受三个参数。

1. _.template(templateString, [data], [settings])

    

三个参数的含义如下&＃xff1a;

• templateString&＃xff1a;模板字符串
• data&＃xff1a;输入模板的数据
• settings&＃xff1a;设置

&＃xff08;1&＃xff09;templateString

模板字符串templateString就是普通的html语言&＃xff0c;其中的变量使用<%&＃61; … %>的形式插入&＃xff1b;data对象负责提供变量的值。

1. var txt &＃61; "

   <%&＃61; word %>

   ";
   _.template(txt, {word : "Hello World"})
   // "

   Hello World

   "

    

如果变量的值包含五个特殊字符&＃xff08;& <> ” ‘ /&＃xff09;&＃xff0c;就需要用<%- … %>转义。

1. var txt &＃61; "

   <%- word %>

   ";
   _.template(txt, {word : "H & W"})
   //

   H & W

    

Javascript命令可以采用<% … %>的形式插入。下面是判断语句的例子。

1. var txt &＃61; "<% var i &＃61; 0; if (i<1){ %>"
   &＃43; "<%&＃61; word %>"
   &＃43; "<% } %>";
   _.template(txt, {word : "Hello World"})
   // Hello World

    

常见的用法还有循环语句。

1. var list &＃61; "<% _.each(people, function(name) { %>

2. <%&＃61; name %>
<% }); %>";
_.template(list, {people : [&＃39;moe&＃39;, &＃39;curly&＃39;, &＃39;larry&＃39;]});
// "
3. moe
4. curly
5. larry
"