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语句。运行速度会比较快。
网友评论