underscore.js
jQuery是DOM之王，那么underscore就是数学之王（擅长计算）。
Underscore一个JavaScript实用库，提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。
Underscore提供了100多个函数,包括常用的: map, filter, invoke 当然还有更多专业的辅助函数,
如:函数绑定, JavaScript模板功能,创建快速索引, 强类型相等测试, 等等.
Underscore不依赖环境，不限制使用场景，可以加载到HTML中在浏览器运行，也可以中Nodejs服务器环境中使用。
封装了一堆实用函数，这些函数基本都是针对：数组、对象、函数的。
官网：http://underscorejs.org/
中文文档：
http://www.css88.com/archives/5443
CDN公共资源库：
http://cdn.code.baidu.com/
数学运算使用方法:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
</body>
<script type="text/javascript" src="js/underscore-min.js"></script>
<script type="text/javascript">
//生成0~100的随机数
// console.log(_.random(1,100));
//创建一个范围整数数组
// console.log(_.range(1, 10)); //[1, 2, 3, 4, 5, 6, 7, 8, 9]
//取数组中的最大值和最小值
// var num = [10,5,100,2,1000]
// console.log(_.max(num))
// console.log(_.min(num))
//把数组转成对象 {a: 10, b: 20, c: 30}
// console.log(_.object(['a','b','c'], [10,20,30]))
//each遍历方法，对集合循环操作，可以遍历数组、类数组arguments、JSON对象
// _.each(['小王','大王','鬼王'], function(item,index){
// console.log(item,index)
// })
//JSON遍历
// _.each({a: 10, b: 20, c: 30}, function(item,index){
// console.log(item,index)
// })
// map可以遍历数组、JSON对象
// var arr = _.map({a: 10, b: 20, c: 30}, function(item,index){
// return item * 2
// })
// console.log(arr)
//filter 过滤数组中符合条件的元素
// var arr = _.filter([1,2,3,4,5,6], function(item,index){
// return item % 2 == 0;
// })
// console.log(arr)
//sorby() 自定义比较方法
var arr = _.sortBy([3,4,2,1,6,88], function(item){
return Math.max(item)
})
console.log(arr)
</script>
</html>underscore模板引擎
template()方法可接受三个参数：
参数1：是必须的参数是模版字符串, 你可以通过<%= %> 来插入变量, 还可以通过<% %>来插入js代码, 也可以通过<%- %>来进行html转义,
如果变量很多, 可以使用<% print() %>来简化。
参数2：是传入模版的数据, 如果不传第二个参数, 那么这个方法会返回一个模版函数, 这个模版函数可以传入数据返回完成的模版,
如果传入data参数则会直接返回一个已完成的模版。
参数3：是设置, 比如这个方法默认是寻找<% %>来进行替换, 可以通过设置它来改变具体的方法。
_.template 支持以下三种模板:
<% %> 执行一些代码
<%= %> 在模板中打印或者说成输出一些值
<%- %> 打印一些HTML转义的值
解释：
<% %> 里包裹的是一些可执行的 JavaScript 语句，比如 if-else 语句，for 循环语句等等。
<%= %> 会打印传入数据相应的 key 的值，
<%- %> 和前者相比, 多了步 HTML 实体编码的过程, 可以有效防止 XSS 攻击。
//模板
var str = "我很<%= xinqing %>啊！买了一个<%= dongxi%>，花了<%= price%>元";
//通过move字符串生成一个数据绑定函数
var compile = _.template(str);
//数据
var obj = {
xinqing:"高兴",
dongxi:"iPhone手机",
price:8888
}
//字符串和数据进行绑定生成
str = compile(obj);
console.log(str)
underscore模板引擎Ajax
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
table,tr,td,th{
border: 1px solid #000;
border-collapse:collapse;
}
</style>
</head>
<body>
<table id="table">
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</table>
</body>
<!-- 我们使用一个故意写错的type标签存放模板，然后读取html内容 -->
<script type="text/template" id="template">
<tr>
<td><%= id %></td>
<td><%= name %></td>
<td><%= age %></td>
<td><%= sex %></td>
</tr>
</script>
<script type="text/javascript" src="js/underscore-min.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//通过模板字符串生成一个数据绑定函数
var compile = _.template($('#template').html());
//Ajax请求数据
$.get('data/student.json', function(data){
// console.log(data.result)
data.result.forEach(function(obj){
//数据绑定，得到DOM字符串
var str = compile(obj)
//上树
$('table').append(str)
})
})
</script>
</html>
data/student.json
{
"result" :[
{
"id":100001,
"name":"小明",
"age":22,
"sex":"男"
},
{
"id":100002,
"name":"小红",
"age":22,
"sex":"女"
},
{
"id":100003,
"name":"小黑",
"age":22,
"sex":"男"
},
{
"id":100004,
"name":"小白",
"age":22,
"sex":"女"
}
]
}模板引擎的原理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
</body>
<script type="text/javascript">
//模板
var str = "我很@xinqing@啊！买了一个@dongxi@，花了@price@元钱11111";
//数据
var obj = {
xinqing:"高兴",
dongxi:"iPhoneXS",
price:8888
}
//封装数据绑定方法
function compile(tplStr, tplObj){
return tplStr.replace(/\@([a-zA-Z]+)\@/g, function(match,$1,$2){
console.log(match); //匹配到的内容
console.log($1); //第一个子表达式
console.log($2); //匹配到的位置
return tplObj[$1]
})
}
str = compile(str, obj);
console.log(str)
</script>
</html>
原生JS模板引擎Ajax请求数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
table,tr,td,th{
border: 1px solid #000;
border-collapse:collapse;
}
</style>
</head>
<body>
<table id="table">
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</table>
</body>
<!-- 我们使用一个故意写错的type标签存放模板，然后读取html内容 -->
<script type="text/template" id="template">
<tr>
<td>@id@</td>
<td>@name@</td>
<td>@age@</td>
<td>@sex@</td>
</tr>
</script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//通过模板字符串生成一个数据绑定函数
var str = $('#template').html();
//Ajax请求数据
$.get('data/student.json', function(data){
// console.log(data.result)
data.result.forEach(function(obj){
//数据绑定，得到DOM字符串
var domStr = compile(str, obj)
//上树
$('table').append(domStr)
})
})
//封装数据绑定方法
function compile(tplStr, tplObj){
return tplStr.replace(/\@([a-zA-Z]+)\@/g, function(match,$1,$2){
return tplObj[$1]
})
}
</script>
</html>