UnderScore对象封装

Underscore像jQuery一样，将数据封装在一个自定义对象中——Underscore对象；可以通过调用一个Underscore对象的value()方法来获取原生javascript的数据。

//定义一个Javascript 内置对象
var jsData = {name:'data'};

//通过_()方法将对象创建为一个Underscore对象
//underscoreData对象的原型中包含了Underscore中定义的所有方法，可以任意使用
var underscoreDate = _(jsData);

//通过value方法获取原生数据，即jsData
underscoreData.value();

优先调用Javascript 1.6内置方法

在Underscore对象内部，会优先调用宿主环境提供的内置方法，以此提高函数的执行效率；
宿主环境：可能是Node.js 运行环境或客户端浏览器

改变命名空间

Underscore默认使用_(下划线)来访问和创建对象，但这样容易引起命名冲突；
可以通过noConflict()方法来改变Underscore的命名，并恢复_()变量之前的值

<script type='text/javascript'>
    var _='自定义变量'；
</script>
<script type='text/javascript' src ='underscore、underscore/underscore-min.js'></script>
<scirpt type ='text/javascript'>
//产生冲突，输出Underscore对象
console.dir(_);
//将underscore对象重命名为us,后面通过us来访问和创建underscore对象
var us = _.noConflict();
//输出’自定义变量‘五个字
console.dir(_);
</script>

链式操作

jQuery中的链式操作：

$('a')
.css('position','relative')
.attr('href','#')
.show();

undersocre的链式操作，需要先调用chain()方法进行声明

var arr =[10,20,30];
_(arr)
.chain()
.map( function(item){   return item++;   })
.first()
.value();

如果调用了chain()方法，underscore会将所调用的方法封装在一个闭包内，并将返回值封装为一个underscore对象。

//underscore中实现链式操作的关键函数，将返回值封装为一个新的underscore对象，并再次调用为
var result = function(obj,chain){
  return chain ?  _(obj).chain() : obj;
}

扩展Underscore

通过mixin()方法向underscore中扩展自定义方法

_.mixin({
  method1 : function(object){
        //todo
  },
  method2: function(object){
  },
  method3: function(object){
  }
})

这些方法被追加到Underscore的原型对象中，所有创建的Underscore对象都可以使用这些方法。

遍历集合

each()和map()方法是最常用的两个方法，用于迭代一个集合（数组或对象），并以此处理集合中的每一个元素

var arr = [1,2,3];
_(arr).map(function(item,i){
    arr[i] = item + i;
});

var obj = {
  first :1,
  second :2
}

_(obj).each(function(value,key){
   return obj[key] = value + i;
});

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

函数节流

函数节流——控制一个函数的执行频率或间隔。underscore提供了debounce()和throttle()两个方法用于函数节流。

需求1：当用户在文本框输入搜索条件时，自动查询关键字并提供给用户

<input type ="text" id="search" name ='search' />
<script type='text/javascript'>
    var query = _(function()P{
       //进行查询操作；
}).debounce(200);
$('#search').bind('keypress',query);
//作用：当query函数在200毫秒内没有被调用过的话，就执行查询操作，然后再将query函数绑定到输入框的keypress事件。
//调用debounce()方法时，会传递一个执行查询操作的函数和一个时间（毫秒数），debounce()方法会根据传递的时间对函数进行节流控制，并返回一个新的函数（即query函数）
</script>

需求2：当用户拖动浏览器滚动条时，调用服务器接口检查是否有新的内容；

分析：
将查询方法绑定到window.onscroll事件的缺点：用户拖动一次滚动条就可能会触发几十次onscroll事件。
若使用debounce()方法来进行节流，用户拖动滚动条完毕后，再查询新的内容，但是用户希望在拖动过程也能看到新内容的变化

解决方法：throttle() 方法 用户在拖动时，每两次查询的间隔不少于500毫秒，如果用户拖动了1秒钟，可以触发onscroll事件，但是只进行2次查询

<script type="text/javascript">
var query =_(function(){
    //查询操作
}).throttle(500);
$(window).bind('scroll',query);
</script>

debounce()和throttle()两个方法非常相似（调用方法和返回值），作用不同
debounce()和throttle()都是用于函数节流，控制函数不被频繁地调用，节省客户端及服务器资源

• debounce()方法关注函数执行的间隔，即函数两次调用时间不能小于指定时间
• throttle()方法更关注函数的执行频率，即在指定频率内函数只会被调用一次

5.8 模板解析

Underscore提供了一个轻量级的模板解析函数，可以帮助我们有效地组织页面结构和逻辑。

<!---用于显示渲染后的标签-->
<ul id= 'element'></ul>

