DOMSnap脱机查看视图

分享于 

7分钟阅读

Web开发

  繁體 雙語

DOMSnap

将DOM持久化到 IndexedDB/WebSQL的离线网页。 请试用演示

使用指导

HTML5提供 LocalStorageIndexedDBwindow.caches 插件来构建离线网络应用。 但是所有这些技术,我们不能遗漏本地数据库。 DOMSnap 充分利用了离线技术的优势。 将HTML存储到本地 IndexedDB/WebSQL,并在脱机时恢复。 使用 DOMSnap,网页可以恢复到最后一个状态,以减少对服务器的请求和减少模板渲染。 offline离线是很长的路,为什么不给 DOMSnap 一个尝试?

用法

<script src="DOMSnap.min.js"></script>
  • 或者安装软件包:
npm install --save domsnap

并要求在你的文件中:

var DOMSnap = require('domsnap');
范例
//init DOMSnapvar DS = DOMSnap({
 onReady: function(){
 console.log('DOMSnap is ready');
 }
});//capture snapshot html of #mainDS.capture('#main');//capture with specified capture idDS.capture('#main', {id: 'my_id'});//set the html of #main by it's captured snapshot htmlDS.resume('#main');//set by specified capture idDS.resume('#main',{id: 'my_id'});

domsnap

api

DOMSnap ( 配置)

初始化 DOMSnap

参数
  • configobject [optional ]
    • DOMSnap 就绪时,将调用 config.onReadyfunction
    • config.versionnumber 版本控制,非零。 如果已经更新网络应用程序,则需要更新。 默认值为 1.
    • config.scopestring"。host|path|or任意字符串值"。 "":location.host;"路径":位置。host+location。路径名;默认值"路径"
    • 要使用的config.storeTypestring 数据存储。 for IndexedDB"或者或或者" WebSQL"。如果未定义,则使用" WebSQL"用于iOS和" IndexedDB"。

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

.capture(selector, options )

捕获元素 MATCHES的快照HTML并将结果存储到一个捕获id中。

参数
  • 元素的selectorstring 选择器
  • optionsobject [optional ]
    • options.idstring or function 捕获,如果HTML不是 null,将,设置为 null 以将HTML存储为默认快照
    • options.html 设置为 null 以将HTML存储为默认快照的string or function 快照

返回 DOMSnap

.resume(selector, options )

使用捕获的快照HTML将元素 MATCHES的HTML设置为选择器 [and capture id]。

参数
  • 元素的selectorstring 选择器
  • optionsobject [optional ]
    • options.idstring or function 捕获,如果HTML不是 null,将,设置为 null 以将HTML存储为默认快照
    • options.fallbackfunction 一个回调函数,如果没有匹配的快照,将被调用

返回 DOMSnap

.watch(selector, options )

观察和自动捕获元素 MATCHES

参数
  • 元素 [s ]的selectorstring or array 选择器 [s]
  • optionsobject [optional ]
    • options.idstring or function 捕获 id
    • options.htmlstring or function 快照 html
范例
//e.g.1DS.watch('#main');//e.g.2DS.watch('#main',{
 id: 'my_capture_id',//capture id html: 'my_snapshot_html'//snapshot html});//e.g.3DS.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.4DS.watch(['#main', '#another']);//watch multi elements

返回 DOMSnap

.get(selector, id )

返回元素 MATCHES 捕获的快照的快照HTML和捕获 id。

参数
  • 元素的selectorstring 选择器
  • 如果未指定 idstring [optional] 捕获 id,则结果将为默认快照

返回 string html

.getAll(selector )

返回元素 MATCHES 所捕获的所有捕获快照的HTML

参数
  • 元素的selectorstring 选择器

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

.remove(selector, id )

删除选择器 [and capture id ]的元素 MATCHES 捕获的快照 HTML

参数
  • 元素的selectorstring 选择器
  • 如果未指定 idstring [optional] 捕获 id,则将清空所有快照

返回 DOMSnap

.clear(version )

清除所有捕获的快照

参数
  • 如果未指定 versionnumber [optional],则该值与初始化 DOMSnap的值相同

返回 DOMSnap

路线图&作出贡献

  • on-going 自动监视和自动恢复
  • on-going 自动清除过期捕获
  • 使用 DOM diff 恢复
  • on-going 事件( 继续之前,恢复之前,恢复之前,捕获之前,捕获之后)

VIEW  DOM  查看  离线  
相关文章