用 canvas 实现 Web 手势解锁

2017/04/04 · HTML5 ·
Canvas

原文出处: songjz   

最近参加 360 暑假的前端星计划,有一个在线作业,截止日期是 3 月 30
号,让手动实现一个 H5 手势解锁,具体的效果就像原生手机的九宫格解锁那样。

澳门微尼斯人手机版 1

实现的最终效果就像下面这张图这样:

澳门微尼斯人手机版 2

基本要求是这样的:将密码保存到 localStorage
里,开始的时候会从本地读取密码,如果没有就让用户设置密码,密码最少为五位数,少于五位要提示错误。需要对第一次输入的密码进行验证,两次一样才能保持,然后是验证密码,能够对用户输入的密码进行验证。

History API 与浏览器历史堆栈管理

2016/07/25 · HTML5 ·
History,
HTML5,
浏览器

本文作者: 伯乐在线 –
欲休
。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

移动端开发在某些场景中有着特殊需求,如为了提高用户体验和加快响应速度,常常在部分工程采用SPA架构。传统的单页应用基于url的hash值进行路由,这种实现不存在兼容性问题,但是缺点也有–针对不支持onhashchange属性的IE6-7需要设置定时器不断检查hash值改变,性能上并不是很友好。

而如今,在移动端开发中HTML5规范给我们提供了一个History接口,使用该接口可以自由操纵历史记录。本文并不详细介绍History接口,而是探究History接口如何影响浏览器历史堆栈,并且利用这个规律应用到具体的实际业务中,提出两种历史记录保存策略,使路由逻辑更清晰,让SPA更容易。

H5 缓存机制浅析,移动端 Web 加载性能优化

2015/12/14 · HTML5 ·
IndexedDB,
性能,
移动前端

本文作者: 伯乐在线 –
腾讯bugly
。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

H5 手势解锁

扫码在线查看:

澳门微尼斯人手机版 3

或者点击查看手机版。

项目 GitHub
地址,H5HandLock。

首先,我要说明一下,对于这个项目,我是参考别人的,H5lock。

我觉得一个比较合理的解法应该是利用 canvas 来实现,不知道有没有大神用 css
来实现。如果纯用 css 的话,可以将连线先设置
display: none,当手指划过的时候,显示出来。光设置这些应该就非常麻烦吧。

之前了解过 canvas,但没有真正的写过,下面就来介绍我这几天学习 canvas
并实现 H5 手势解锁的过程。

History API回顾

HTML5 History
API包括2个方法:history.pushState()和history.replaceState(),和1个事件:window.onpopstate。

1 H5 缓存机制介绍

H5,即 HTML5,是新一代的 HTML
标准,加入很多新的特性。离线存储(也可称为缓存机制)是其中一个非常重要的特性。H5
引入的离线存储,这意味着 web
应用可进行缓存,并可在没有因特网连接时进行访问。

H5 应用程序缓存为应用带来三个优势:

  • 离线浏览 用户可在应用离线时使用它们
  • 速度 已缓存资源加载得更快
  • 减少服务器负载 浏览器将只从服务器下载更新过或更改过的资源。

根据标准,到目前为止,H5 一共有6种缓存机制,有些是之前已有,有些是 H5
才新加入的。

  1. 浏览器缓存机制
  2. Dom Storgage(Web Storage)存储机制
  3. Web SQL Database 存储机制
  4. Application Cache(AppCache)机制
  5. Indexed Database (IndexedDB)
  6. File System API

下面我们首先分析各种缓存机制的原理、用法及特点;然后针对 Anroid 移动端
Web 性能加载优化的需求,看如果利用适当缓存机制来提高 Web 的加载性能。


准备及布局设置

我这里用了一个比较常规的做法:

(function(w){ var handLock = function(option){} handLock.prototype = {
init : function(){}, … } w.handLock = handLock; })(window) // 使用 new
handLock({ el: document.getElementById(‘id’), … }).init();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
(function(w){
  var handLock = function(option){}
 
  handLock.prototype = {
    init : function(){},
    …
  }
 
  w.handLock = handLock;
})(window)
 
// 使用
new handLock({
  el: document.getElementById(‘id’),
  …
}).init();

常规方法,比较易懂和操作,弊端就是,可以被随意的修改。

传入的参数中要包含一个 dom 对象,会在这个 dom 对象內创建一个
canvas。当然还有一些其他的 dom 参数,比如 message,info 等。

关于 css 的话,懒得去新建文件了,就直接內联了。

pushState

history.pushState(stateObject, title, url),包括三个参数。

第一个参数用于存储该url对应的状态对象,该对象可在onpopstate事件中获取,也可在history对象中获取。

第二个参数是标题,目前浏览器并未实现。

第三个参数则是设定的url。一般设置为相对路径,如果设置为绝对路径时需要保证同源。

pushState函数向浏览器的历史堆栈压入一个url为设定值的记录,并改变历史堆栈的当前指针至栈顶。

>
在这里笔者使用历史堆栈和当前指针,用以说明浏览器对历史记录的管理策略。文档中并没有使用这样的词汇,笔者为了更形象的介绍接口对浏览器历史记录的影响,使用这样的描述,如有不当之处请及时指出(不过目前以这套模型为基础的逻辑实现中并未出现悖论)。

2 H5 缓存机制原理分析

canvas

replaceState

该接口与pushState参数相同,含义也相同。唯一的区别在于replaceState是替换浏览器历史堆栈的当前历史记录为设定的url。需要注意的是,replaceState不会改动浏览器历史堆栈的当前指针。

2.1 浏览器缓存机制

浏览器缓存机制是指通过 HTTP 协议头里的 Cache-Control(或 Expires)和
Last-Modified(或 Etag)等字段来控制文件缓存的机制。这应该是 WEB
中最早的缓存机制了,是在 HTTP 协议中实现的,有点不同于 Dom
Storage、AppCache
等缓存机制,但本质上是一样的。可以理解为,一个是协议层实现的,一个是应用层实现的。

Cache-Control
用于控制文件在本地缓存有效时长。最常见的,比如服务器回包:Cache-Control:max-age=600
表示文件在本地应该缓存,且有效时长是600秒(从发出请求算起)。在接下来600秒内,如果有请求这个资源,浏览器不会发出
HTTP 请求,而是直接使用本地缓存的文件。

Last-Modified
是标识文件在服务器上的最新更新时间。下次请求时,如果文件缓存过期,浏览器通过
If-Modified-Since
字段带上这个时间,发送给服务器,由服务器比较时间戳来判断文件是否有修改。如果没有修改,服务器返回304告诉浏览器继续使用缓存;如果有修改,则返回200,同时返回最新的文件。

Cache-Control 通常与 Last-Modified
一起使用。一个用于控制缓存有效时间,一个在缓存失效后,向服务查询是否有更新。

Cache-Control 还有一个同功能的字段:Expires。Expires
的值一个绝对的时间点,如:Expires: Thu, 10 Nov 2015 08:45:11
GMT,表示在这个时间点之前,缓存都是有效的。

Expires 是 HTTP1.0 标准中的字段,Cache-Control 是 HTTP1.1
标准中新加的字段,功能一样,都是控制缓存的有效时间。当这两个字段同时出现时,Cache-Control
是高优化级的。

Etag 也是和 Last-Modified 一样,对文件进行标识的字段。不同的是,Etag
的取值是一个对文件进行标识的特征字串。在向服务器查询文件是否有更新时,浏览器通过
If-None-Match
字段把特征字串发送给服务器,由服务器和文件最新特征字串进行匹配,来判断文件是否有更新。没有更新回包304,有更新回包200。Etag
和 Last-Modified
可根据需求使用一个或两个同时使用。两个同时使用时,只要满足基中一个条件,就认为文件没有更新。

另外有两种特殊的情况:

  • 手动刷新页面(F5),浏览器会直接认为缓存已经过期(可能缓存还没有过期),在请求中加上字段:Cache-Control:max-age=0,发包向服务器查询是否有文件是否有更新。
  • 强制刷新页面(Ctrl+F5),浏览器会直接忽略本地的缓存(有缓存也会认为本地没有缓存),在请求中加上字段:Cache-Control:no-cache(或
    Pragma:no-cache),发包向服务重新拉取文件。

下面是通过 Google Chrome
浏览器(用其他浏览器+抓包工具也可以)自带的开发者工具,对一个资源文件不同情况请求与回包的截图。

首次请求:200

澳门微尼斯人手机版 4

缓存有效期内请求:200(from cache)

澳门微尼斯人手机版 5

