自由2017

HTML5知识点总结

有很长一段时间没有更新博客了，近一段时间开始重新梳理知识点和写博客了。重要的事情说三遍，新的博客地址：欢迎访问，新的博客地址：欢迎访问，新的博客地址：欢迎访问。

Web Workers##

javaScript语言采用的是单线程模型，也就是说，所有任务排成一个队列，一次只能做一件事。
Web Worker的目的:就是为JavaScript创造多线程环境，允许主线程将一些任务分配给子线程。在主线程运行的同时，子线程在后台运行，两者互不干扰。等到子线程完成计算任务，再把结果返回给主线程。
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。可以让web应用程序具备后台处理能力，对多线程的支持非常好。

###Web Worker API###

new Worker(‘后台处理的JS地址’)
使用Web Worker：
实例化Worker对象并传入要执行的Javascript文件名就可以创建一个新的Web Worker。
例如：var worker = new Worker(“worker.js”);
这行代码会导致浏览器下载worker.js，但只有Worker接收到消息才会实际执行文件中的代码。
利用postMessage传输数据
要给Worker传递消息，可以使用postMessage()方法。
Worker是通过message和error事件与页面通信的。来自Worker的数据保存在event.data中。Worker返回的数据也可以是任何能够被序列化的值。
Worker不能完成给定的任务时就会触发error事件。具体来说，Worker内部的JavaScript在执行过程中只要遇到错误，就会触发error事件。发生error事件时，**事件对象中包含3个属性：**filename、lineto和message，分别表示发生错误的文件名、代码行号和完整的错误信息
**terminate() 方法:**终止 web worker，并释放浏览器/计算机资源(这个方法是在页面中调用的)
importScripts(‘导入其他JS文件’)
###Worker全局作用域###
关于Web Worker，**最重要的是：**要知道它所执行的JavaScript代码完全在另一个作用域中，与当前网页中的代码不共享作用域。在Web Worker中，同样有一个全局对象和其他对象以及方法。但是，Web Worker中的代码不能访问DOM，也无法通过任何方式影响页面的外观。
Web Worker中的全局对象是worker对象本身。也就是说，在这个特殊的全局作用域中，this和self引用的都是worker对象。
为了便于处理数据，Web Worker本身也是一个最小化的运行环境：
最小化的navgator对象 : online、appName、appVersion、userAgent、platform
只读的location对象 : 所有属性都是只读的
self : 指向全局 worker 对象
所有的ECMA对象，Object、Array、Date等
XMLHttpRequest构造器
setTimeout和setInterval方法
close()方法，立刻停止worker运行(在worker内部使用，而terminate() 方法是在页面中调用的)
importScripts方法
在Worker的全局作用域中，我们可以调用importScripts方法来接收一个或者多个JavaScript文件的URL。每个加载过程都是异步进行的，因此所有脚本加载并执行之后，importScripts()才会执行。
例如：
importScripts(‘file1.js’,‘file2.js’);
即使file2.js先于file1.js下载完，执行的时候仍然会按照先后顺序执行。这些脚本都是在Worker的全局作用域中执行的。Worker中的脚本一般都具有特殊的用途，不会像页面中的脚本那么功能宽泛。

Web Worker的运行环境与页面环境相比，功能是相当有限的。
Demo1:


计数：

webworker1.js

var i=0;
function numCount(){
	i++;
	self.postMessage(i);
	setTimeout("numCount()",500);
}
numCount();

Demo2:

webworker2.js

//这里self引用的是Worker全局作用域中的worker对象(与页面中的Worker对象不是同一个对象)
self.onmessage = function(e){
	var data = e.data;
	data.sort(function(a,b){
		return a-b;//从小到大排序
	});
	//Worker完成工作后，通过调用postMessage()可以把数据再发回页面
	//这里将数组排序后的结果发回页面
	//排序的确是比较消耗时间的操作，因此转交给Worker做就不会阻塞用户界面了
	self.postMessage(data);
};

当页面在worker对象上调用postMessage()方法时，数据会以异步方式被传递给worker，进而触发worker中的message事件。为了处理来自页面的数据，同样也需要创建一个onmessage事件处理程序。
**Web Worker:**可以运行异步Javascript代码，避免阻塞用户界面。在执行复杂计算和数据处理的时候，这个API非
常有用；否则，这些任务轻则会占用很长时间，重则会导致用户无法与页面交互。

Hisyory API

在HTML5之前，即使采用的是脚本语言的方式，只要浏览器地址栏中的URL地址被切换，都会触发一个页面刷新的过程，这个过程将耗费一些时间与资源。在很多时候，尤其是在两个大部分内容相同的页面之间进行切换时，这个过程往往被视为一种浪费。
HTML5的Hisyory API允许在不刷新页面的前提下，通过脚本语言的方式来进行页面上某块局部内容的更新。
处理方式：

通过Ajax请求向服务器端请求页面B与页面A中不同的局部区域及该区域中的信息
在页面A中通过脚本语言装载该区域及其中的信息
通过Hisyory API在不刷新页面的前提下在浏览器的地址栏中从页面A的URL地址切换到页面B的URL地址

在Hisyory API中，我们使用pushState方法在加载完相应的文件后，将该文件的URL地址添加到浏览器的历史记录中。
pushState方法使用3个参数：

参数1：可以为任何对象，用于保存一个当用户单击浏览器后退按钮或前进按钮时可以使用的数据
参数2：可以为一个字符串，用于设置浏览器窗口的标题，但是目前尚没有任何浏览器支持该参数的使用，所以暂时可以将该参数设为null
参数3：是可选参数，参数值可以为任何URL地址，该URL地址将出现在用户单击浏览器后退按钮或前进按钮后浏览器的地址栏中

