<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>underscore测试案例</title>
</head>
<body style="height: 2000px;background: #000">
<div id="underscore" style="width: 300px;height: 100px;background: rgba(0,0,0,0.6);line-height: 100px;text-align: center;font-size: 24px;">
underscore
</div>
<input type="text" id="search" placeholder="请输入查询条件"/>
<script type="text/javascript" src="js/jquery2.js"></script>
<script type="text/javascript" src="js/underscore.js"></script>
<script type="text/javascript">
/*
* 1、数组处理
*
* */
//1.1、map();map方法对集合的每个成员依次进行某种操作，将返回的值依次存入一个新的数组。
var ary2 = [1,2,3],
ary3 = [4,5,6];
var newAry = _.map(ary2,function(num){
return num*3;
});
console.log(newAry);
//1.2、each(list,iteratee,[context]);
// 遍历list里面的每个元素
_.each([1,2,3],function(value,key,list){ //value:当前的值;key:索引、list：就是[1,2,3]
console.log(value+","+key);
});
//1.3、reduce(list,iteratee,[memo],[context]);
//reduce方法把list中元素归结为一个单独的数值。memo是reduce函数的初始值、reduce的每一步都需要由iteratee返回。
var sum = _.reduce([10,20,30],function(memo , value , index , list){
return memo + value;
},20);
console.log( sum ); //80
//1.4、filter(list,predicate,[context])。 遍历list中的每个值，返回包含所有通过predicate真值检测的元素值
var evens = _.filter([1,2,3,4,5,6],function(num){
return num%2 == 0;//返回所有偶数
});
console.log( evens );
//1.5、reject(list,predicate); //与filter()方法相反
//1.6、find(list,predicate);
// 在list中逐项查找，返回第一个通过predicate迭代函数真值检测的元素值，
// 如果没有值传递给测试迭代器将返回undefined。如果找到匹配的元素，
// 函数将立即返回，不会遍历整个list
var even = _.find([1,2,3,4,5,6],function(num) {
return num%2 == 0;
});
console.log(even);
//1.7、contains(list,value);如果list包含指定的value则返回true；
//如果list是数组，内部使用indexOf判断
var res = _.contains([1,2,3],3);
console.log(res);
var res2 = _.contains([1,2,3],7);
console.log(res2);
//1.8、countBy();
//countBy方法依次对集合的每个成员进行某种操作，将操作结果相同的成员算作一类，
// 最后返回一个对象，表明每种操作结果对应的成员数量。
var count = _.countBy([1,2,3,4,5,6,9,10,8,20],function(num){
return num % 2 == 0 ? 'even': 'odd';
});
console.log(count);
//1.9、toArray();将对象转为数组，只包含对象成员的值。
//典型应用是将类似数组的对象转为真正的数组
function translateAry (a,b,c){
var toAry = _.toArray(arguments);
console.log(toAry); //[5,6,7]
}
translateAry(5,6,7);
//1.10、pluck();将多个对象的某一个属性的值，提取成一个数组
var stooges = [{name : 'moe', age : 40}, {name : 'larry', age : 50}, {name : 'curly', age : 60}];
var stoAry = _.pluck(stooges,'age');//提取出所有age的值，组成一个数组
console.log(stoAry);
//1.11、size(list)；返回list的长度
var objSize = _.size({one: 1,two: 2,three: 3,four: 4,five: 5});
var arySize = _.size([1,2,3,4,5,6,7,8,9,10]);
console.log("对象长度："+objSize);
console.log("数组长度："+arySize);
/*
* 2、对象相关方法
* */
/*
* 3、函数相关的方法
*
*
* */
//3-1、绑定运行环境和参数
//3.1、bind(function,object,arguments)
// 绑定函数function到对象object上，arguments是function的参数
var func = function(greeting){
console.log(greeting + ": " + this.name);
return greeting + ": " + this.name;
};
func = _.bind(func,{name: "underscore"},'hi');
func();
//3.2、bindAll(object,*methodNames)
// 把methodNames参数指定的一些方法绑定到object上，这些方法就会在对象的上下文环境中执行
var buttonView = {
label: 'underscore',
onClick: function() {
console.log(this);
alert('clicked: ' + this.label);
},
onHover: function() {
console.log("hovering: " + this.label);
}
}
_.bindAll(buttonView,'onClick','onHover');
//此处绑定的click事件的上下文环境，不再是jquery选择的元素了，而是undersocre通过bindAll()绑定的buttonView对象
$("#underscore").bind("click",buttonView.onClick);//点击时，调用了butttonView.onClick,输出"clicked: underscore"
// 3.3、partial(); 将函数与某个参数绑定，然后作为一个新函数返回。
var add = function(a,b){
console.log("a + b = " + (a + b));
return a + b;
};
add5 = _.partial(add,5);
var sum3 = add5(10,15);
console.log(sum3);
// 3.4、wrap(function, wrapper); 将第一个函数function封装到函数wrapper里面，
// 并把函数function作为第一个参数传给wrapper。可以让wrapper在function运行之前和之后执行代码
//调整参数然后附有条件地执行
var hello = function(name) {
return "hello: " + name;
}
hello = _.wrap(hello, function(func){
return "before, "+ func("moe") + ",after";
});
var wrapfn = hello();
console.log(wrapfn);
//3.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);
var calcfns = welcome("underscore compose function");
console.log(calcfns);
//3.6、memoize(function);缓存函数的计算结果。
var fibonacci = _.memoize(function(n){
return n < 2 ? n: fibonacci(n-1) + fibonacci(n-2);
});
console.log(fibonacci(5));//8
//fibonacci(1)+fibonacci(1)+fibonacci(1) + fibonacci(1)+ fibonacci(1)
//3.7、delay(function,wait,*arguments);
// 等待 wait毫秒后调用function。如果传递可选的参数arguments,
//当函数function执行时，arguments会作为参数传入
var log = _.bind(console.log, console);
//console.time();
_.delay(log,1000,'logged later');
//console.timeEnd();
//3.8、defer(function,*arguments);
_.defer(function(){
console.log('deferred');
});
//3.9、throttle(function, wait);
//创建并返回一个像节流阀一样的函数,当重复调用函数的时候，
//最多每隔wait毫秒调用一次该函数。
var throttled = _.throttle(function(){
console.log(this);
if(!this.time){
this.time = 1;
}
console.log("执行滚动" + this.time++);
},100);
$(window).scroll(throttled);
/*$(window).scroll(function(){
if(!this.time){
this.time = 1;
}
console.log("执行滚动" + this.time++);
});*/
//3.10、debounce(function, wait, [immediate]);
//返回function函数的防反跳版本，将延迟函数的执行在函数最后一次调用时刻的
//wait毫秒之后。 例如: 渲染一个Markdown格式的评论预览,
// 当窗口停止改变大小之后重新计算布局; 当用户在文本框输入搜索条件时，
// 自动查询匹配的关键字并提示给用户等等.
var lazyLayout = _.debounce(function(){
if(!lazyLayout.time){
lazyLayout.time = 1;
}
console.log("执行搜索" + lazyLayout.time++);
}, 500);
$("#search").on("keyup",lazyLayout);
//3.11、once(function);该方法返回一个只能运行一次的新函数。主要用于对象的初始化
var init = _.once(function(){
console.log("初始化");
});
//3.12、after(count,function);
//创建一个函数，只有在运行了count次之后才有效果。在处理同组异步请求返回结果时
//如果你要确保同组里所有异步请求完成之后才执行这个函数，这将非常有用
/* var renderNotes = _.after(notes.length, render);
_.each(notes, function(note) {
note.asyncSave({success: renderNotes});
});*/
// renderNotes is run once, after all notes have saved.
//3.13、template(templateString,[setting]);
//将JavaScript模板编译为可以用于页面呈现的函数，对于通过JSON数据源生成复杂
//的HTML并呈现出来的操作非常有用。模板函数可以使用<%= %>插入变量
// <% %>执行任意的javascript代码。如果您希望插入一个值，并让其进行html转义，
//请使用<%- %>。当你要给模板函数赋值的时候，可以传递一个含有与模板对应属性的data
//对象。如果您要写一个一次性的，您可以传入对象data作为第二个参数给模板template来
//直接呈现，这样页面会立即呈现而不是返回一个模板函数。参数setting是一个哈希表包含
//任何可以覆盖的设置_.templateSettings。
// <%= %>: 插入变量;<% %>执行任意的javascript代码
var compiled = _.template("hello: <%= name %>");
var compiledResult = compiled({name: 'underscore template'});
console.log(compiledResult); // hello: underscore template
// <%- %> 插入一个值，并进行html转义
var template = _.template("<b><%- value %></b>");
var compiledTemplate = template({value: '<script>'});
console.log(compiledTemplate); // <b><script></b>
//3.14、 extend(destination,*source);
// 复制source对象中的所有属性覆盖到destination对象上，
//并且返回destination对象。复制是按顺序的，所以后面的对象属性
//会把前面的对象属性覆盖掉(如果有重复)
var newObj = _.extend({name: "moe"},{age: 50});
console.log(newObj);
//3.15、invoke(list,methodName,*arguments);
//在list的每个元素上执行methodName方法。任何传递给invoke的额外参数,
//invoke都会在调用methodName方法的时候传递给它。
var invokeResult = _.invoke([[5,1,7],[3,2,1]],'sort');
console.log(invokeResult);// [[1,5,7],[1,2,3]];
//3.16、noConflict();放弃underscore的控制变量"_"。返回underscore对象的引用
// var underscore = _.noConflict();
//3.17、random(min,max);
//返回一个min和max之间的随机整数。如果你只传递一个参数，那么将返回0和这个参数之间的整数
var randomNum = _.random(0,100);
console.log("随机数："+ randomNum);
//3.18、mixin(object); 允许用您自己的实用程序函数扩展underscore。
//传递一个 { name: function }定义的哈希添加到underscore对象，以及面向对象封装。
_.mixin({
capitalize: function(string){
return string.charAt(0).toUpperCase() + string.substring(1).toLowerCase();
}
});
var toUpper = _.capitalize("UNDERSCORE");
console.log(toUpper);
//3.19、uniqueId([prefix]);
// 为需要的客户端模型或DOM元素生成一个全局唯一的id。
//如果prefix参数存在，id将附加给它。
/* window.setInterval(function(){
var uniqueId = _.uniqueId();
console.log("唯一id:" + uniqueId);
},300);*/
//3.20、escape(string);转义HTML字符串、替换&，<，>,",',/字符
var escapeStr = _.escape("Curly,Larry & Moe");
console.log("转义之后的html字符串:" + escapeStr);
//3.21、clone(object); 创建一个浅复制(浅拷贝)的克隆object。
//任何嵌套的对象或数组都通过引用拷贝，不会复制
var originObj = {name: 'moe'};
var newObj = _.clone(originObj);
// console.log(originObj == newObj); //false
console.log(newObj);
//3.22、times(n,iteratee,[context]);
//调用给定的迭代函数n次，每一次调用iteratee传递index参数。生成一个返回值的数组。
var resultAry = _(8).times(function(index){
_.random(index,index+ _.random(10,100));
});
console.log(resultAry);
//3.23、iteratee(value,[context],[argCount]);
//一个重要的内部函数用来生成可应用到集合中每个元素的回调，返回想要的结果-
//无论是等式、任意回调，属性匹配，或属性访问
var stooges = [{name: 'curly', age: 25}, {name: 'moe', age: 21}, {name: 'larry', age: 23}];
var iterResult = _.map(stooges, _.iteratee('age'));//这里是筛选出所有age属性的值
console.log(iterResult);
//3.24、now();
//一个优化的方式来获得一个当前时间的整数时间戳。可用于实现定时/动画功能
var currentTime = _.now();
console.log(currentTime);
console.log(+new Date);
//3.25、matches(attrs);
//返回一个断言函数，这个函数会给你一个断言，
// 可以用来辨别给定的对象是否匹配attrs指定键/值属性。
var ready = _.matches({ selected: true, visible: true});
var readyToGoList = _.filter(list, ready);
</script>
</body>
</html>
108
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