缓存过期后请求:304(Not Modified)

澳门微尼斯人手机版 6

一般浏览器会将缓存记录及缓存文件存在本地 Cache 文件夹中。Android 下 App
如果使用 Webview,缓存的文件记录及文件内容会存在当前 app 的 data
目录中。

分析:Cache-Control 和 Last-Modified 一般用在 Web 的静态资源文件上,如
JS、CSS
和一些图像文件。通过设置资源文件缓存属性,对提高资源文件加载速度,节省流量很有意义,特别是移动网络环境。但问题是:缓存有效时长该如何设置?如果设置太短,就起不到缓存的使用;如果设置的太长,在资源文件有更新时,浏览器如果有缓存,则不能及时取到最新的文件。

Last-Modified
需要向服务器发起查询请求,才能知道资源文件有没有更新。虽然服务器可能返回304告诉没有更新,但也还有一个请求的过程。对于移动网络,这个请求可能是比较耗时的。有一种说法叫“消灭304”,指的就是优化掉304的请求。

抓包发现,带 if-Modified-Since 字段的请求,如果服务器回包304,回包带有
Cache-Control:max-age 或 Expires
字段,文件的缓存有效时间会更新,就是文件的缓存会重新有效。304回包后如果再请求,则又直接使用缓存文件了,不再向服务器查询文件是否更新了,除非新的缓存时间再次过期。

另外,Cache-Control 与 Last-Modified
是浏览器内核的机制,一般都是标准的实现,不能更改或设置。以 QQ 浏览器的
X5为例,Cache-Control 与 Last-Modified
缓存不能禁用。缓存容量是12MB,不分HOST,过期的缓存会最先被清除。如果都没过期,应该优先清最早的缓存或最快到期的或文件大小最大的;过期缓存也有可能还是有效的,清除缓存会导致资源文件的重新拉取。

还有,浏览器,如
X5,在使用缓存文件时,是没有对缓存文件内容进行校验的,这样缓存文件内容被修改的可能。

分析发现,浏览器的缓存机制还不是非常完美的缓存机制。完美的缓存机制应该是这样的:

  1. 缓存文件没更新,尽可能使用缓存,不用和服务器交互;
  2. 缓存文件有更新时,第一时间能使用到新的文件;
  3. 缓存的文件要保持完整性,不使用被修改过的缓存文件;
  4. 缓存的容量大小要能设置或控制,缓存文件不能因为存储空间限制或过期被清除。
    以X5为例,第1、2条不能同时满足,第3、4条都不能满足。

在实际应用中,为了解决 Cache-Control
缓存时长不好设置的问题,以及为了”消灭304“,Web前端采用的方式是:

  1. 在要缓存的资源文件名中加上版本号或文件 MD5值字串,如
    common.d5d02a02.js,common.v1.js,同时设置
    Cache-Control:max-age=31536000,也就是一年。在一年时间内,资源文件如果本地有缓存,就会使用缓存;也就不会有304的回包。
  2. 如果资源文件有修改,则更新文件内容,同时修改资源文件名,如
    common.v2.js,html页面也会引用新的资源文件名。

通过这种方式,实现了:缓存文件没有更新,则使用缓存;缓存文件有更新,则第一时间使用最新文件的目的。即上面说的第1、2条。第3、4条由于浏览器内部机制,目前还无法满足。

1. 学习 canvas 并搞定画圆

MDN
上面有个简易的教程,大致浏览了一下,感觉还行。Canvas教程。

先创建一个 canvas,然后设置其大小,并通过 getContext
方法获得绘画的上下文:

var canvas = document.createElement(‘canvas’); canvas.width =
canvas.height = width; this.el.appendChild(canvas); this.ctx =
canvas.getContext(‘2d’);

1
2
3
4
5
var canvas = document.createElement(‘canvas’);
canvas.width = canvas.height = width;
this.el.appendChild(canvas);
 
this.ctx = canvas.getContext(‘2d’);

然后呢,先画 n*n 个圆出来:

JavaScript

