模板引擎

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>

准备工作2：加在一些兼容文件

在IE9以下是不支持h5，也不支持CSS3中@media，所以我们需要加载一些js文件来保证我们的效果的兼容问题

<!--[if lt IE 9]> 
<script charset="utf-8" type="text/javascript" src="js/html5.min.js"></script>
<![endif]-->

准备工作3（选择性加上）：设置浏览器的渲染模式是最高的

现在很多人的电脑IE浏览器的浏览器模式是IE9，IE10，IE11，都是高版本浏览模式，但是有些IE9 文档模式却是IE8，浏览器是按照文档模式去渲染的，所以会出现不兼容问题，那么我们就手动打开控制台修改一下文档模式，但是很多人不会控制台，我们就考虑这一部分人，为了他们我们可以强制IE的渲染方式为最高，保证我们的文档模式是最新的
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
还有个
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
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…..

移动端事件的处理

实现单击事件
http://cdn.code.baidu.com/
珠峰培训:移动端事件

PC:click、mouseover、mouseout、mouseenter、mouseleave、mousemove、mousedown、mouseup、mousewheel、keydown、keyup、load、scroll、blur、focus、change...
 
移动端: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.JS

touch模拟单击事件

->使用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

其他知识【分享课】

1.调取手机设备的接口

2.canvas画布

3.调取百度、腾讯地图API

4.微信二次开发

5.flexbox布局