image-history
本库用于记录某一节点下图片的增减历史。不兼容 IE 和 旧版 Edge。
功能点：
- 支持配置监听的HTML attribute
- 支持配置图片链接的过滤规则
- 支持统计绑定的跟节点下所有的图片链接及同一链接出现的次数
- 在被绑定的根节点下，同一图片链接多次出现时，只有该链接全部被删除才会被定义为已删除
安装
npm
npm install image-historycdn
<script src="https://cdn.jsdelivr.net/npm/image-history@0.0.4/dist/index.min.js"></script>使用
构造函数
new ImageHistory(root[, listener[, defaultFilter]])new ImageHistory(root[, listener[, customFilter[, defaultFilter]]])new ImageHistory(root[, listener[, customFilters[, defaultFilter]]])
| 参数 | 数据类型 | 描述 | 默认值 |
|---|---|---|---|
root |
Element |
绑定的根节点 | |
listener |
Object |
自定义监听配置 | |
customFilter |
Function |
自定义验证函数 | |
customFilters |
Array |
由自定义验证函数构成的数组 | |
defaultFilter |
Boolean |
是否启用内置验证规则 | true |
内置过滤规则：
!/^(data:|blob:)/
new ImageHistory(root)
// 被监听的节点/跟节点
const target = document.querySelector('#root')
// 普通的初始化
const imageHistory = new ImageHistory(target)
new ImageHistory(root, listener)
// 添加自定义图片监听规则
const imageHistory = new ImageHistory(target, {
// nodeName: [attribute, attribute]
video: ['poster'], // 监听视频的封面图
})
new ImageHistory(root, listener, defaultFilter)
// 关闭内置的图片过滤规则
const imageHistory = new ImageHistory(target, null, false)
new ImageHistory(root, listener, customFilter, defaultFilter)
// 添加图片过滤规则并关闭内置的过滤规则
const imageHistory = new ImageHistory(target, null, function (img) {
// img 是本次验证的图片链接。函数需要返回 true/false。
return /^https:\/\/baidu.com/.test(img)
}, false)
new ImageHistory(root, listener, customFilters, defaultFilter)
// 添加多条图片过滤规则并关闭内置的过滤规则
const imageHistory = new ImageHistory(target, null, [
function (img) {
return /^https:\/\/baidu.com/.test(img)
},
function (img) {
return /^https:\/\/ali.com/.test(img)
}
], false)实例属性
ImageHistory.root
当前实例绑定的根节点。只读。
const root = document.querySelector('#root')
const imageHistory = new ImageHistory(root)
const congruence = root === imageHistory.root // true
ImageHistory.listener
当前实例绑定的监听规则。只读。
const root = document.querySelector('#root')
const imageHistory = new ImageHistory(root, { video: ['poster'] })
// 当前实例监听了 img 标签的 src 属性（内置）和 video 标签的 poster 属性
const listener = imageHistory.listener // { IMG: ['src'], VIDEO: ['poster'] }
ImageHistory.mirroring
实例的图片镜像数据。只读。
在初始化时构建或通过 ImageHistory.rebuild() 进行手动构建
const root = document.querySelector('#root')
const imageHistory = new ImageHistory(root, { video: ['poster'] })
const mirroring = imageHistory.mirroring // { 'http://xxx/xxc.jpg': 3, 'http://xxx/xxe.png': 1 }实例方法
ImageHistory.all()
返回所有的历史记录信息。返回一个数组。
const root = document.querySelector('#root')
const imageHistory = new ImageHistory(root)
const all = imageHistory.all() // [{ image: '', type: 'deleted' }, { image: '', type: 'inserted' }]
ImageHistory.inserted()
获取被删除图片的 src 集合。返回一个数组。
const root = document.querySelector('#root')
const imageHistory = new ImageHistory(root)
const inserted = imageHistory.inserted() // ['http://xxx/xxc.jpg', 'http://xxx/xxd.png']
ImageHistory.deleted()
获取新增图片的 src 集合。返回一个数组。
const root = document.querySelector('#root')
const imageHistory = new ImageHistory(root)
const deleted = imageHistory.deleted() // ['http://xxx/xxa.jpg', 'http://xxx/xxb.png']
ImageHistory.rebuild()
重新构建镜像数据，此操作会自定清除历史记录，谨慎操作。
以当前时刻的图片数据作为后续图片增减的依据。返回一个对象。
const root = document.querySelector('#root')
const imageHistory = new ImageHistory(root)
const mirroring = imageHistory.rebuild() // { 'http://xxx/xxc.jpg': 3, 'http://xxx/xxe.png': 1 }
ImageHistory.statistics()
统计当前跟节点下的图片链接及同一链接出现的次数。返回一个对象。
const root = document.querySelector('#root')
const imageHistory = new ImageHistory(root)
const statistics = imageHistory.statistics() // { 'http://xxx/xxc.jpg': 3, 'http://xxx/xxe.png': 1 }
ImageHistory.clear()
清除记录。
const root = document.querySelector('#root')
const imageHistory = new ImageHistory(root)
imageHistory.clear()
ImageHistory.destory()
销毁监听器（销毁将清理数据并停止监听）。
const root = document.querySelector('#root')
const imageHistory = new ImageHistory(root)
imageHistory.destory()
