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="index.manifest">
- 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模板引擎？
代码示例如下
<body>
<div id="result"></div>
<!-- 编写模板 -->
<script id="header" type="text/html">
<h1>姓名: <%=name%></h1>
<h2>年龄：<%=age%> </h2>
<ul>
<%for (var i = 0; i < foods.length; i++) {%>
<li><%=foods[i]%></li>
<%}%>
</ul>
</script>
<script type="text/javascript">
// 数据
var data = {
name: '红烧肉',
age: 13.5,
foods: [ '蒸羊羔', '蒸熊掌', '一盆米饭我够了' ]
};
// 生成html代码片段
var html = baidu.template('header', data);
document.getElementById("result").innerHTML = html;
</script>
</body>
7.3和baiduTemplate相似模板引擎
例如，artTemplate.js，语法相似 http://www.jq22.com/jquery-info1097
网友评论