createCircles: function(){ var ctx = this.ctx, drawCircle =
this.drawCircle, n = this.n; this.r = ctx.canvas.width / (2 + 4 * n) //
这里是参考的,感觉这种画圆的方式挺合理的,方方圆圆 r = this.r;
this.circles = []; // 用来存储圆心的位置 for(var i = 0; i < n;
i++){ for(var j = 0; j < n; j++){ var p = { x: j * 4 * r + 3 * r,
y: i * 4 * r + 3 * r, id: i * 3 + j } this.circles.push(p); } }
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); //
为了防止重复画 this.circles.forEach(function(v){ drawCircle(ctx, v.x,
v.y); // 画每个圆 }) }, drawCircle: function(ctx, x, y){ // 画圆函数
ctx.strokeStyle = ‘#FFFFFF’; ctx.lineWidth = 2; ctx.beginPath();
ctx.arc(x, y, this.r, 0, Math.PI * 2, true); ctx.closePath();
ctx.stroke(); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
createCircles: function(){
  var ctx = this.ctx,
    drawCircle = this.drawCircle,
    n = this.n;
  this.r = ctx.canvas.width / (2 + 4 * n) // 这里是参考的,感觉这种画圆的方式挺合理的,方方圆圆
  r = this.r;
  this.circles = []; // 用来存储圆心的位置
  for(var i = 0; i < n; i++){
    for(var j = 0; j < n; j++){
      var p = {
        x: j * 4 * r + 3 * r,
        y: i * 4 * r + 3 * r,
        id: i * 3 + j
      }
      this.circles.push(p);
    }
  }
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // 为了防止重复画
  this.circles.forEach(function(v){
    drawCircle(ctx, v.x, v.y); // 画每个圆
  })
},
 
drawCircle: function(ctx, x, y){ // 画圆函数
  ctx.strokeStyle = ‘#FFFFFF’;
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.arc(x, y, this.r, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.stroke();
}

画圆函数,需要注意:如何确定圆的半径和每个圆的圆心坐标(这个我是参考的),如果以圆心为中点,每个圆上下左右各扩展一个半径的距离,同时为了防止四边太挤,四周在填充一个半径的距离。那么得到的半径就是
width / ( 4 * n + 2),对应也可以算出每个圆所在的圆心坐标,也有一套公式,GET

onpopstate

该事件是window的属性。该事件会在调用浏览器的前进、后退以及执行history.forward、history.back、和history.go触发,因为这些操作有一个共性,即修改了历史堆栈的当前指针。在不改变document的前提下,一旦当前指针改变则会触发onpopstate事件。

2.2 Dom Storage 存储机制

DOM 存储是一套在 Web Applications 1.0
规范中首次引入的与存储相关的特性的总称,现在已经分离出来,单独发展成为独立的
W3C Web 存储规范。 DOM
存储被设计为用来提供一个更大存储量、更安全、更便捷的存储方法,从而可以代替掉将一些不需要让服务器知道的信息存储到
cookies 里的这种传统方法。

上面一段是对 Dom Storage 存储机制的官方表述。看起来,Dom Storage
机制类似 Cookies,但有一些优势。

Dom Storage 是通过存储字符串的 Key/Value 对来提供的,并提供 5MB
(不同浏览器可能不同,分 HOST)的存储空间(Cookies 才 4KB)。另外 Dom
Storage 存储的数据在本地,不像 Cookies,每次请求一次页面,Cookies
都会发送给服务器。

DOM Storage 分为 sessionStorage 和 localStorage。localStorage 对象和
sessionStorage
对象使用方法基本相同,它们的区别在于作用的范围不同。sessionStorage
用来存储与页面相关的数据,它在页面关闭后无法使用。而 localStorage
则持久存在,在页面关闭后也可以使用。

Dom Storage 提供了以下的存储接口:

XHTML

interface Storage { readonly attribute unsigned long length;
[IndexGetter] DOMString key(in unsigned long index); [NameGetter]
DOMString getItem(in DOMString key); [NameSetter] void setItem(in
DOMString key, in DOMString data); [NameDeleter] void removeItem(in
DOMString key); void clear(); };

1
2
3
4
5
6
7
8
interface Storage {
readonly attribute unsigned long length;
[IndexGetter] DOMString key(in unsigned long index);
[NameGetter] DOMString getItem(in DOMString key);
[NameSetter] void setItem(in DOMString key, in DOMString data);
[NameDeleter] void removeItem(in DOMString key);
void clear();
};

sessionStorage 是个全局对象,它维护着在页面会话(page
session)期间有效的存储空间。只要浏览器开着,页面会话周期就会一直持续。当页面重新载入(reload)或者被恢复(restores)时,页面会话也是一直存在的。每在新标签或者新窗口中打开一个新页面,都会初始化一个新的会话。

XHTML

<script type=”text/javascript”> //
当页面刷新时,从sessionStorage恢复之前输入的内容 window.onload =
function(){ if (window.sessionStorage) { var name =
window.sessionStorage.getItem(“name”); if (name != “” || name != null){
document.getElementById(“name”).value = name; } } }; //
将数据保存到sessionStorage对象中 function saveToStorage() { if
(window.sessionStorage) { var name =
document.getElementById(“name”).value;
window.sessionStorage.setItem(“name”, name);
window.location.href=”session_storage.html”; } } </script>
<form action=”./session_storage.html”> <input type=”text”
name=”name” id=”name”/> <input type=”button” value=”Save”
onclick=”saveToStorage()”/> </form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script type="text/javascript">
// 当页面刷新时,从sessionStorage恢复之前输入的内容
window.onload = function(){
    if (window.sessionStorage) {
        var name = window.sessionStorage.getItem("name");
        if (name != "" || name != null){
            document.getElementById("name").value = name;
         }
     }
};
 
// 将数据保存到sessionStorage对象中
function saveToStorage() {
    if (window.sessionStorage) {
        var name = document.getElementById("name").value;
        window.sessionStorage.setItem("name", name);
        window.location.href="session_storage.html";
     }
}
</script>
 
<form action="./session_storage.html">
    <input type="text" name="name" id="name"/>
    <input type="button" value="Save" onclick="saveToStorage()"/>
</form>

当浏览器被意外刷新的时候,一些临时数据应当被保存和恢复。sessionStorage
对象在处理这种情况的时候是最有用的。比如恢复我们在表单中已经填写的数据。

把上面的代码复制到
session_storage.html(也可以从附件中直接下载)页面中,用 Google Chrome
浏览器的不同 PAGE 或 WINDOW
打开,在输入框中分别输入不同的文字,再点击“Save”,然后分别刷新。每个
PAGE 或 WINDOW 显示都是当前PAGE输入的内容,互不影响。关闭
PAGE,再重新打开,上一次输入保存的内容已经没有了。

澳门微尼斯人手机版 7

澳门微尼斯人手机版 8

Local Storage 的接口、用法与 Session Storage 一样,唯一不同的是:Local
Storage 保存的数据是持久性的。当前 PAGE 关闭(Page Session
结束后),保存的数据依然存在。重新打开PAGE,上次保存的数据可以获取到。另外,Local
Storage 是全局性的,同时打开两个 PAGE
会共享一份存数据,在一个PAGE中修改数据,另一个 PAGE 中是可以感知到的。

XHTML

<script> //通过localStorage直接引用key, 另一种写法,等价于:
//localStorage.getItem(“pageLoadCount”);
//localStorage.setItem(“pageLoadCount”, value); if
(!localStorage.pageLoadCount) localStorage.pageLoadCount = 0;
localStorage.pageLoadCount = parseInt(localStorage.pageLoadCount) + 1;
document.getElementById(‘count’).textContent =
localStorage.pageLoadCount; </script> <p> You have viewed
this page <span id=”count”>an untold number of</span>
time(s). </p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
  //通过localStorage直接引用key, 另一种写法,等价于:
  //localStorage.getItem("pageLoadCount");
  //localStorage.setItem("pageLoadCount", value);
  if (!localStorage.pageLoadCount)
localStorage.pageLoadCount = 0;
     localStorage.pageLoadCount = parseInt(localStorage.pageLoadCount) + 1;
     document.getElementById(‘count’).textContent = localStorage.pageLoadCount;
</script>
 
<p>
    You have viewed this page
    <span id="count">an untold number of</span>
    time(s).
</p>

将上面代码复制到 local_storage.html
的页面中,用浏览器打开,pageLoadCount 的值是1;关闭 PAGE
重新打开,pageLoadCount 的值是2。这是因为第一次的值已经保存了。

澳门微尼斯人手机版 9

澳门微尼斯人手机版 10

用两个 PAGE 同时打开 local_storage.html,并分别交替刷新,发现两个 PAGE
是共享一个 pageLoadCount 的。

澳门微尼斯人手机版 11

澳门微尼斯人手机版 12

分析:Dom Storage 给 Web
提供了一种更录活的数据存储方式,存储空间更大(相对
Cookies),用法也比较简单,方便存储服务器或本地的一些临时数据。

从 DomStorage 提供的接口来看,DomStorage
适合存储比较简单的数据,如果要存储结构化的数据,可能要借助
JASON了,将要存储的对象转为 JASON
字串。不太适合存储比较复杂或存储空间要求比较大的数据,也不适合存储静态的文件等。

在 Android 内嵌 Webview 中,需要通过 Webview 设置接口启用 Dom Storage。

XHTML

WebView myWebView = (WebView) findViewById(R.id.webview); WebSettings
webSettings = myWebView.getSettings();
webSettings.setDomStorageEnabled(true);

1
2
3
WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setDomStorageEnabled(true);

拿 Android 类比的话,Web 的 Dom Storage 机制类似于 Android 的
SharedPreference 机制。

2. 画线

画线需要借助 touch event 来完成,也就是,当我们 touchstart
的时候,传入开始时的相对坐标,作为线的一端,当我们 touchmove
的时候,获得坐标,作为线的另一端,当我们 touchend 的时候,开始画线。

这只是一个测试画线功能,具体的后面再进行修改。

有两个函数,获得当前 touch 的相对坐标:

getTouchPos: function(e){ // 获得触摸点的相对位置 var rect =
e.target.getBoundingClientRect(); var p = { // 相对坐标 x:
e.touches[0].clientX – rect.left, y: e.touches[0].clientY – rect.top
}; return p; }

1
2
3
4
5
6
7
8
getTouchPos: function(e){ // 获得触摸点的相对位置
  var rect = e.target.getBoundingClientRect();
  var p = { // 相对坐标
    x: e.touches[0].clientX – rect.left,
    y: e.touches[0].clientY – rect.top
  };
  return p;
}

画线:

drawLine: function(p1, p2){ // 画线 this.ctx.beginPath();
this.ctx.lineWidth = 3; this.ctx.moveTo(p1.x, p2.y);
this.ctx.lineTo(p.x, p.y); this.ctx.stroke(); this.ctx.closePath(); },

1
2
3
4
5
6
7
8
drawLine: function(p1, p2){ // 画线
  this.ctx.beginPath();
  this.ctx.lineWidth = 3;
  this.ctx.moveTo(p1.x, p2.y);
  this.ctx.lineTo(p.x, p.y);
  this.ctx.stroke();
  this.ctx.closePath();
},

然后就是监听 canvas 的 touchstarttouchmove、和 touchend 事件了。

History API与业务实践

最常见的单页应用场景:列表页、商品详情页以及其内部的其他链接入口如图片页、评论页及其推荐其他商品详情页。以上提到的已经涉及到了4个单独业务逻辑页面(推荐的商品可复用商品详情页逻辑),分别是:列表、详情、图片详情和评论。将这4个页面合并到一个页面中,这就是最简单的SPA。为了用户的良好体验,必须设计合理的交互逻辑,最直观的就是浏览器(或手机app、微信公众号)的后退前进必须合乎业务逻辑特点。因此,这就涉及到了History
API的使用,也牵扯到浏览器的历史记录管理。

澳门微尼斯人手机版 13

上图为具体的逻辑示意图。在列表页,点击其中一个商品,这里是商品1,进入详情页。详情页包括了该商品的轮播图、商品的图片详情入口、评论入口和推荐的其他商品入口。接下来进行如下操作:进入图片详情页,后退至详情页再进入评论页;后退至商品1详情页再由推荐商品入口进入商品9详情页,同样在商品9详情页进入图片详情页和评论页,再后退至商品9详情页;由推荐商品入口进入商品34详情页,再进行类似操作。最后保证在商品34图片详情页或评论页可以顺利后退至最初的商品列表页。

>
上文中加粗的“后退”,意味着使用浏览器后退按钮,或者使用手机自带的返回,再或者使用页面上提供的后退按钮。

这样一个很细小的需求,但是一旦真正放手去做却不是那么容易。仅仅根据History
API的2个函数和1个事件去盲目的尝试实现,这属于盲人摸象,鲁棒性不高。不清楚浏览器的历史记录管理策略,不了解当前页面的历史记录数量,此种情况若要实现上述场景就有些麻烦。所以在具体动手写业务代码之前,需要搞懂History的pushState和replaceState具体如何影响历史记录栈。

2.3 Web SQL Database存储机制

H5 也提供基于 SQL
的数据库存储机制,用于存储适合数据库的结构化数据。根据官方的标准文档,Web
SQL Database 存储机制不再推荐使用,将来也不再维护,而是推荐使用 AppCache
和 IndexedDB。

现在主流的浏览器(点击查看浏览器支持情况)都还是支持 Web SQL Database
存储机制的。Web SQL Database 存储机制提供了一组 API 供 Web App
创建、存储、查询数据库。

下面通过简单的例子,演示下 Web SQL Database 的使用。

XHTML

<script> if(window.openDatabase){ //打开数据库,如果没有则创建 var
db = openDatabase(‘mydb’, ‘1.0’, ‘Test DB’, 2 * 1024);
//通过事务,创建一个表,并添加两条记录 db.transaction(function (tx) {
tx.executeSql(‘CREATE TABLE IF NOT EXISTS LOGS (id unique, log)’);
tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (1, “foobar”)’);
tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (2, “logmsg”)’); });
//查询表中所有记录,并展示出来 db.transaction(function (tx) {
tx.executeSql(‘SELECT * FROM LOGS’, [], function (tx, results) { var
len = results.rows.length, i; msg = “<p>Found rows: ” + len +
“</p>”; for(i=0; i<len; i++){ msg += “<p>” +
results.rows.item(i).log + “</p>”; }
document.querySelector(‘#status’).innerHTML = msg; }, null); }); }
</script> <div id=”status” name=”status”>Status
Message</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script>
    if(window.openDatabase){
      //打开数据库,如果没有则创建
      var db = openDatabase(‘mydb’, ‘1.0’, ‘Test DB’, 2 * 1024);
 
       //通过事务,创建一个表,并添加两条记录
      db.transaction(function (tx) {
           tx.executeSql(‘CREATE TABLE IF NOT EXISTS LOGS (id unique, log)’);
           tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (1, "foobar")’);
           tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (2, "logmsg")’);
       });
 
      //查询表中所有记录,并展示出来
     db.transaction(function (tx) {
         tx.executeSql(‘SELECT * FROM LOGS’, [], function (tx, results) {
             var len = results.rows.length, i;
             msg = "<p>Found rows: " + len + "</p>";
             for(i=0; i<len; i++){
                 msg += "<p>" + results.rows.item(i).log + "</p>";
             }
             document.querySelector(‘#status’).innerHTML =  msg;
             }, null);
      });
}
 
</script>
 
<div id="status" name="status">Status Message</div>

将上面代码复制到 sql_database.html 中,用浏览器打开,可看到下面的内容。

澳门微尼斯人手机版 14

官方建议浏览器在实现时,对每个 HOST
的数据库存储空间作一定限制,建议默认是 5MB(分
HOST)的配额;达到上限后,可以申请更多存储空间。另外,现在主流浏览器 SQL
Database 的实现都是基于 SQLite。

分析:SQL Database
的主要优势在于能够存储结构复杂的数据,能充分利用数据库的优势,可方便对数据进行增加、删除、修改、查询。由于
SQL 语法的复杂性,使用起来麻烦一些。SQL Database
也不太适合做静态文件的缓存。

在 Android 内嵌 Webview 中,需要通过 Webview 设置接口启用 SQL
Database,同时还要设置数据库文件的存储路径。

XHTML

WebView myWebView = (WebView) findViewById(R.id.webview); WebSettings
webSettings = myWebView.getSettings();
webSettings.setDatabaseEnabled(true); final String dbPath =
getApplicationContext().getDir(“db”, Context.MODE_PRIVATE).getPath();
webSettings.setDatabasePath(dbPath);

1
2
3
4
5
WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setDatabaseEnabled(true);
final String dbPath = getApplicationContext().getDir("db", Context.MODE_PRIVATE).getPath();
webSettings.setDatabasePath(dbPath);

Android
系统也使用了大量的数据库用来存储数据,比如联系人、短消息等;数据库的格式也
SQLite。Android 也提供了 API 来操作 SQLite。Web SQL Database
存储机制就是通过提供一组 API,借助浏览器的实现,将这种 Native
的功能提供给了 Web App。

3. 画折线

所谓的画折线,就是,将已经触摸到的点连起来,可以把它看作是画折线。

首先,要用两个数组,一个数组用于已经 touch 过的点,另一个数组用于存储未
touch 的点,然后在 move 监听时候,对 touch
的相对位置进行判断,如果触到点,就把该点从未 touch 移到 touch
中,然后,画折线,思路也很简单。

澳门微尼斯人手机版,JavaScript

drawLine: function(p){ // 画折线 this.ctx.beginPath();
this.ctx.lineWidth = 3; this.ctx.moveTo(this.touchCircles[0].x,
this.touchCircles[0].y); for (var i = 1 ; i <
this.touchCircles.length ; i++) {
this.ctx.lineTo(this.touchCircles[i].x, this.touchCircles[i].y); }
this.ctx.lineTo(p.x, p.y); this.ctx.stroke(); this.ctx.closePath(); },

1
2
3
4
5
6
7
8
9
10
11
drawLine: function(p){ // 画折线
  this.ctx.beginPath();
  this.ctx.lineWidth = 3;
  this.ctx.moveTo(this.touchCircles[0].x, this.touchCircles[0].y);
  for (var i = 1 ; i < this.touchCircles.length ; i++) {
    this.ctx.lineTo(this.touchCircles[i].x, this.touchCircles[i].y);
  }
  this.ctx.lineTo(p.x, p.y);
  this.ctx.stroke();
  this.ctx.closePath();
},

JavaScript

judgePos: function(p){ // 判断 触点 是否在 circle 內 for(var i = 0; i
< this.restCircles.length; i++){ temp = this.restCircles[i];
if(Math.abs(p.x – temp.x) < r && Math.abs(p.y – temp.y) < r){
this.touchCircles.push(temp); this.restCircles.splice(i, 1);
this.touchFlag = true; break; } } }

1
2
3
4
5
6
7
8
9
10
11
judgePos: function(p){ // 判断 触点 是否在 circle 內
  for(var i = 0; i < this.restCircles.length; i++){
    temp = this.restCircles[i];
    if(Math.abs(p.x – temp.x) < r && Math.abs(p.y – temp.y) < r){
      this.touchCircles.push(temp);
      this.restCircles.splice(i, 1);
      this.touchFlag = true;
      break;
    }
  }
}

探究浏览器历史记录策略与History API的关系

由于浏览器并未针对每个页面的历史记录提供具体访问的接口,因此所有的测试都是黑盒。但是在移动端的中,大都是webkit内核,其webcore的具体实现也都相近,因此该节得出的结论完全可以在移动端使用。

尽管无法访问当前页的历史记录栈,但是浏览器却提供了history.length属性,它标明了当前历史记录栈的个数。该值会帮助我们更好地分析History
API对历史记录栈的影响。

澳门微尼斯人手机版 15

上图为测试实例。其中白色箭头意味着点击该链接并执行pushState操作(即操作1),黑色箭头则执行浏览器后退,红色的圆点为历史记录栈中的当前指针,而每个项则为历史记录栈,历史记录的个数则为其子项的数量。

初始在第一个搜索列表页,执行操作1后历史堆栈数量增加,当前指针上移一位至26788.html;
同理在执行3次操作1,历史堆栈递增3个,当前指针仍在栈顶,即78099.html;
此后进行浏览器后退,历史堆栈数量不变,当前指针下移一位至8819.html;
在此处再执行操作1,栈顶元素改变,当前指针移至栈顶,历史堆栈数量不变;
继续执行操作1,栈顶元素改变,指针移至栈顶,历史堆栈数量加一;
执行浏览器后退,栈顶元素不变,指针下移一位至8128.html,历史堆栈数量不变;
执行浏览器后退,栈顶元素不变,指针下移一位至8819.html,历史堆栈数量不变;
执行浏览器后退,栈顶元素不变,指针下移一位至8128.html,历史堆栈数量不变;
执行浏览器后退,栈顶元素不变,指针下移一位至26788.html,历史堆栈数量不变;
执行操作1,栈顶元素变为9721.html,指针上移至栈顶,历史堆栈数量变为3;
执行操作1,栈顶元素变为8387.html,指针上移至栈顶,历史堆栈数量变为4;
执行浏览器后退,栈顶元素不变,指针下移一位至9721.html,历史堆栈数量不变;
执行浏览器后退,栈顶元素不变,指针下移一位至26788.html,历史堆栈数量不变;
执行浏览器后退,栈顶元素不变,指针下移一位至search.html,历史堆栈数量不变;
执行操作1,栈顶元素变为xxx.html,指针上移至栈顶,历史堆栈数量变为2; …

至此,实验结束。虽然这里仅仅列出了这一个测试用例,但是其实笔者做了更多更复杂的测试,并且平台涉及了pc和移动端的浏览器、微信和原生webview,结果都一样。这一系列测试说明了很多问题,总结之一句话则是:

浏览器针对每个页面维护一个History栈。执行pushState函数可压入设定的url至栈顶,同时修改当前指针;
当执行back操作时,history栈大小并不会改变(history.length不变),仅仅移动当前指针的位置;
若当前指针在history栈的中间位置(非栈顶),此时执行pushState会改变history栈的大小。
总结pushState的规律,可发现当前指针在history栈顶部时执行pushState,会增加history栈大小;若current指针不在栈顶则会在当前指针所在位置添加项。执行back操作并不修改history栈大小,因此可以通过back和forward在当前大小的history栈中自由移动。

掌握这个规律,就知道如何维护历史记录,就知道在什么状态下需要pushState。回到最初的需求,产品经理规定从商品34的评论页,按后退按钮可以到达最初的列表页,但是他并没有详细规定如何后退。在这里就会有2中实现方式:

  • 每一次后退,会回到上次的访问地方。如,在商品34的评论页,会后退至商品34的详情页,再后退则会回到商品9的详情页,直至回到列表页。
  • 总共维护三层历史记录,第一层(栈底)为列表页,第二层为详情页,第三层(栈顶)为评论页或图片详情页。在该种实现下,由商品34的评论页第一次后退至商品34的详情页,第二次后退至列表页。

针对第一种,其实实现最为简单,因为这完全是由浏览器默认控制历史记录堆栈,而我们只需在合适的时机调用pushState将url插入到堆栈,然后在onpopstate处理函数中监听对应的时间即可:

window.addEventListener(‘popstate’, function (e) {
console.log(‘popstate’) // 后退(前进)至商品详情页,异步加载数据并渲染
if(e.state && e.state.indexOf(‘/shop/sku/’) !== -1){
ajaxDetail(e.state,true); }else //
后退(前进)至评论页,异步加载数据渲染 if(e.state &&
e.state.indexOf(‘/shop/comment/commentList.html’) !== -1){
ajaxComment(e.state,true); }else //
后退(前进)至图片详情页,异步加载数据渲染 if(e.state &&
e.state.indexOf(‘/shop/item/pictext/’) !== -1){ ajaxPic(e.state,true);
}else // 后退(前进)至列表页,隐藏浮层 if(e.state &&
e.state.indexOf(‘/search/’) !== -1){ // 隐藏spa的浮层
$(‘.spa-container’).css(‘zIndex’,’-1′); } });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
window.addEventListener(‘popstate’, function (e) {
    
    console.log(‘popstate’)
    // 后退(前进)至商品详情页,异步加载数据并渲染
    if(e.state && e.state.indexOf(‘/shop/sku/’) !== -1){
      ajaxDetail(e.state,true);  
    }else
    // 后退(前进)至评论页,异步加载数据渲染
    if(e.state && e.state.indexOf(‘/shop/comment/commentList.html’) !== -1){
      ajaxComment(e.state,true);
    }else
    // 后退(前进)至图片详情页,异步加载数据渲染
    if(e.state && e.state.indexOf(‘/shop/item/pictext/’) !== -1){
      ajaxPic(e.state,true);
    }else
    // 后退(前进)至列表页,隐藏浮层
    if(e.state && e.state.indexOf(‘/search/’) !== -1){
      // 隐藏spa的浮层
      $(‘.spa-container’).css(‘zIndex’,’-1′);
    }
    
  });

