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可以嵌入矢量图形

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、语义元素

II、数学运算符

math ...

III、拖拽功能

拖拽功能几步骤

a、设置元素可以拖拽

b、拖拽的内容是什么

ondragstar 属性定义拖拽内容

ev.dataTransefer.setData

c、拖拽目的地

ondragover

获取拖拽内容 ev.dataTransfer.getData

然后放置位置 ev.target.appendchild

6、表单增强


I、表单元素

a、datalist -- 在Input基础上,提供类似 搜索的下来列表功能

b、keygen - 密钥和公钥

c、output - 用于表达式计算输出

II、input属性

a、颜色拾色器

b、日期类型

c、email地址

d、数字

e、搜索

f、url

III、表单属性

autocomplete -- 主要是浏览器系统记忆 以前输入的值

novalidate -- 不校验表单域

autofocus -- 自动获取焦点/默认焦点

form属性 -- 如果指定了 form属性,则该表单域无论是否在此表单中,都是该表单域的

formaction -- 覆盖 以前HTML 默认的 action 属性

formenctype -- 对提交到表单的数据进行编码(主要是特殊字符)

formmethod -- 覆盖 原先 method 属性(get/post)

formnovalidate -- 覆盖前面的 novalidate 属性

formtarget -- 覆盖 原先的target属性,新弹出框显示提交后的结果

input 中 image 类型的 height/width属性

前面表单元素 的 datalist / list

multiple 属性,可以选择多个值,特别是 input /file 类型非常实用

pattern 检验 input 元素的值

placeholder -- 灰化的默认值,特别是搜索导航框里面出现

required -- 提交之前必须有输入

7、多媒体


I、视频

三种视屏格式

容器MP4 (H264)

容器Ogg .ogv

容器webm .webm

解决这个问题

取消掉 vdeio 的 src 资源,使用子元素 提供多个编码视屏供选择

对于其他格式的非HTML5熟悉的,或者早期的flash 可以使用

II、音频

音频同样有多种格式

8、地理定位


主要是返回经纬度,因为涉及隐私,很多浏览器或者用户不支持

var x=document.getElementById("demo");

function getLocation() {

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(showPosition);

}

else {

x.innerHTML="该浏览器不支持获取地理位置。";

}

}

function showPosition(position) {

x.innerHTML="纬度: " + position.coords.latitude +

"
经度: " + position.coords.longitude;

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,607评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,047评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,496评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,405评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,400评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,479评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,883评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,535评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,743评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,544评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,612评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,309评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,881评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,891评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,136评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,783评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,316评论 2 342

推荐阅读更多精彩内容