React魔法堂:size-sensor源码略读
前言
echarts-for-react在对echarts进行轻量级封装的基础上,额外提供图表尺寸自适应容器尺寸的这小而实用的功能,而这功能的背后就是本文想介绍的size-sensor了。
源码介绍
size-sensor源码十分精简,主要是对原生APIResizeObserver
方案和object
元素方案进行检测和API统一化而已。
代码首先会检测当前运行时是否支持原生APIResizeObserver
,若不支持则使用object
元素方案。下面我们将对两种方案进行探讨。
基于浏览器原生API - ResizeObserver
实现
用于监听Element内容盒子或边框盒子或者SVGElement边界尺寸的大小,并调用回调函数。
MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver
/**
* @param {ResizeObserverEntry} entries - 用于获取每个元素改变后的新尺寸
* @param {ResizeObserver} observer
* @see https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserverEntry
*/
function handleResize(entries, observer) {
for (let entry of entries) {
//......
}
}
const target = document.getElementById('main')
const observer = new ResizeObserver(handleResize)
// 开始对指定DOM元素的监听
observer.observe(target)
// 结束对指定DOM元素的监听
observer.unobserve(target)
// 结束对所有DOM元素的监听
observer.disconnect()
注意:在handleResize
中修改target
的尺寸并不会导致递归调用handleResize
函数。
基于object
元素的兼容方案实现
object
元素用于内嵌图像、音频、视频、Java applets、ActiveX、PDF和Flash等外部资源,因此其也会像iframe
元素那样生成独立的browser context。
而browser context中Window
实例的尺寸会保持和object
元素的一致,因此可以通过订阅browser context中Window
实例的resize
事件实现对容器的尺寸的监听。
function bind(target, handle) {
if (getComputedStyle(target).position === 'static') {
target.style.position = 'relative'
}
let object = document.createElement('object')
object.onload = () => {
object.contentDocument.defaultView.addEventListener('resize', handle)
// 初始化时先触发一次
handle()
}
object.style.display = 'block'
object.style.position = 'absolute'
object.style.top = 0
object.style.let = 0
object.style.width = '100%'
object.style.height = '100%'
object.style.pointerEvents = 'none'
object.style.zIndex = -1
object.style.opacity = 0
object.type = 'text/html'
target.appendChild(object)
object.data = 'about:data'
return () => {
if (object.contentDocument) {
object.contentDocument.defaultView.removeEventListener('resize', handle)
}
if (object.parentNode) {
object.parentNode.removeChild(object)
}
}
}
这里将object元素替换为iframe元素也是可以的,只需将object.data
换成iframe.src
即可。
注意:在handle
中修改target
的尺寸并会导致递归调用handle
函数。
ResizeObserver
的polyfill兼容方案 - MutationObserver
Repos: https://github.com/que-etc/resize-observer-polyfill
Repos: https://github.com/juggle/resize-observer
尊重原创,转载请注明来自:https://www.cnblogs.com/fsjohnhuang/p/16814327.html 肥仔John
React魔法堂:size-sensor源码略读的更多相关文章
- React魔法堂:echarts-for-react源码略读
前言 在当前工业4.0和智能制造的产业升级浪潮当中,智慧大屏无疑是展示企业IT成果的最有效方式之一.然而其背后怎么能缺少ECharts的身影呢?对于React应用而言,直接使用ECharts并不是最高 ...
- JS魔法堂:jsDeferred源码剖析
一.前言 最近在研究Promises/A+规范及实现,而Promise/A+规范的制定则很大程度地参考了由日本geek cho45发起的jsDeferred项目(<JavaScript框架设计& ...
- JS魔法堂:剖析源码理解Promises/A规范
一.前言 Promises/A是由CommonJS组织制定的异步模式编程规范,有不少库已根据该规范及后来经改进的Promises/A+规范提供了实现 如Q, Bluebird, when, rsvp. ...
- JS魔法堂:mmDeferred源码剖析
一.前言 avalon.js的影响力愈发强劲,而作为子模块之一的mmDeferred必然成为异步调用模式学习之旅的又一站呢!本文将记录我对mmDeferred的认识,若有纰漏请各位指正,谢谢.项目请见 ...
- java基础集合类——ArrayList 源码略读
ArrayList是java的动态数组,底层是基于数组实现. 1. 成员变量 public class ArrayList<E> extends AbstractList<E> ...
- react 中间件相关的一些源码解析
零.随便说说中间件 在react的使用中,我们可以将数据放到redux,甚至将一些数据相关的业务逻辑放到redux,这样可以简化我们组件,也更方便组件抽离.封装.复用,只是redux不能很好的处理异步 ...
- React Native 4 for Android源码分析 一《JNI智能指针之介绍篇》
文/ Tamic: http://blog.csdn.net/sk719887916/article/details/53455441 原文:http://blog.csdn.net/eewolf/a ...
- JS魔法堂:IMG元素加载行为详解
一.前言 在<JS魔法堂:jsDeferred源码剖析>中我们了解到img元素加载失败可以作为函数异步执行的优化方案,本文打算对img元素的加载行为进行更深入的探讨. 二.资源加载的相关属 ...
- React源码解析:setState
先来几个例子热热身: ......... constructor(props){ super(props); this.state = { index: 0 } } componentDidMount ...
随机推荐
- 【Java面试】什么是IO的多路复用机制?
"什么是IO的多路复用机制?" 这是一道年薪50W的面试题,很遗憾,99%的人都回答不出来. 大家好,我是Mic,一个工作了14年的Java程序员. 今天,给大家分享一道网络IO的 ...
- k8s驱逐篇(2)-kubelet节点压力驱逐
kubelet节点压力驱逐 kubelet监控集群节点的 CPU.内存.磁盘空间和文件系统的inode 等资源,根据kubelet启动参数中的驱逐策略配置,当这些资源中的一个或者多个达到特定的消耗水平 ...
- 【面试题】JSON.stringify()妙用,你真的知道吗?
JSON.stringify()妙用 点击打开视频讲解更加详细 语法:JSON.stringify(value, replacer , space) value:将要序列化成 一个JSON 字符串的值 ...
- Mybatis 插件使用及源码分析
Mybatis 插件 Mybatis插件主要是通过JDK动态代理实现的,插件可以针对接口中的方法进行代理增强,在Mybatis中比较重要的接口如下: Executor :sql执行器,包含多个实现类, ...
- 【java】学习路径37-练习:任意文件的复制
使用字节完成复制 import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException ...
- 开源:Taurus.MVC-Java 版本框架 (支持javax.servlet.*和jakarta.servlet.*双系列,内集成微服务客户端)
版本说明: 因为之前有了Taurus.MVC-DotNet 版本框架,因此框架标了-Java后缀. .Net 版本: 开源文章:开源:Taurus.MVC-DotNet 版本框架 (支持.NET C ...
- 新增 Oracle 兼容函数-V8R6C4B0021
KingbaseES V8R6C4B0021新增加以下Oracle 兼容函数. 一.bin_to_num Oracle bin_to_num 函数用于将二进制位转换成十进制的数. 1.传入参数 tes ...
- 【设计模式】Java设计模式 - 适配器模式
[设计模式]Java设计模式 - 适配器模式 不断学习才是王道 继续踏上学习之路,学之分享笔记 总有一天我也能像各位大佬一样 原创作品,更多关注我CSDN: 一个有梦有戏的人 准备将博客园.CSDN一 ...
- 高阶 CSS 技巧在复杂动效中的应用
最近我在 CodePen 上看到了这样一个有意思的动画: 整个动画效果是在一个标签内,借助了 SVG PATH 实现.其核心在于对渐变(Gradient)的究极利用. 完整的代码你可以看看这里 -- ...
- Scanner中nextInt()和nextline()读取字符串的问题
Scanner中nextInt()和nextline()读取字符串的问题 import java.util.Scanner; public class Main { public static voi ...