针对第二种实现,则是本文的重点。毕竟,由浏览器默认维护的历史堆栈在某些业务场景中并不匹配,因此需要开发者自己维护一个历史记录栈。在本次实现中,由于总共涉及4张页面的显示,因此我们设定了3层历史堆栈,这很好理解。

为了构建这样的历史记录栈,在主页面(即列表页)中需要额外添加两条历史记录。这是由于默认打开列表页时,当前页面的url已加入历史记录栈中,

function push(state){ history.pushState(state, null, location.pathname +
location.search); } // ‘abc’用于标示初始列表页
history.replaceState(‘abc’,null,location.pathname + location.search) //
压入两条历史记录 push(); push();

1
2
3
4
5
6
7
8
9
function push(state){
    history.pushState(state, null, location.pathname + location.search);
  }
  // ‘abc’用于标示初始列表页
  history.replaceState(‘abc’,null,location.pathname + location.search)
  
  // 压入两条历史记录
  push();
  push();

这样,打开列表页后就会创建3个历史记录,并且这3个历史记录的url都为列表页的url,这与后面的操作并无影响。

在列表页中打开详情页,需要做额外的处理。由于按照我们设计的历史记录栈,第二层应该为详情页,而此时在初始化后,历史记录栈的当前指针已指向栈顶元素,因此需要将当前指针下移一位。这里就需要history.back来完成。