<!--定义模板，将模板内容放到一个script标签中。注意type-->
<script type="text/template" id="tpl">
<% for(var i=0; i<list.length;i++){ %>
  <% var item =list[i] %>
  <li>
      <span><%=item.firstName  %><%=item.lastName %></span>
      <span><%=item.city %></span>
  </li>
<% } %>    
</script>
<script type='text/javascript' src ='underscore/underscore-min.js'></script>
<script type="text/javascript">
  //获取渲染元素和模板内容
var element = $(#element),
      tpl = $('#tpl').html();
  //创建数据，相当于服务器数据
var data = { 
 list: [ 
 {firstName: '<a href="#">Zhang</a>', lastName: 'San', city: 'Shanghai'}, 
 {firstName: 'Li', lastName: 'Si', city: '<a href="#">Beijing</a>'}, 
 {firstName: 'Wang', lastName: 'Wu', city: 'Guangzhou'}, 
 {firstName: 'Zhao', lastName: 'Liu', city: 'Shenzhen'} 
 ] 
 } 
 
 // 解析模板, 返回解析后的内容 
 var html = _.template(tpl, data); 
 // 将解析后的内容填充到渲染元素 
 element.html(html); 
</script>

注意:放在script中 因为type为template，故无法作为javascript脚本直接运行。如果写入div标签中，可能会被添加到DOM树中进行解析、
_.template模板函数只能解析3种模板标签（但比smarty,JSTL 要简单）

• <% %>用于包含Javascript代码，将在渲染数据时被执行
• <%= %>用于输出数据，可能是一个变量，某个对象的属性，或函数调用（将输出函数的返回值）
• <%- %>用于输出数据，同时会将数据中包含的HTML字符转换为实体形式（即将双引号转换为&quto;形式），避免XSS攻击——当希望将数据中的HTML作为文本显示出来时，会用这个。

underscore还允许修改3种标签形式，用templateSetting来实现

_.templateSettings ={
  evaluate : /\{%([\s\S]+?)\%\}/g, 
 interpolate : /\{%=([\s\S]+?)\%\}/g, 
 escape : /\{%-([\s\S]+?)%\}/g 
}

将模板内容和需要填充的数据传递给template方法，它会按以下顺序进行处理：
1.将模板内容解析为可执行的JavaScript（解析模板标签）
2.通过with语句将解析后的JavaScript作用域修改为我们传递的数据对象，这使我们能够直接在模板中通过变量形式访问数据对象的属性
3.执行解析后的JavaScript（将数据填充到模板）
4.返回执行后的结果

当多次调用template方法将数据渲染到同一个模板时：underscore的template有个更高效的方法

//解析模板，返回解析后的内容
var render = _.template(tpl);
var html =render(data);
//将解析后的内容填充到渲染元素
element.html(html);

注意:差别：在调用template方法时只传递了模板内容，而没有传递数据，此时template方法会解析模板内容，生成解析后的可执行JavaScript代码，并返回一个函数，而函数体就是解析后的JavaScript，因此当调用该函数渲染数据时，就省去了模板解析的动作.
你应该将返回的函数存储起来（就像我将它存储在render变量中一样），再通过调用该函数来渲染数据，特别是在同一个模板可能会被多次渲染的情况下，这样做能提高执行效率（具体提升多少，应该根据模板长度和复杂度而定，但无论如何，这都是一个良好的习惯）。

常用方法介绍

underscore.js是很精干的库，压缩后只有4kb,提供了几十种函数。
集合相关方法：
Javascript语言的数据集合，包含两种结构：数组和对象。

数组处理

数组处理——对数组元素进行加工
1.map方法对每个成员依次进行某种操作，将返回的值依次存入一个新的数组

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

2.each方法与map，依次对数组所有元素进行某种操作，不返回任何值。

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

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

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

reduce方法的第二个参数是操作函数，它本身接收两个参数，第一个是累计用的变量，每个成员的值

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

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

数组特征

underscore提供了一系列方法，判断数组元素的特征，这些方法都返回一个布尔值，表示是否满足条件
1.every方法——判断数组的所有元素是否都满足某个条件，如果都满足则返回true

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

2.some方法——只要有一个元素满足，就返回true

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

3.size方法——返回集合的成员数量

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

数组过滤

1.filter方法——依次对集合的每个成员进行某种操作，只返回操作结果为true的成员

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

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

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

3.find方法一次对集合的每个成员进行某种操作，返回第一个操作结果为true的成员；如果所有成员的操作都为false，则返回undefined.

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

4.contains方法——表示如果某个值在数组内，则返回true,否则返回false

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

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

_.countBy([1,2,3,4,5,6],function(num){ return num%2 ==0 ? 'even' : 'odd'; });

对象相关方法

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

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

2.pluck方法——将多个对象的某一个属性的值，提取成一个数组

var stooges = [{name:'moe',age: 40},{name:'larry',age:50},{name:'curly',age:40}];
_.pluck(stooges,'name');

与函数相关的方法

在不同的运行环境下， Javascript函数内部的变量所在的上下文是不同的。underscore提供了两个方法：用来给函数绑定上下文
1.bind方法——该方法绑定函数运行时的上下文，返回一个新函数

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

将o.m方法绑定到一个新的对象上面
bind方法还可以接受更多参数，表示函数方法运行时所需的参数

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

bind方法有5个参数，最后那三个是给定add方法的运行参数。

2.bindall方法——可以一次将多个方法绑定到某个对象上面

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

一次性将两个方法绑定在o对象上面
即将上下文分别是o.m1与o.m2改变为了o为上下文

3.partial方法——用于绑定参数，partial方法将函数与某个参数绑定，然后作为一个新函数返回。

var add = function(a,b){ return a+b};
add5  = _.partial(add,5);
add5(10);

4.wrap方法——将一个函数作为参数，传入另一个函数，最终返回前者的一个新版本

var hello = function(name){ return "hello" + name; }
hello = _.wrap(hello, function(func){
   return "before," +func("memo") +",after";
});
hello();

先定义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');

//调用welcome时，先运行greet函数，再运行exclaim函数，并且greet函数的运行结果是excliam函数运行时的参数。

函数运行控制

underscore.js允许对函数运行行为进行控制
1.memoize方法——缓存一个函数针对某个参数的运行结果
var fibonacci = _.memoize(function(n){
return n<2 ? n : fibonacci(n-1) + fibonacci(n-2);
});
2.delay方法——该方法将函数推迟指定的时间再运行

var log = _.bind(console.log, console);
_.delay(log,1000,'logged later');

推迟1000毫秒，再运行console.log方法，并且制定参数为“logged later”

3.defer方法——将函数推迟到待运行的任务数为任务数为0时再运行。类似于setTimeout推迟0秒运行的结果

_.defer(function(){ alert('deferred');  });

4.throttle方法——返回一个函数的新版本。连续调用这个版本的函数时，必须等待一定时间才会触发下一次执行

var throttled = _.throttle(updatePosition,100);
$(window).scroll(throttled);

5.debounce方法——这个方法返回的新函数有调用的时间限制，每次调用必须与上一次调用间隔一定的时间，否则就无效。典型应用——防止用户双击某个按钮，导致两次提交表单。

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

调用click事件后，调用函数submitForm的新版本。该版本的两次运行时间，间隔10001毫秒以上，否则第二次调用无效；最后那个true，表示click事件发生后，立即触发第一次submitForm函数，否则就是等1000毫秒再触发。

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

var initialize = _.once(createApplication);
initialize();
initialize();

7.after方法——返回新版本函数，只有在被调用一定次数后才会运行，主要用于确认一组操作全部完成后，再做出反应。

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

函数renderNotes是函数render的新版本，只有调用notes.length次以后才会运行，所以可以等到notes的每个成员都处理完，才会运行一次renderNotes.

工具方法

1.链式操作 允许将多个操作写成链式的形式
2.template 用于编译HTML模板，它接受三个参数
三个参数的含义：

• templateString: 模板字符串
• data:输入模板的数据
• settings: 设置

var txt = "<h2><%=  word %></h2>"
_.template(txt,{word: " Hello World"});

如果变量的值包含五个特殊字符（&<> “" ' /）就需要用<%- ...%>

var txt ="<h2><%-  word %></h2>";
_.template(txt, { word : "H & W" });

javascript命令可以采用<% ... %>的形式插入

var  txt = "<% var  i=0; if(i<1){ %>" 
            +"<%=  word%>"
           +"<% } %>";
_.template(txt, { word : "Hello World"});

常见的用法——循环语句
如果template方法只有第一个参数templateString，省略第二个参数，那么会返回一个函数，以后可以向这个函数输入数据

var list= ”<% _.each(people, function(name){ %><li><%=  name %></li> <% });%> “;
_.template(list, {people :['moe' , 'curly', 'larry' ]});

var t1 = _.template("Hello <%= user%>! ");
t1({ user : "<Jane>"});

data

templateString的所有变量，在内部都是obj对象的属性，而obj对象就是指第二个参数data对象。

_.template("Hello <%= user %>!",{user:' '})
_.template("Hello <%=obj.user %>!",{user: " "});

如果要改变obj这个对象的名字，需要在第三个参数中设定
_.template("<%if (data.title){ %> Title: <%= title %> <% } %>", null ,{ variable:" abc"});

template在变量替换时，内部使用with语句。运行速度会比较快。