###模板引擎
1.ES6模板字符串
ES6中：${JS代码}
//ES6中需要两个过程 :
//1.定义模板
var htmlStr=`<p>${1+2}</p>`;
//2.手动将模板放到指定元素中
$(".box").html(htmlStr);2.EJS模板
//EJS 四步曲
//1.在HTML结构中定义容器 例如：<div id="box"></div>
//2.通过AJAX动态获取data数据
data=[{a:"A",b:"B",c:'C'},{a:"aa",b:"bb",c:'cc'},{a:"aaa",b:"bbb",c:'ccc'}];
//3.造模板 搭建HTML结构构导入数据
//4.通过ejs.render 将html结构，模板数据，data数据渲染出来
//ejs.render(模板的html结构,{模板数据:真实数据(一般都是通过AJAX获取出来的数据)})
//4-1 获取HTML模板
var boxHTML=$("#boxTemplate").html();
//4-2 ejs.render()
var result=ejs.render(boxHTML,{boxData:data});
console.log(result);
$("#box").html(result);>
3.造模板-->
给script标签加上type="text/template"表示的是html模板
加个id="boxTemplate"是为了方便后面第四部获取这个html模板用的
boxData：是你自己定义的数据的名字 他是模板数据
我们还需要把他跟AJAX获取出来的数据相关联
<script type="text/template" id="boxTemplate">
<ul>
<%$.each(boxData,function(index,item){%>
<!--处理li-->
<li>
<span><%=item.a%></span>
<span><%=item.b%></span>
<span><%=item.c%></span>
</li>
<%})%>
</ul>
</script>viewporet
移动端适配
准备工作1：
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
width=device-width:宽度等于当前设备的宽度
initial-scale=1：初始缩放比例
minimum-scale=1：允许用户的缩放的最小比例(默认值是1)
maximum-scale=1: 允许用户的缩放的最大比例(默认值是1)
user-scalable=no：是否允许用户缩放（默认值是no，一般都是不希望用户去缩小放大界面）准备工作2：加在一些兼容文件
在IE9以下是不支持h5，也不支持CSS3中@media，所以我们需要加载一些js文件来保证我们的效果的兼容问题
<!--[if lt IE 9]>
<![endif]-->
准备工作3（选择性加上）：设置浏览器的渲染模式是最高的
现在很多人的电脑IE浏览器的浏览器模式是IE9，IE10，IE11，都是高版本浏览模式，但是有些IE9 文档模式却是IE8，浏览器是按照文档模式去渲染的，所以会出现不兼容问题，那么我们就手动打开控制台修改一下文档模式，但是很多人不会控制台，我们就考虑这一部分人，为了他们我们可以强制IE的渲染方式为最高，保证我们的文档模式是最新的
还有个
chrome=1 他是谷歌内嵌的一个浏览器框架（GCF：Goole Chrome Frame）
如果电脑上装了这个框架，不管你用的什么版本的IE都会用webkit内核和V8引擎来排版运算，要是没装就和上一个没有chrome=1的那个一样加载
关于IE版本条件注意语句
1、只有IE才能识别
<!--[if IE]>
<link type="text/css" rel="stylesheet" href="my.css" />
<![endif]-->
因为只有IE5以上的版本才开始支持IE条件注释，所有“只有IE”才能识别的意思是“只有IE5版本以上”才能识别。
2、只有特定版本才能识别
<!--[if IE 8]>
<link type="text/css" rel="stylesheet" href="my.css" />
<![endif]-->
识别特定的IE版本，高了或者低了都不可以。上例只有IE8才能识别。
3、只有不是特定版本的才能识别
<!--[if !IE 7]>
<link type="text/css" rel="stylesheet" href="my.css" />
<![endif]-->
上例中特定IE7版本不能识别，其他版本都能识别，当然要在IE5以上。
4、只有高于特定版本才能识别
<!--[if gt IE 7]>
<link type="text/css" rel="stylesheet" href="my.css" />
<![endif]-->
上例中只有高于IE7的版本才能识别。IE7无法识别。
5、等于或者高于特定版本才能识别
<!--[if gte IE 7]>
<link type="text/css" rel="stylesheet" href="my.css" />
<![endif]-->
上例中IE7和更高的版本都能识别。
6、只有低于特定版本的才能识别
<!--[if lt IE 7]>
<link type="text/css" rel="stylesheet" href="my.css" />
<![endif]-->
上例中只有低于IE7的版本才能识别，IE7无法识别。
7、等于或者低于特定版本的才能识别
<!--[if lte IE 7]>
<link type="text/css" rel="stylesheet" href="my.css" />
<![endif]-->
上例中IE7和更低的版本可以识别。
关键词解释
上面那些代码好像很难记的样子，其实只要稍微解释一下关键字就很容易记住了。
lt ：就是Less than的简写，也就是小于的意思。
lte ：就是Less than or equal to的简写，也就是小于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
!：就是不等于的意思，跟javascript里的不等于判断符相同。
特别提示：
１、有人会试图使用<!--[if !IE]>来定义非IE浏览器下的状况，但注意：条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下被当做注释视而不见。
２、我们通常用IE条件注释根据浏览器不同载入不同css，从而解决样式兼容性问题的。其实它可以做的更多。它可以保护任何代码块——HTML代码块、JavaScript代码块、服务器端代码……看看下面的代码。
<!--[if IE]>
<script type="text/javascript">
alert("你使用的是IE浏览器！");
</script>
<![endif]-->响应式布局
1.百分比+@media
width：浏览器的宽度
height：浏览器的高度
device-width:设备的屏幕宽
device-height:设备的屏幕高
orientation：检测屏幕是出于横向还是纵向
aspect-ratio：检测浏览器可视宽度和高度的比例（9/16）
device-aspect-ratio:检测设备屏幕宽度和高度的比例
color：检测颜色位数（min-color:32检测颜色是不是32位的）
color-index:检测设备颜色索引表中的颜色值都是正数
grid：检测输出的设备是网格还是位图设备
resolution:监测屏幕或者打印机的分辨率
min-resolution：300dpi
max-resolution：118dpcm
一般之前的布局都是百分比布局：或者流式布局
@media都是配合其他的方式去用
@media (max-width: 900px) and (min-width:500px ){
.box{
display:block;
width: 100%;
}
}2.DPR
iphnoe3分辨率是320*480，iPhone4分辨率是640*960
这两款手机实际上都是宽为320px，这就导致了屏幕大小没变。实际像素却多了一倍，
这时，一个css像素就等于两个物理像素，这就是像素密度比
window.devicePixelRatio来检测素密度比
为什么设计师给你的设计稿一般都是640*960 750*1334@media only screen and (device-pixel-ratio:1 ) {
/*device-pixel-ratio:来检测素密度比*/
}3.REM布局
一个CSS单位
px是固定单位：我们设置300px*200px的尺寸，不管设备怎么变，都会按照原有尺寸大小渲染，不受其它的影响
rem是相对单位：相对于当前页面根元素(html)的字体大小来设置的
REM响应式布局：
- 首先我们严格按照设计稿的尺寸来写样式，只不过在写样式的时候，把所有的PX变为REM (假设设计稿是640的尺寸)
- 当我们把页面放在320的手机上，之前写的样式需要整体缩小一倍，此时没必要一个个的样式进行更改，我们只需要把HTML的字体大小在原来的基础上缩小一倍即可（HTML字体缩小，之前以REM为单位的值也都会跟着缩小）
- 为了方便转换计算，我们一般把HTML的初始字体大小设置为100（浏览器最小字体时10/12px，我们缩减太小后，浏览器识别不了）
var dW = 640; //设计稿的宽
var win==document.documentElement.clientWidth || document.body.clientWidth;
document.documentElement.style.fontSize=win *100/dw+ "px";移动端框架的掌握
bootstrap
zepto
http://www.wenshuai.cn/Manual/Zepto/swiper
iscroll
MUI.....
移动端事件的处理
实现单击事件
cdn.code.baidu.com/珠峰培训:移动端事件
移动端:click(单击)、load、scroll、blur、focus、change、input(代替keyup keydown)...
TOUCH事件模型(处理单手指操作)、GESTURE事件模型(处理多手指操作)
TOUCH:touchstart、touchmove、touchend、touchcancle
GESTURE:gesturestart、gesturechange、gestureend
1、click:在移动端click属于单击事件,不是点击事件；在移动端的项目中我么经常会区分单击做什么和双击做什么，所以移动端的浏览器在识别click的时候，只有确定是单击后才会把它执行；
在移动端使用click会存在300ms的延迟:浏览器在第一次点击结束后，还需要等到300ms看是否触发了第二次点击，如果触发了第二次点击就不属于click了，没有触发第二次点击才属于click；
2、点击、单击、双击、长按、滑动、左滑、右滑、上滑、下滑...
单击和双击(300MS)
点击和长按(750MS)
点击和滑动(X/Y轴偏移的距离是否在30PX以内,超过30PX就是滑动)
左右滑动和上下滑动(X轴偏移的距离 > Y轴偏移的距离 = 左右滑 相反就是上下滑)
左滑和右滑(偏移的距离 > 0 = 右滑 相反就是左滑)
3、移动端事件库
->FastClick.js:解决CLICK事件300MS的延迟
->TOUCH.JS:百度云手势事件库 https://github.com/Clouda-team/touch.code.baidu.com
->HAMMER.JStouch模拟单击事件
->使用TOUCH事件模型实现点击操作(单击&&双击)
on(oBox, 'touchstart', function (ev) {
//->ev:TouchEvent =>type、target、preventDefault(returnValue)、stopPropagation(cancelBubble)、changedTouches、touches
//->changedTouches和touches都是手指信息的集合(TouchList)，touches获取到值的必备条件只有手指还在屏幕上才可以获取，所以在touchend事件中如果想获取离开的瞬间坐标只能使用changedTouches获取
var point = ev.touches[0];
this['strX'] = point.clientX;
this['strY'] = point.clientY;
this['isMove'] = false;
});
on(oBox, 'touchmove', function (ev) {
var point = ev.touches[0];
var newX = point.clientX,
newY = point.clientY;
//->判断是否发生滑动,我们需要判断偏移的值是否在30PX以内
if (Math.abs(newX - this['strX']) > 30 || Math.abs(newY - this['strY']) > 30) {
this['isMove'] = true;
}
});
on(oBox, 'touchend', function (ev) {
if (this['isMove'] === false) {
//->点击
this.style.webkitTransitionDuration = '1s';
this.style.webkitTransform = 'rotate(360deg)';
var delayTimer = window.setTimeout(function () {
this.style.webkitTransitionDuration = '0s';
this.style.webkitTransform = 'rotate(0deg)';
}.bind(this), 1000);
} else {
//->滑动
this.style.background = 'red';
}
});案例
PC端案例：rem+bootstrap单页排版的应用
移动端案例QQ音乐播放器：rem+zepto+音频播放+歌词处理
H5场景应用交互简历：rem布局+H5音频处理+CSS3+animate.css+swiper+zepto
新浪新闻首页：rem布局+swiper+zepto+iscroll+less+EJS
其他框架的使用：MUI案例->酒店的预定app