$(‘.item-list’).on(‘click’,’a’,handler); // 异步加载详情数据 var handler
= function(e,isScrollXClick){ var a = this;
ajaxDetail($(a).attr(‘href’),isScrollXClick); return false; }; var
isScrollXClick; /** * @params: url 请求路径 isScrollXClick:
是否点击推荐商品 * */ var ajaxDetail = function(url,isScrollXClick){
$.ajax({ url: ‘/api’ + url, success: function(data){ … …
if(!isScrollXClick){ console.log(‘I am back!’) // 在代码中进行back or
forward并不会立即出发popstate事件,以v8引擎为例,在执行back之后 //
的大概18us之后会触发事件,而此时如果立即通过replaceState修改url则会造成失败,修改的是
// history stack栈顶的url. // 这里通过异步执行replaceState兼容
history.back(); } // 异步触发 setTimeout(function(){
history.replaceState(url, null, url); }) //
针对推荐栏的商品,循环绑定事件,此处用事件代理优化
$(‘#J_PDSlider’).on(‘click’,’a’,function(e){ isScrollXClick = 1;
handler.call(this,e,isScrollXClick); return false; }); }, error:
function(xhr, type){ alert(‘Ajax error!’) } }) };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
$(‘.item-list’).on(‘click’,’a’,handler);
 
// 异步加载详情数据
var handler = function(e,isScrollXClick){
    var a = this;
    ajaxDetail($(a).attr(‘href’),isScrollXClick);
    return false;
};
 
var isScrollXClick;
  /**
   * @params: url 请求路径 isScrollXClick: 是否点击推荐商品
   *
   */
  var ajaxDetail = function(url,isScrollXClick){
 
     $.ajax({
      url: ‘/api’ + url,
      success: function(data){
        …
        …
        if(!isScrollXClick){
          console.log(‘I am back!’)
 
          // 在代码中进行back or forward并不会立即出发popstate事件,以v8引擎为例,在执行back之后
          // 的大概18us之后会触发事件,而此时如果立即通过replaceState修改url则会造成失败,修改的是
          // history stack栈顶的url.
          
          // 这里通过异步执行replaceState兼容
          history.back();      
          
        }
          
        // 异步触发
        setTimeout(function(){
          history.replaceState(url, null, url);
        })
 
        // 针对推荐栏的商品,循环绑定事件,此处用事件代理优化
        $(‘#J_PDSlider’).on(‘click’,’a’,function(e){
          isScrollXClick = 1;
          handler.call(this,e,isScrollXClick);
          return false;
        });
      },
      error: function(xhr, type){
        alert(‘Ajax error!’)
      }
     })
  };

在此处实现,通过isScrollXClick变量判断是否点击的是推荐商品,如果不是则需要执行back操作,下移指针。此时指针是指在第二层,但是浏览器和第二层历史记录的url仍为初始化设定的url,因此需要修改,在这里异步修改当前url。

之所以异步执行replaceState,是由于webkit触发popState事件决定的。在代码中执行history.back
或者history.forward,并不会立即返回,也不会立即触发popState事件。由于没有阅读webkit的源码,因此无从推测执行back或者forward后具体需要额外做什么操作,它们之间有着10us级别的间隔,因此此处必须使用setTimeout实现异步改变url。

在具体开发过程中,这个问题困扰着笔者好几天,终于在一次调试过程中发现浏览器url的变动,才联想到可能是由事件触发的时间差导致。

