1.underscore(js模板引擎)
1.1中文網(wǎng)站
www.css88.com/doc/underscore
1.2使用模板引擎的語法
//定義一個(gè)要使用的模板引擎
<script type="text/template" id="template">
<div>
<%_.each(model,function(item,i){%>
<p><%=item.name%></p>
<%});%>
</div>
</script>
1.3渲染模板引擎
//配合jquery使用
$(function(){
/*
* - 是直接渲染成字符
* = 直接填充在html 標(biāo)簽是會被渲染
* XSS攻擊：跨站腳本攻擊(Cross Site Scripting)，
* 為不和層疊樣式表(Cascading Style Sheets, CSS)的縮寫混淆
* 故將跨站腳本攻擊縮寫為XSS洛巢。
* */
/* 準(zhǔn)備 json 數(shù)據(jù)*/
var data = [{name:'<b>xiaoming</b>'},{name:'xiaohong'}];
/* 參數(shù)是模板當(dāng)中的字符串 使用template方法 返回一個(gè)模板對象*/
//使用模板引擎
var template = _.template($('#template').html());
/*調(diào)用模板對象的時(shí)候 傳入json數(shù)據(jù) 返回的就是解析過后的字符串*/
$('#box').html( template({model:data}));
});
代碼演示:
<!--html5的標(biāo)準(zhǔn)文檔結(jié)構(gòu)-->
<!DOCTYPE html>
<!--指定文本的語言 中文-簡體-->
<html lang="zh-CN">
<head>
<!--指定當(dāng)前網(wǎng)頁的編碼格式-->
<meta charset="utf-8">
<!--指定當(dāng)前的IE瀏覽器用它最新的渲染引擎 來渲染我們的網(wǎng)頁-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--只會在移動端識別 視口 當(dāng)前的寬度等于設(shè)備的寬度，默認(rèn)的縮放比1.0笔喉，不予許用戶自行縮放-->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面柏肪，任何其他內(nèi)容都*必須*跟隨其后叶洞！ -->
<title>title</title>
<!-- Bootstrap -->
<!--引入核心css文件-->
<link href="../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!--
html5shiv 是IE9一下的瀏覽器支持html5標(biāo)簽
respond 在IE9一下不支持media query的時(shí)候讓它能支持 我們的媒體查詢
注意：：：：：以http形式打開預(yù)覽
cdn 資源加速引擎 由于是在本地開發(fā)是不是應(yīng)用本地的文件
-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="../lib/html5shiv/html5shiv.min.js"></script>
<script src="../lib/respond/respond.min.js"></script>
<![endif]-->
<!--自己的css樣式-->
<!-- TODO -->
</head>
<body>
<div id="box"></div>
<!-- TODO -->
<!--
使用了undersocre的each方法
第一個(gè)參數(shù) 就當(dāng)前遍歷的對象
第二個(gè)從那時(shí)當(dāng)前遍歷的索引
-->
<script type="text/template" id="template">
<div>
<%_.each(model,function(item,i){%>
<p><%=item.name%></p>
<%});%>
</div>
</script>
<!--說明bootstrap是基于jquery開發(fā)的-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) 引用的是jquery-->
<script src="../lib/jquery/jquery.min.js"></script>
<!--bootstrap的核心js文件-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
<!--自己的js文件 我們基于上面兩個(gè)框架-->
<script src="../lib/underscore/underscore-min.js"></script>
<script>
$(function(){
/*
* - 是直接渲染成字符
* = 直接填充在html 標(biāo)簽是會被渲染
* XSS攻擊：跨站腳本攻擊(Cross Site Scripting)敛滋，
* 為不和層疊樣式表(Cascading Style Sheets, CSS)的縮寫混淆
* 故將跨站腳本攻擊縮寫為XSS。
* */
/* 準(zhǔn)備 json 數(shù)據(jù)*/
var data = [{name:'<b>xiaoming</b>'},{name:'xiaohong'}];
/* 參數(shù)是模板當(dāng)中的字符串 使用template方法 返回一個(gè)模板對象*/
var template = _.template($('#template').html());
/*調(diào)用模板對象的時(shí)候 傳入json數(shù)據(jù) 返回的就是解析過后的字符串*/
$('#box').html( template({model:data}));
});
</script>
</body>
</html>
1.4 jquery觸摸事件和原生事件的區(qū)別
$('.wjs_banner').on('touchstart',function(e){
/*怎么獲取到第一個(gè)觸摸點(diǎn)*/
/*jquery e 返回的 originalEvent 就是原生js當(dāng)中的 touchEvent*/
//console.log(e.originalEvent.touches[0].clientX);
startX = e.originalEvent.touches[0].clientX;
});
