HTML5/H5 精华一页纸

1、画布 -- 非常重要,H5能够展现优秀图表的源泉


I、定义画布元素

II、js绘制图像
a、获取元素 getElement
b、初始化Context - element.getContext("2d");
c、绘制
i、绘制路径(多边形) moveTo lineTo stroke
ii、绘制矩形 fillRect
iii、绘制圆形 arc
iv、字符 fillText
v、增加图形 drawImage
vi、渐变 (径向|线性) createLinearGradient/createRadialGradient

Canvas 坐标体系是,按照 左上角位置(x,y) 右下角位置(x,y)
画布是透明的,可以放到页面任何一个元素之上,这样就可以实现任何界面组合功能;如果需要样式,可以指定border/background 等等

III、矢量图形
H5可以嵌入矢量图形


style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">

2、存储增强 - 本地存储 | 本地数据库 | 离线数据


-- 特别是本地存储和本地数据库,比原先的cookie功能增加了非常多的可用性;同cookie一样,localStorage/sessionStorage也是window的对象。本地存储特别是对移动端,减少了cookie来回交互的带宽流量(主要指HTTP头)
I、本地存储 localStorage | sessionStorage
存储在本地浏览器中,每个域(domain)可以存 5M
if(typeof(Storage)!=="undefined")
{
// 是的! 支持 localStorage sessionStorage 对象!
// 一些代码.....
}
else
{
// 抱歉! 不支持 web 存储。
}

a、存储方式:
因为是一个对象,所以可以用对象的存储方式 . []
或者数组访问 localStorage[key]= value; 设置和获取值;也可以对象访问 localStorage.key = value
同时也提供了 方法操作
可以直接设置值 localStorage.setItem(key, value);

b、数据处理
localStorage.length -- 存储的数据数目
localStorage.key(index);
localStorage.removeItem(key);
localStorage.clear();

c、存储内容
虽然是基本的 key-value,只能在localStorage存储字符串;但可以通过存储json字符串,来实现数组、对象等存储
localStorage.setItem("stickiesArray", JSON.stringify(stickiesArray));
stickiesArray = JSON.parse(localStorage["stickiesArray"]);

localStorage VS sessionStorage
属性方法都是一样的,区别是 sessionStorage 是会话级别的,关闭了浏览器窗口存储的数据就丢失了

II、浏览器提供了一个本地的 SQL 数据库
a、打开数据库
var db = openDatabase('databasename','version','desc',size,callback);
--有则打开,没有则创建

b、执行操作
db.transaction(function (tx){
tx.executeSql(sql);
});

sql也可以使用动态绑定的方式

c、获取数据
tx.executeSql(sql, [], function(tx,results){
results.rows.item(i).column

III、离线文件
缓存文件 *.appcache 包含内容,让浏览器缓存服务器的一些文件
a、CACHE MANIFEST - 缓存内容
CACHE MANIFEST
/js.js
/css.css

b、NETWORK -- 需要屏蔽的内容
NETWORK:
*

c、FALLBACK -- 失败(无法访问)时替换
FALLBACK
/html/ /offline.xml

使用缓存的注意事项
I、HTTP 响应时消息头需要设置成 MME-type = "text/cache-manifest"
II、文件更新后,客户端不会自动更新,必须 更新manifest 文件

3、多线程 - Web Workers


通过 WebWorker是可以独立执行一些 脚本,在主线程之外。不过这个线程有限制
不能使用 DOM 的引用;发送给工作线程的对象也是拷贝的副本;可以访问本地存储,也可以使用ajax请求数据

I、启动线程
var worker = new Worker("worker.js"); -- 就能启动一个 Web工作线程

II、消息交互
worker.postMessage("ping"); -- 发送消息,可以发送任意对象,但不能发送函数指针,防止有DOM应用
worker.onmessage = function(event) -- 等待worker 线程完成 计算任务后,发送消息回来

worker.onerror = function(error) -- worker线程 发送错误回来

III、停止线程
worker.terminate -- 终止工程线程

Web工作线程有一个全局函数,可以引用其他的js文件
importScripts
(
"xx.js",
"xxx.js"
)
工程线程中可以使用setInterval 间隔执行。去完成一些定时任务,比如喂狗;一般用工作线程,做一些CPU计算任务。
Web 工作线程中也可以创建子线程

主线程
worker.postMessage("ping");
worker.onmessage = function(event) {
var message = "Worker " + " says " + event.data;
document.getElementById("output").innerHTML = message;
// var worker = event.target; 可以获取worker线程的引用
}

worker.js -- 工作Web线程
onmessage = pingpong; //onmessage 是 Worker的属性
function pingpong(event) {
if (event.data == "ping") {
postMessage("pong");
}
}

4、交互事件模式的变化 SSE | WebSocket


传统服务器和客户端交互,主要是通过 拉 模式,客户端通过 整页定时刷新;或者利用 ajax 部分页面定时请求刷新的方式;这种方式的最大问题是,对服务器资源的消耗,所有流程都要通过端口调度来分发处理。
H5新增了模式, 和消息中间件一样 提供了 推 模式,即一旦建立连接后,数据由服务端推送到客户端,要实现这部分功能至少需要如下基础:
a、服务器和客户端(浏览器) 要保持长链接 - HTTP1.1 / HTTP2.0 keep-alive
b、服务器要不断给客户端发送数据 - 占用线程
一般服务器给客户端的响应有几种方式,一种是基于 IO的,请求的Servlet 给客户端发送数据;另一种基于NIO,只有一个线程,服务端轮询给客户端发送数据;通过定时器不断发送数据

I、SSE - 服务端推送事件
基于HTTP协议之上的一个 文本协议,所以一般用来传递 文本数据(当然也可以传2进制数据)
a、客户端
i、打开一个请求连接 -- 对应的有 open事件
var source=new EventSource("demo_sse.php");
source 有一个 readyState属性 0 正在链接 1 已建立连接 2 链接关闭

ii、接收数据 - message 事件 / error 事件
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "
";
};
event.data | event.origin (URL协议部分) | lastEventId --服务器发送的数据编号可选

iii、关闭连接 - cloase
source.close

iv、自定义事件
source.addEventListener("my",function(event){},false);

--所有事件都是JS的两种方式: onXXX 或者通过 addEventListener("XXX");

b、服务端
i、发送HTTP消息头
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive

ii、发送数据
data: message \n\n (双回车作为结束)
id: key (数据编号,可选)
event: my (自定义事件时使用, 可选)
retry: 1000 (服务端超时时间,重新请求,可选)

服务端需要通过定时器,定时发送数据

II、WebSocket - 新增的基于TCP 的交互协议
基于HTTP,只有单向的通讯,即浏览器客户端向服务端请求;如果需要有交互的就比较麻烦了;H5新增了,基于TCP的双向交互协议,是2进制协议。

a、客户端
i、打开WebSocket -- 对应有 open事件
var ws = new WebSocket("ws://localhost:9998/echo");

ii、发送数据
ws.send

iii、接收数据 - 对应message 事件 | onerror
ws.onmessage = function (evt)
{
var received_msg = evt.data;
alert("数据已接收...");
};

iv、关闭 - 对应close事件
ws.onclose = function()

b、服务端
JavaEE7开始支持,tomcat和jetty都是7 以后支持

5、新增的元素


I、语义元素