对于图片详情和评论的逻辑处理,则和上文类似,无需多言。

最后一次后退需要回到列表页,而在初始化阶段我们给列表页设置了state为“abc”,特殊的标示该路由,因此在popState事件处理中,我们就可以根据该项回到初始页:

window.addEventListener(‘popstate’, function (e) { if(e.state &&
e.state.indexOf(‘/shop/sku/’) !== -1){ ajaxDetail(e.state,true); }else
if(e.state && e.state.indexOf(‘abc’) !== -1){ // 隐藏spa的浮层
$(‘.spa-container’).css(‘zIndex’,’-1′); push(); push(); } });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
window.addEventListener(‘popstate’, function (e) {
 
    if(e.state && e.state.indexOf(‘/shop/sku/’) !== -1){
      ajaxDetail(e.state,true);  
    }else if(e.state && e.state.indexOf(‘abc’) !== -1){
      // 隐藏spa的浮层
      $(‘.spa-container’).css(‘zIndex’,’-1′);
      
      
      push();
      push();
    }
    
    
  });

如果回到初始页,隐藏浮层,同时在执行2次push操作。根据上节发现的规律,在初始页执行2次push操作,会在当前指针位置重新添加2个历史记录,当前指针指向栈顶元素,历史记录栈的数量不变,仍为3。这样就完成了简单的由开发者自定义维护历史堆栈的spa系统。

2.4 Application Cache 机制

Application Cache(简称 AppCache)似乎是为支持 Web App
离线使用而开发的缓存机制。它的缓存机制类似于浏览器的缓存(Cache-Control

Last-Modified)机制,都是以文件为单位进行缓存,且文件有一定更新机制。但
AppCache 是对浏览器缓存机制的补充,不是替代。

先拿 W3C 官方的一个例子,说下 AppCache 机制的用法与功能。

XHTML

<!DOCTYPE html> <html manifest=”demo_html.appcache”>
<body> <script src=”demo_time.js”></script> <p
id=”timePara”><button onclick=”getDateTime()”>Get Date and
Time</button></p> <p><img src=”img_logo.gif”
width=”336″ height=”69″></p> <p>Try opening <a
href=”tryhtml5_html_manifest.htm” target=”_blank”>this
page</a>, then go offline, and reload the page. The script and the
image should still work.</p> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html manifest="demo_html.appcache">
<body>
 
<script src="demo_time.js"></script>
 
<p id="timePara"><button onclick="getDateTime()">Get Date and Time</button></p>
<p><img src="img_logo.gif" width="336" height="69"></p>
<p>Try opening <a href="tryhtml5_html_manifest.htm" target="_blank">this page</a>, then go offline, and reload the page. The script and the image should still work.</p>
 
</body>
</html>

上面 HTML 文档,引用外部一个 JS 文件和一个 GIF 图片文件,在其 HTML
头中通过 manifest 属性引用了一个 appcache 结尾的文件。

我们在 Google Chrome 浏览器中打开这个 HTML 链接,JS
功能正常,图片也显示正常。禁用网络,关闭浏览器重新打开这个链接,发现 JS
工作正常,图片也显示正常。当然也有可能是浏览缓存起的作用,我们可以在文件的浏览器缓存过期后,禁用网络再试,发现
HTML 页面也是正常的。

通过 Google Chrome 浏览器自带的工具,我们可以查看已经缓存的 AppCache(分
HOST)。

澳门微尼斯人手机版 16

上面截图中的缓存,就是我们刚才打开 HTML 的页面
AppCache。从截图中看,HTML 页面及 HTML 引用的 JS、GIF
图像文件都被缓存了;另外 HTML 头中 manifest 属性引用的 appcache
文件也缓存了。

AppCache 的原理有两个关键点:manifest 属性和 manifest 文件。

HTML 在头中通过 manifest 属性引用 manifest 文件。manifest
文件,就是上面以 appcache
结尾的文件,是一个普通文件文件,列出了需要缓存的文件。

澳门微尼斯人手机版 17

上面截图中的 manifest 文件,就 HTML 代码引用的 manifest
文件。文件比较简单,第一行是关键字,第二、三行就是要缓存的文件路径(相对路径)。这只是最简单的
manifest 文件,完整的还包括其他关键字与内容。引用 manifest 文件的 HTML
和 manifest 文件中列出的要缓存的文件最终都会被浏览器缓存。

完整的 manifest 文件,包括三个 Section,类型 Windows 中 ini 配置文件的
Section,不过不要中括号。

  1. CACHE MANIFEST – Files listed under this header will be cached after
    they are downloaded for the first time
  2. NETWORK – Files listed under this header require a connection to the
    server, and will never be cached
  3. FALLBACK – Files listed under this header specifies fallback pages
    if a page is inaccessible

完整的 manifest 文件,如:

XHTML

CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js
NETWORK: login.asp FALLBACK: /html/ /offline.html

1
2
3
4
5
6
7
8
9
10
11
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
 
NETWORK:
login.asp
 
FALLBACK:
/html/ /offline.html

总的来说,浏览器在首次加载 HTML 文件时,会解析 manifest 属性,并读取
manifest 文件,获取 Section:CACHE MANIFEST
下要缓存的文件列表,再对文件缓存。

AppCache
的缓存文件,与浏览器的缓存文件分开存储的,还是一份?应该是分开的。因为
AppCache 在本地也有 5MB(分 HOST)的空间限制。

AppCache
在首次加载生成后,也有更新机制。被缓存的文件如果要更新,需要更新
manifest
文件。因为浏览器在下次加载时,除了会默认使用缓存外,还会在后台检查
manifest 文件有没有修改(byte by byte)。发现有修改,就会重新获取
manifest 文件,对 Section:CACHE MANIFEST 下文件列表检查更新。manifest
文件与缓存文件的检查更新也遵守浏览器缓存机制。

如用用户手动清了 AppCache
缓存,下次加载时,浏览器会重新生成缓存,也可算是一种缓存的更新。另外,
Web App 也可用代码实现缓存更新。

分析:AppCache
看起来是一种比较好的缓存方法,除了缓存静态资源文件外,也适合构建 Web
离线 App。在实际使用中有些需要注意的地方,有一些可以说是”坑“。

  1. 要更新缓存的文件,需要更新包含它的 manifest
    文件,那怕只加一个空格。常用的方法,是修改 manifest
    文件注释中的版本号。如:# 2012-02-21 v1.0.0
  2. 被缓存的文件,浏览器是先使用,再通过检查 manifest
    文件是否有更新来更新缓存文件。这样缓存文件可能用的不是最新的版本。
  3. 在更新缓存过程中,如果有一个文件更新失败,则整个更新会失败。
  4. manifest 和引用它的HTML要在相同 HOST。
  5. manifest 文件中的文件列表,如果是相对路径,则是相对 manifest
    文件的相对路径。
  6. manifest 也有可能更新出错,导致缓存文件更新失败。
  7. 没有缓存的资源在已经缓存的 HTML
    中不能加载,即使有网络。例如:
  8. manifest 文件本身不能被缓存,且 manifest
    文件的更新使用的是浏览器缓存机制。所以 manifest 文件的 Cache-Control
    缓存时间不能设置太长。

另外,根据官方文档,AppCache
已经不推荐使用了,标准也不会再支持。现在主流的浏览器都是还支持
AppCache的,以后就不太确定了。

在Android 内嵌 Webview中,需要通过 Webview 设置接口启用
AppCache,同时还要设置缓存文件的存储路径,另外还可以设置缓存的空间大小。

XHTML

WebView myWebView = (WebView) findViewById(R.id.webview); WebSettings
webSettings = myWebView.getSettings();
webSettings.setAppCacheEnabled(true); final String cachePath =
getApplicationContext().getDir(“cache”,
Context.MODE_PRIVATE).getPath();
webSettings.setAppCachePath(cachePath);
webSettings.setAppCacheMaxSize(5*1024*1024);

1
2
3
4
5
6
WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setAppCacheEnabled(true);
final String cachePath = getApplicationContext().getDir("cache", Context.MODE_PRIVATE).getPath();
webSettings.setAppCachePath(cachePath);
webSettings.setAppCacheMaxSize(5*1024*1024);

4. 标记已画

前面已经说了,我们把已经 touch
的点(圆)放到数组中,这个时候需要将这些已经 touch
的点给标记一下,在圆心处画一个小实心圆:

JavaScript

