H5新特性

1.全屏化（FullScreen）

1.1进入全屏

elem.webkitRequestFullScreen(); // 针对 webkit 内核的浏览器(Chrome / Safari / Opera)
title.mozRequestFullScreen(); // 火狐 (Firfox)

1.2退出全屏

document.webkitRequestFullScreen();

1.3注意

• 全屏操作需要用户来处理，代码从上向下执行，无法触发效果
• 退出全屏不能使用当前元素调用方法，而是使用 document 对象

2.针对动画效果的API（AnimationFrame）

2.1优势：

• 浏览器可以优化并行的动画动作，更合理的重新排列动作序列，呈现出更流畅的动画效果。
• 如果在一个浏览器标签页里运行一个动画，当这个标签页不可见时，浏览器会暂停它，这会减少CPU，内存的压力，节省电池电量。

2.2开启及取消

requestAnimationFrame()
cancelAnimationFrame()

2.3注意

setInterval、setTimeout、requestAnimationFrame在被赋值给变量后，console.log出来为顺序的数字，且不区分三者的区别
所以，在取消三者时，可以直接取消，方法如下

   for (var i = 1; i <= 4; i++) {
        clearInterval(i);
        clearTimeout(i);
        cancelAnimationFrame(i);
    }

3.本地存储

3.1区别：

• cookie: 存储数据量小，可以设置存储时间，到期自动删除
• localStorage: 将数据保存到设备上，可以实现永久存储，需要主动删除
• sessionStorage: 将数据临时存储，离开当前页面就删除

3.2cookie

大多数浏览器支持最大为4k的cookie，且只允许存储20个cookie

3.3webStorage方法

• setItem（）保存
• getItem（）取出
• removeItem（） 删除
• clear（）清除

代码实例如下

保存
sessionStorage.setItem('key1', 'value1');
sessionStorage.setItem('key2', JSON.stringify([1, 2, 3, 4]));
sessionStorage.setItem('key3', JSON.stringify({ name: "xiaoming" }));
取出
sessionStorage.getItem('key3');
删除
sessionStorage.removeItem('key2');
清除
sessionStorage.clear();
设置
localStorage.setItem('key1', 'value1');

4.离线缓存manifest

4.1介绍

• manifest是一个同名后缀为manifest的文件，在文件中定义那些需要缓存的文件，支持manifest的浏览器，将会按照manifest文件的规则进而保存数据，从而在没有网络的情况下，也可以访问
• 当第一次正确配置app cache后，再次访问该应用时，浏览器会首先检查manifest是否有变动，如果有变动，则把相应的变化更新下来，同时改变浏览器的app cache，如果没有变动，就会直接把app cache的资源返回

4.2特点

• 离线浏览：用户可以在离线状态浏览网站旧数据
• 更快的速度：因为数据存储在本地，所以速度会更快
• 减轻服务器的负载：浏览器只会下载在服务器上发生改变的资源

4.3使用

• 在html标签中增加一个manifest属性，用来指定当前页面的manifest文件
• 创建一个和html同名的manifest文件，然后给index.html文件添加属性
• html文件设置完成，后面去操作manifest文件

4.4manifest文件的编写--典型写法

CACHE MANIFEST 以#号开头为注释

#version 1.3
   css/index.css
   js/index.js
   index.html

4.5如何更新缓存

• 更新manifest文件
  给manifest添加或删除文件，都可以更新缓存
  如果我们更改了js，而没有新增或删除，前面例子中的版本号，可以很好的用来更新manifest文件
• 通过javascript操作
  HTML5中引入JS操作离线缓存的方法 window.applicationCache.update();
• 清除浏览器缓存
  如果用户清除了浏览器缓存，会重新下载文件

5.地理位置

5.1Navigator 对象

• 包含的属性描述了正在使用的浏览器
• 实现了 JavaScript 的浏览器支持这个对象。
• 可以用 Window 对象的 navigator 属性来引用它。

5.2geolocation 对象

• 地理位置 API 通过 navigator.geolocation 提供
• 如果该对象存在，那么地理位置服务可用。

if ("geolocation" in navigator) {
  /* 地理位置服务可用 */
} else {
  /* 地理位置服务不可用 */
}

5.3获取当前定位

• getCurrentPosition() 获取当前定位位置。当定位被确定后，定义的回调函数就会被执行。
• 第一个参数为成功时回调
• 第二个回调函数，当有错误时会被执行。
• 第三个参数也是可选的，您可以通过该对象参数设定最长可接受的定位返回时间、等待请求的时间和是否获取高精度定位。

代码示例如下

window.navigator.geolocation.getCurrentPosition(function (info) { // 成功的回调
    console.log('successed');
    console.log(info);
}, function (info) { // 失败的回调
    console.log('error');
    console.log(info);
}, { // 定位选项
});

6.工作线程web worker

6.1含义

• 一般脚本在页面中被执行脚本时，页面的状态是不可响应的，直到脚本已完成。
• 而web worker 运行在后台的javascript，独立于其他脚本，不会影响页面的性能，页面可响应

6.2创建 web worker 之前，请检测用户的浏览器是否支持它：

// 检查是否可用
if (typeof Worker !== 'undefined') {
    console.log('可用');
    // 创建对象
    var w = new Worker('./js/worker.js');
    // 接收worker.js消息的方法
    w.onmessage = function (e) {
        console.log(e.data);
        $('title').innerHTML = e.data;
    };
} else {
    console.log('不可用');
}

6.3创建 web worker

• 将与web worker相关的代码都放在一个独立的JavaScript文件中。
• 父线程通过在Worker构造函数中指定一个JavaScript文件的链接来创建一个新的worker，异步加载并执行该JavaScript文件

 var w = new Worker('./js/worker.js');

7.模板引擎template

7.1含义

• 根据数据，快速生成HTML代码片段，插入到HTML结构中显示
• 首先编写结构，可以将HTML和JavaScript混写，然后赋值数据，就可以生成HTML代码片段
• http://wangxiao.github.io/BaiduTemplate/

7.2请演示baiduTemplate.js模板引擎？

代码示例如下

7.3和baiduTemplate相似模板引擎

例如，artTemplate.js，语法相似 http://www.jq22.com/jquery-info1097