调整观察员的大小
调整观察员 API 的多填充 .
执行以"变相观察员"为基础,如果第一个变相事件得不到支持,则使用"变相事件"作为倒计时,因此除非DOM改变,否则不会进行投票. 不修改观测到的元素。 处理 CSS 转换/动画,并可能观测动态 CSS 伪类引起的变化,例如: :hover。 。 。 .
跟着 光谱 和本地执行。 尺寸是 2.44 基贝 当精炼而精炼.
现场演示 (IE10和下层有风格问题).
安装
国家预防机制:
npm install resize-observer-polyfill --save-dev
从鲍尔: (将随着下一次主要发布而去除)
bower install resize-observer-polyfill --save-dev
浏览器支持
Polyfill在以下浏览器中进行了测试:
注: Internet Explorer 8及其更早的版本不支持.
用法示例
建议用这个图书馆的形式 填马,它不会给地球物体带来变化.
import ResizeObserver from 'resize-observer-polyfill';
const ro = new ResizeObserver((entries, observer) => {
for (const entry of entries) {
const {left, top, width, height} = entry.contentRect;
console.log('Element:', entry.target);
console.log(`Element's size: ${ width }px x ${ height }px`);
console.log(`Element's paddings: ${ top }px ; ${ left }px`);
}
});
ro.observe(document.body);
软件包的主要文件是 ES5 UMD 图像 捆绑,将和ES6模块版本互换,供那些了解该模块的捆绑者使用 模块 字段,例如用于 滚动 或网络包装 2+.
说明: 多填充的全局版本(dist/ResizeObserver.global)被贬值,将在下个大发行会被移除.
观察战略
如上所述,这一执行主要(但并不仅仅是)依靠 " 变异 " 观察员, " 变异 " 事件对 " IE9 " 和 " IE10 " 具有反作用.
换句话说,突变事件是一种倒行逆施的方法:它们可能不像它们所发出的那样丑陋,特别是当它们的电话被批量、被节制和没有必要分析变化时。 有鉴于此,他们不会中断浏览器的回流/再油漆循环(同为Mutation Observator),甚至可能超越Internet Explorer的MO执行,导致很少到没有性能退化. 在当代浏览器中(Chrome,Firefox等) 变异观察者减速 套间 ,包括200个添加/删除元素、改变属性和修改文本数据的重复,修改比例低于1%。 Internet Explorer给出了不同的结果,MO将同一套套件减慢了2-3%,而突变事件显示差异为~0.6%.
至于其他方法的原因,即iframe/object和 scroll 排除了以下战略:
- 它们要求观测到的元素处于非统计位置.
- 无法直接应用到很多元素中:
<img>, (中文(简体) ),<input>, (中文(简体) ),<textarea>, (中文(简体) ),<canvas>, (中文(简体) ),<tr>, (中文(简体) ),<tbody>, (中文(简体) ),<thead>, (中文(简体) ),<table>等 (中文(简体) ). 对于大多数你需要多留一个<div>sVGGGraphicsElement的包装和几乎所有实例都将超出范围. - 调整观察员光谱要求当一个非空可见元素被隐藏时,即当该元素或其母节点之一直接收到时,发送通知
display: none状态。 当它被从DOM中移除或加入到DOM中时,情况也是如此. 无法仅仅通过使用以前的方法来处理这些案例,所以你仍然需要订阅DOM突变或者不断检查元素的状态.
虽然每一种方法都有自己的局限性, 但我认为在建造一个多功能填充物时 权衡这些局限性是太过分了.
限制
- 通知在实际变化发生后发送到~20ms.
- 由动态伪类引起的变化,例如:.
:hover财务报告和审定财务报表:focus,没有跟踪。 作为工作,你可以增加一个短暂的过渡,从而引发transitionend当元素收到前类之一时(实例) (中文(简体) ). - 延迟的过渡只收到一份涉及某一要素最新维度的通知.
建筑和测试
以造多补. 在其中创建 UMD 捆绑 dist 文件夹 :
npm run build
要运行代码样式测试 :
npm run test:lint
运行单元测试 :
npm run test:spec
要在因果归属文件中不存在的浏览器中测试 :
npm run test:spec:custom
对本地执行的测试:
npm run test:spec:native
注: 在你援引之后 spec:native 财务报告和审定财务报表 spec:custom 命令头到 http://localhost:9876/debug.html 页 次.