drawPoints: function(){ for (var i = 0 ; i < this.touchCircles.length
; i++) { this.ctx.fillStyle = ‘#FFFFFF’; this.ctx.beginPath();
this.ctx.arc(this.touchCircles[i].x, this.touchCircles[i].y, this.r
/ 2, 0, Math.PI * 2, true); this.ctx.closePath(); this.ctx.fill(); } }

1
2
3
4
5
6
7
8
9
drawPoints: function(){
  for (var i = 0 ; i < this.touchCircles.length ; i++) {
    this.ctx.fillStyle = ‘#FFFFFF’;
    this.ctx.beginPath();
    this.ctx.arc(this.touchCircles[i].x, this.touchCircles[i].y, this.r / 2, 0, Math.PI * 2, true);
    this.ctx.closePath();
    this.ctx.fill();
  }
}

同时添加一个 reset 函数,当 touchend 的时候调用,400ms 调用 reset 重置
canvas。

到现在为止,一个 H5 手势解锁的简易版已经基本完成。

回顾

之所以会写这篇文章完全是出于偶然,由于实际项目的各种需求我们不应该仅仅将眼光停留在使用API的层面上。另外,在开发过程中遇到难以解决的问题,需要提出各种合理的设想并用详实的实验证明,在得到相对应的结论后需要利用该结论去例证其他场景,这样才能确保解决方案的可靠性。目前网络上或者书籍中并未提供任何手动维护历史记录堆栈的方法,也未明确指出History
API与浏览器历史记录之间如何影响,因此本文对于旨在利用History
API实现spa的开发者而言还是有些指导意义的。

打赏支持我写出更多好文章,谢谢!

打赏作者

2.5 Indexed Database

IndexedDB 也是一种数据库的存储机制,但不同于已经不再支持的 Web SQL
Database。IndexedDB 不是传统的关系数据库,可归为 NoSQL 数据库。IndexedDB
又类似于 Dom Storage 的 key-value
的存储方式,但功能更强大,且存储空间更大。

IndexedDB 存储数据是 key-value 的形式。Key 是必需,且要唯一;Key
可以自己定义,也可由系统自动生成。Value 也是必需的,但 Value
非常灵活,可以是任何类型的对象。一般 Value 都是通过 Key 来存取的。

IndexedDB 提供了一组 API,可以进行数据存、取以及遍历。这些 API
都是异步的,操作的结果都是在回调中返回。

下面代码演示了 IndexedDB 中 DB
的打开(创建)、存储对象(可理解成有关系数据的”表“)的创建及数据存取、遍历基本功能。

XHTML

