DOMSnap 离线您的视图

DOMSnap

通过将 DOM 持久化到 IndexedDB/WebSQL 来实现离线网页。 请尝试 演示。

工作原理

HTML5 提供了 LocalStorage、IndexedDB 和 window.caches 来构建离线 web 应用程序。 但是对于 这些技术，我们不能错过本地数据库。 DOMSnap 充分利用了 离线技术。 将 HTML 存储到本地 IndexedDB/WebSQL，并在您离线时恢复。 使用 DOMSnap，网页可以恢复到其上次状态，减少了对服务器的请求和模板渲染。 认为离线还很遥远？ 为什么不试试 DOMSnap 呢？

用法

1. 在您的 HTML 中包含 dist/DOMSnap.min.js 文件

   <script src="DOMSnap.min.js"></script>

2. 或者安装该软件包

   npm install --save domsnap

   并在您的文件中引入它

   var DOMSnap = require('domsnap');

示例

//init DOMSnap
var DS = DOMSnap({
  onReady: function(){
    console.log('DOMSnap is ready');
  }
});

//capture snapshot html of #main
DS.capture('#main');
//capture with specified capture id
DS.capture('#main', {id: 'my_id'});

//set the html of #main by it's captured snapshot html
DS.resume('#main');
//set by specified capture id
DS.resume('#main',{id: 'my_id'});

API

DOMSnap(config)

初始化 DOMSnap

参数

• config object [可选]
  • 当 DOMSnap 准备就绪时，将调用 config.onReady function
  • config.version number 版本控制，非零。 如果 web 应用程序已更新，则需要更新。 默认为 1。
  • config.scope string "host|path|or any string value"。 "host": location.host; "path": location.host+location.pathname; 默认为 "path"
  • config.storeType string 要使用的数据存储。“IndexedDB”或“WebSQL”，如果未定义，则对 iOS 使用“WebSQL”，对其他使用“IndexedDB”。

返回 object {{capture: capture, resume: resume, get: get, getAll: getAll, remove: remove, clear: clear}|*}

.capture(selector, options)

捕获与选择器匹配的元素的快照 HTML，并使用捕获 ID 存储结果。

参数

• selector string 元素的选择器
• options object [可选]
  • options.id string or function 捕获 ID，如果 HTML 不是 null，则将 id 设置为 null 以将 HTML 存储为默认快照
  • options.html string or function 快照 HTML，将 id 设置为 null 以将 HTML 存储为默认快照

返回 DOMSnap

.resume(selector, options)

通过其捕获的快照 HTML 设置与选择器匹配的元素 [和捕获 ID] 的 HTML。

参数

• selector string 元素的选择器
• options object [可选]
  • options.id string or function 捕获 ID，如果 HTML 不是 null，则将 id 设置为 null 以将 HTML 存储为默认快照
  • options.fallback function 回调函数，如果未找到匹配的快照，将调用此函数

返回 DOMSnap

.watch(selector, options)

监视并自动捕获与选择器匹配的元素

参数

• selector string or array 元素的选择器
• options object [可选]
  • options.id string or function 捕获 ID
  • options.html string or function 快照 html

示例

//e.g.1
DS.watch('#main');

//e.g.2
DS.watch('#main',{
  id: 'my_capture_id',//capture id
  html: 'my_snapshot_html'//snapshot html
});

//e.g.3
DS.watch('#main',{
  id: function(selector){ return 'generated_capture_id_for_'+selector;}, //return capture id
  html: function(selector){ return 'generated_snapshot_html_for_'+selector;} //return snapshot html
});

//e.g.4
DS.watch(['#main', '#another']);//watch multi elements

返回 DOMSnap

.get(selector, id)

返回与选择器和捕获 ID 匹配的元素的捕获快照 HTML。

参数

• selector string 元素的选择器
• id string [可选] 捕获 ID，如果未指定，结果将是默认快照

返回 string html

.getAll(selector)

返回与选择器匹配的元素的所有捕获快照 HTML

参数

• selector string 元素的选择器

返回 object 所有快照作为对象 - 例如。 {DEFAULT_CAPTURE_ID: 'html of DEFAULT_CAPTURE', my_id: 'html of my_id'}

.remove(selector, id)

删除与选择器 [和捕获 ID] 匹配的元素的捕获快照 HTML

参数

• selector string 元素的选择器
• id string [可选] 捕获 ID，如果未指定，将清空所有快照

返回 DOMSnap

.clear(version)

清除所有捕获的快照

参数

• version number [可选] 与初始化 DOMSnap 相同的值，如果未指定

返回 DOMSnap

路线图 & 做出贡献

• on-going 自动监视和自动恢复
• on-going 自动清除过期的捕获
• 使用 DOM diff 恢复
• on-going 事件（准备就绪、恢复前、恢复后、捕获前、捕获后）