此外，我们还需要监听popstate事件，当用户单击浏览器的后退或前进按钮时触发该事件，在事件处理函数中读取触发事件的事件对象的state属性值，该属性值即为执行pushState()方法时所使用的第一个参数值，其中保存了在向浏览器历史记录中添加记录时同步保存的对象，可以读取该对象并根据该对象值设置当前页面中所需显示的数据。

我GitHub上的一个History API使用示例：传送门

canvas

###canvas宽高设置 ##
canvas跟其他标签一样，也可以通过css来定义样式。但这里需要注意的是：canvas的默认宽高为300px * 150px,在css中为canvas定义宽高，实际上把宽高为300px * 150px的画布进行了拉伸，如果在这样的情况下进行canvas绘图，你得到的图形可能就是变形的效果。所以，在canvas绘图时，应该在canvas标签里直接定义宽高。
在css中定义的canvas宽和高只是其在html中的显示宽高，不是canvas的真实分辨率，canvas的真是分辨率需要通过其width和height属性来设置。
###save和restore方法##
save()方法调用后,将所有设置都会进入一个栈结构，得以妥善保管。然后可以对上下文进行其他修改
栈结构–>后进先出
想要返回之前保存的设置，可以调用restore()方法，在保存设置的栈结构中向前返回一级，恢复之前的状态。
连续调用save()方法可以将更多设置保存在栈结构中，之后再连续调用restore()方法则可以一级一级返回




    
    Canvas Save-Restore

###toDataURL方法##
toDataURL()方法可以导出在canvas元素上绘制的图像，该方法接收一个参数：图像的格式类型




    
    toDataURL方法




点击导出图片，即可以将图像变成图片元素，右键点击图片元素即可以将它保存到本地

Geolocation（地理定位）

HTML5 Geolocation（地理定位）用于定位用户的位置
###地理位置对象navigator.geolocation###
####getCurrentPosition() 方法###
可以使用 getCurrentPosition() 方法来获得用户的位置，该方法接收3个参数：请求成功函数、请求失败函数和数据收集方式
请求成功函数：

经度 : coords.longitude
纬度 : coords.latitude
位置准确度 : coords.accuracy
海拔 : coords.altitude
海拔准确度 : coords.altitudeAcuracy
行进方向 : coords.heading 从正北开始以度计
地面速度 : coords.speed 以米/每秒计
时间戳 : new Date(position.timestamp) 响应的日期/时间
请求失败函数：
失败编号：code
0(Unknown_error) : 不包括其他错误编号中的错误
1( Permission denied) : 用户拒绝浏览器获取位置信息
2(Position unavailable) : 尝试获取用户信息，但失败了
3(Timeout ) : 设置了timeout值，获取位置超时了

数据收集方式：json的形式

enableHighAcuracy : 更精确的查找，默认false
timeout : 获取位置允许最长时间，默认infinity
maximumAge : 位置可以缓存的最大时间，默认0

Demo1:

Demo2:

####watchPosition() 方法###
watchPosition() - 多次定位请求(像setInterval) ,返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。移动设备有用，位置改变才会触发
配置参数：frequency 表示更新的频率
clearWatch() - 停止 watchPosition() 方法(像clearInterval)
Demo:

应用Demo:




	
	
	地理位置应用

WebSocket

###Socket.IO类库实现WebSocket通信###
Socket.IO类库可以接收所有与服务器端相连接的客户端发送的消息，也可以向这些客户端发送消息。该类库的一个显著特征是在服务器端与浏览器之间提供一个共享接口。
###Socket.IO ##
客户端：




	
	
	socket.io

服务器端：

var http = require('http');//引入HTTP模块
var sio = require('socket.io');
var fs = require('fs');//引入fs模块
var server = http.createServer(function(req, res) {
    res.writeHead(200, { 'Content-type': 'text/html'});
    res.end(fs.readFileSync('./index.html'));
});
server.listen(1337);
/*
server是一个HTTP服务器，监听1337端口
使用Socket.IO类库很简单，创建一个Socket.IO服务器即可，但是该服务器依赖于一个已经创建的HTTP服务器。
在HTTP服务器运行之后，使用listen方法为该HTTP服务器附加一个Socket.IO服务器。
 */
var socket = sio.listen(server);//这里listen方法返回一个Socket.IO服务器
//这里当客户端与服务器建立连接时，触发Socket.IO服务器的connection事件，可以通过监听该事件并指定事件回调函数的方法
//指定当客户端与服务器建立连接时所需执行的处理
socket.on('connection', function(socket){
    console.log('客户端建立连接。');
    socket.send('你好。');
    socket.on('message', function(msg) {//msg为客户端发送的消息
        console.log('接收到一个消息: ',msg);
    });
    //当客户端断开连接时触发socket端口对象的disconnect事件
    socket.on('disconnect', function() {
        console.log('客户端断开连接。');
    });
});
/*
客户端与服务器建立连接后，当接收到客户端发送消息时，触发socket端口对象的message事件
 */

###emit方法互相发送事件###
使用Socket.IO类库时，服务器端与客户端之间除了可以互相发送消息之外，也可以使用socket端口对象的emit方法互相发送事件
socket.emit(event,data,[callback])

event参数值为一个用于指定事件名的字符串
data参数值代表该事件中携带的数据
callback用于指定一个当对方确认收到数据时调用的回调函数
客户端：




	
	
	socket.io