<script type=”text/javascript”> var db; window.indexedDB =
window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB ||
window.msIndexedDB; //浏览器是否支持IndexedDB if (window.indexedDB) {
//打开数据库,如果没有,则创建 var openRequest =
window.indexedDB.open(“people_db”, 1); //DB版本设置或升级时回调
openRequest.onupgradeneeded = function(e) { console.log(“Upgrading…”);
var thisDB = e.target.result;
if(!thisDB.objectStoreNames.contains(“people”)) { console.log(“Create
Object Store: people.”); //创建存储对象,类似于关系数据库的表
thisDB.createObjectStore(“people”, { autoIncrement:true });
//创建存储对象, 还创建索引 //var objectStore =
thisDB.createObjectStore(“people”,{ autoIncrement:true }); // //first
arg is name of index, second is the path (col);
//objectStore.createIndex(“name”,”name”, {unique:false});
//objectStore.createIndex(“email”,”email”, {unique:true}); } }
//DB成功打开回调 openRequest.onsuccess = function(e) {
console.log(“Success!”); //保存全局的数据库对象,后面会用到 db =
e.target.result; //绑定按钮点击事件
document.querySelector(“#addButton”).addEventListener(“click”,
addPerson, false);
document.querySelector(“#getButton”).addEventListener(“click”,
getPerson, false);
document.querySelector(“#getAllButton”).addEventListener(“click”,
getPeople, false);
document.querySelector(“#getByName”).addEventListener(“click”,
getPeopleByNameIndex1, false); } //DB打开失败回调 openRequest.onerror =
function(e) { console.log(“Error”); console.dir(e); } }else{
alert(‘Sorry! Your browser doesn\’t support the IndexedDB.’); }
//添加一条记录 function addPerson(e) { var name =
document.querySelector(“#name”).value; var email =
document.querySelector(“#email”).value; console.log(“About to add
“+name+”/”+email); var transaction =
db.transaction([“people”],”readwrite”); var store =
transaction.objectStore(“people”); //Define a person var person = {
name:name, email:email, created:new Date() } //Perform the add var
request = store.add(person); //var request = store.put(person, 2);
request.onerror = function(e) {
console.log(“Error”,e.target.error.name); //some type of error handler }
request.onsuccess = function(e) { console.log(“Woot! Did it.”); } }
//通过KEY查询记录 function getPerson(e) { var key =
document.querySelector(“#key”).value; if(key === “” || isNaN(key))
return; var transaction = db.transaction([“people”],”readonly”); var
store = transaction.objectStore(“people”); var request =
store.get(Number(key)); request.onsuccess = function(e) { var result =
e.target.result; console.dir(result); if(result) { var s =
“<p><h2>Key “+key+”</h2></p>”; for(var field in
result) { s+= field+”=”+result[field]+”<br/>”; }
document.querySelector(“#status”).innerHTML = s; } else {
document.querySelector(“#status”).innerHTML = “<h2>No
match!</h2>”; } } } //获取所有记录 function getPeople(e) { var s =
“”; db.transaction([“people”],
“readonly”).objectStore(“people”).openCursor().onsuccess = function(e) {
var cursor = e.target.result; if(cursor) { s += “<p><h2>Key
“+cursor.key+”</h2></p>”; for(var field in cursor.value) {
s+= field+”=”+cursor.value[field]+”<br/>”; } s+=”</p>”;
cursor.continue(); } document.querySelector(“#status2”).innerHTML = s;
} } //通过索引查询记录 function getPeopleByNameIndex(e) { var name =
document.querySelector(“#name1”).value; var transaction =
db.transaction([“people”],”readonly”); var store =
transaction.objectStore(“people”); var index = store.index(“name”);
//name is some value var request = index.get(name); request.onsuccess =
function(e) { var result = e.target.result; if(result) { var s =
“<p><h2>Name “+name+”</h2><p>”; for(var field in
result) { s+= field+”=”+result[field]+”<br/>”; }
s+=”</p>”; } else { document.querySelector(“#status3”).innerHTML
= “<h2>No match!</h2>”; } } } //通过索引查询记录 function
getPeopleByNameIndex1(e) { var s = “”; var name =
document.querySelector(“#name1”).value; var transaction =
db.transaction([“people”],”readonly”); var store =
transaction.objectStore(“people”); var index = store.index(“name”);
//name is some value index.openCursor().onsuccess = function(e) { var
cursor = e.target.result; if(cursor) { s += “<p><h2>Key
“+cursor.key+”</h2></p>”; for(var field in cursor.value) {
s+= field+”=”+cursor.value[field]+”<br/>”; } s+=”</p>”;
cursor.continue(); } document.querySelector(“#status3″).innerHTML = s;
} } </script> <p>添加数据<br/> <input type=”text”
id=”name” placeholder=”Name”><br/> <input type=”email”
id=”email” placeholder=”Email”><br/> <button
id=”addButton”>Add Data</button> </p>
<p>根据Key查询数据<br/> <input type=”text” id=”key”
placeholder=”Key”><br/> <button id=”getButton”>Get
Data</button> </p> <div id=”status”
name=”status”></div> <p>获取所有数据<br/>
<button id=”getAllButton”>Get EveryOne</button> </p>
<div id=”status2″ name=”status2″></div>
<p>根据索引:Name查询数据<br/> <input type=”text”
id=”name1″ placeholder=”Name”><br/> <button
id=”getByName”>Get ByName</button> </p> <div
id=”status3″ name=”status3″></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<script type="text/javascript">
 
var db;
 
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
 
//浏览器是否支持IndexedDB
if (window.indexedDB) {
   //打开数据库,如果没有,则创建
   var openRequest = window.indexedDB.open("people_db", 1);
 
   //DB版本设置或升级时回调
   openRequest.onupgradeneeded = function(e) {
       console.log("Upgrading…");
 
       var thisDB = e.target.result;
       if(!thisDB.objectStoreNames.contains("people")) {
           console.log("Create Object Store: people.");
 
           //创建存储对象,类似于关系数据库的表
           thisDB.createObjectStore("people", { autoIncrement:true });
 
          //创建存储对象, 还创建索引
          //var objectStore = thisDB.createObjectStore("people",{ autoIncrement:true });
         // //first arg is name of index, second is the path (col);
        //objectStore.createIndex("name","name", {unique:false});
       //objectStore.createIndex("email","email", {unique:true});
     }
}
 
//DB成功打开回调
openRequest.onsuccess = function(e) {
    console.log("Success!");
 
    //保存全局的数据库对象,后面会用到
    db = e.target.result;
 
   //绑定按钮点击事件
     document.querySelector("#addButton").addEventListener("click", addPerson, false);
 
    document.querySelector("#getButton").addEventListener("click", getPerson, false);
 
    document.querySelector("#getAllButton").addEventListener("click", getPeople, false);
 
    document.querySelector("#getByName").addEventListener("click", getPeopleByNameIndex1, false);
}
 
  //DB打开失败回调
  openRequest.onerror = function(e) {
      console.log("Error");
      console.dir(e);
   }
 
}else{
    alert(‘Sorry! Your browser doesn\’t support the IndexedDB.’);
}
 
//添加一条记录
function addPerson(e) {
    var name = document.querySelector("#name").value;
    var email = document.querySelector("#email").value;
 
    console.log("About to add "+name+"/"+email);
 
    var transaction = db.transaction(["people"],"readwrite");
var store = transaction.objectStore("people");
 
   //Define a person
   var person = {
       name:name,
       email:email,
       created:new Date()
   }
 
   //Perform the add
   var request = store.add(person);
   //var request = store.put(person, 2);
 
   request.onerror = function(e) {
       console.log("Error",e.target.error.name);
       //some type of error handler
   }
 
   request.onsuccess = function(e) {
      console.log("Woot! Did it.");
   }
}
 
//通过KEY查询记录
function getPerson(e) {
    var key = document.querySelector("#key").value;
    if(key === "" || isNaN(key)) return;
 
    var transaction = db.transaction(["people"],"readonly");
    var store = transaction.objectStore("people");
 
    var request = store.get(Number(key));
 
    request.onsuccess = function(e) {
        var result = e.target.result;
        console.dir(result);
        if(result) {
           var s = "<p><h2>Key "+key+"</h2></p>";
           for(var field in result) {
               s+= field+"="+result[field]+"<br/>";
           }
           document.querySelector("#status").innerHTML = s;
         } else {
            document.querySelector("#status").innerHTML = "<h2>No match!</h2>";
         }
     }
}
 
//获取所有记录
function getPeople(e) {
 
    var s = "";
 
     db.transaction(["people"], "readonly").objectStore("people").openCursor().onsuccess = function(e) {
        var cursor = e.target.result;
        if(cursor) {
            s += "<p><h2>Key "+cursor.key+"</h2></p>";
            for(var field in cursor.value) {
                s+= field+"="+cursor.value[field]+"<br/>";
            }
            s+="</p>";
            cursor.continue();
         }
         document.querySelector("#status2").innerHTML = s;
     }
}
 
//通过索引查询记录
function getPeopleByNameIndex(e)
{
    var name = document.querySelector("#name1").value;
 
    var transaction = db.transaction(["people"],"readonly");
    var store = transaction.objectStore("people");
    var index = store.index("name");
 
    //name is some value
    var request = index.get(name);
 
    request.onsuccess = function(e) {
       var result = e.target.result;
       if(result) {
           var s = "<p><h2>Name "+name+"</h2><p>";
           for(var field in result) {
               s+= field+"="+result[field]+"<br/>";
           }
           s+="</p>";
    } else {
        document.querySelector("#status3").innerHTML = "<h2>No match!</h2>";
     }
   }
}
 
//通过索引查询记录
function getPeopleByNameIndex1(e)
{
    var s = "";
 
    var name = document.querySelector("#name1").value;
 
    var transaction = db.transaction(["people"],"readonly");
    var store = transaction.objectStore("people");
    var index = store.index("name");
 
    //name is some value
    index.openCursor().onsuccess = function(e) {
        var cursor = e.target.result;
        if(cursor) {
            s += "<p><h2>Key "+cursor.key+"</h2></p>";
            for(var field in cursor.value) {
                s+= field+"="+cursor.value[field]+"<br/>";
            }
            s+="</p>";
            cursor.continue();
         }
         document.querySelector("#status3").innerHTML = s;
     }
}
 
</script>
 
<p>添加数据<br/>
<input type="text" id="name" placeholder="Name"><br/>
<input type="email" id="email" placeholder="Email"><br/>
<button id="addButton">Add Data</button>
</p>
 
<p>根据Key查询数据<br/>
<input type="text" id="key" placeholder="Key"><br/>
<button id="getButton">Get Data</button>
</p>
<div id="status" name="status"></div>
 
<p>获取所有数据<br/>
<button id="getAllButton">Get EveryOne</button>
</p>
<div id="status2" name="status2"></div>
 
<p>根据索引:Name查询数据<br/>
    <input type="text" id="name1" placeholder="Name"><br/>
    <button id="getByName">Get ByName</button>
</p>
<div id="status3" name="status3"></div>

将上面的代码复制到 indexed_db.html 中,用 Google Chrome
浏览器打开,就可以添加、查询数据。在 Chrome 的开发者工具中,能查看创建的
DB 、存储对象(可理解成表)以及表中添加的数据。

澳门微尼斯人手机版 18

IndexedDB 有个非常强大的功能,就是 index(索引)。它可对 Value
对象中任何属性生成索引,然后可以基于索引进行 Value 对象的快速查询。

要生成索引或支持索引查询数据,需求在首次生成存储对象时,调用接口生成属性的索引。可以同时对对象的多个不同属性创建索引。如下面代码就对name
和 email 两个属性都生成了索引。

XHTML

var objectStore = thisDB.createObjectStore(“people”,{ autoIncrement:true
}); //first arg is name of index, second is the path (col);
objectStore.createIndex(“name”,”name”, {unique:false});
objectStore.createIndex(“email”,”email”, {unique:true});

1
2
3
4
var objectStore = thisDB.createObjectStore("people",{ autoIncrement:true });
//first arg is name of index, second is the path (col);
objectStore.createIndex("name","name", {unique:false});
objectStore.createIndex("email","email", {unique:true});

生成索引后,就可以基于索引进行数据的查询。

XHTML

function getPeopleByNameIndex(e) { var name =
document.querySelector(“#name1”).value; var transaction =
db.transaction([“people”],”readonly”); var store =
transaction.objectStore(“people”); var index = store.index(“name”);
//name is some value var request = index.get(name); request.onsuccess =
function(e) { var result = e.target.result; if(result) { var s =
“<p><h2>Name “+name+”</h2><p>”; for(var field in
result) { s+= field+”=”+result[field]+”<br/>”; }
s+=”</p>”; } else { document.querySelector(“#status3”).innerHTML
= “<h2>No match!</h2>”; } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function getPeopleByNameIndex(e)
{
var name = document.querySelector("#name1").value;
 
var transaction = db.transaction(["people"],"readonly");
var store = transaction.objectStore("people");
var index = store.index("name");
 
//name is some value
var request = index.get(name);
request.onsuccess = function(e) {
    var result = e.target.result;
    if(result) {
        var s = "<p><h2>Name "+name+"</h2><p>";
        for(var field in result) {
            s+= field+"="+result[field]+"<br/>";
        }
        s+="</p>";
    } else {
        document.querySelector("#status3").innerHTML = "<h2>No match!</h2>";
    }
  }
}

分析:IndexedDB 是一种灵活且功能强大的数据存储机制,它集合了 Dom Storage
和 Web SQL Database
的优点,用于存储大块或复杂结构的数据,提供更大的存储空间,使用起来也比较简单。可以作为
Web SQL Database 的替代。不太适合静态文件的缓存。

  1. 以key-value 的方式存取对象,可以是任何类型值或对象,包括二进制。
  2. 可以对对象任何属性生成索引,方便查询。
  3. 较大的存储空间,默认推荐250MB(分 HOST),比 Dom Storage 的5MB
    要大的多。
  4. 通过数据库的事务(tranction)机制进行数据操作,保证数据一致性。
  5. 异步的 API 调用,避免造成等待而影响体验。

Android 在4.4开始加入对 IndexedDB 的支持,只需打开允许 JS
执行的开关就好了。

XHTML

WebView myWebView = (WebView) findViewById(R.id.webview); WebSettings
webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

1
2
3
WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

发表评论

电子邮件地址不会被公开。 必填项已用*标注