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 ...
随机推荐
- JavaWeb过滤器Filter(附tomcat部分源码分析)
过滤器Filter 过滤器通常对一些web资源进行拦截,做完一些处理器再交给下一个过滤器处理,直到所有的过滤器处理器,再调用servlet实例的service方法进行处理.过滤器可以对request进 ...
- 手把手教你springboot集成微信支付
20220727 最近要做一个微信小程序,需要微信支付,所以研究了下怎么在 java 上集成微信支付功能,特此记录下. 本文完整代码:点击跳转 准备工作 小程序开通微信支付 首先需要在微信支付的官网点 ...
- 听,引擎的声音「GitHub 热点速览 v.22.33」
这期的热点速览异常 Cool,因为有呜呜声内燃机引擎加成的 engine-simengine-sim 坐镇,听到如此曼妙的引擎声,相比你的人生也在高速上升吧.还有,自己搭建个服务就能在本地用上 AI ...
- 安装 NetworkManager(Debian最小化安装)
Debian最小化安装是没有NetworkManager 1 安装: 2 [root@debian]apt install -y netwok-manager 1 启动(查看网卡): 2 [root@ ...
- Mybatis介绍、使用IDEA快速入门
1. Mybatis概念 MyBatis 是一款优秀的持久层框架,用于简化 JDBC 开发 JavaEE三层架构:表现层.业务层.持久层 JDBC 与 MyBatis 对比: MyBatis 本是 A ...
- k8s-Pod基础
制作镜像 第一个pod 搭建Harbor仓库 重启策略 启动命令 pod基本命令 设置环境变量 数据持久化和共享-hostPath 数据持久化和共享-emptyDir JSON格式编写pod文件 Co ...
- Windows权限维持总结
windows权限维持 注册服务 sc create 服务名 binpath= "cmd.exe /k 木马路径" start="auto" obj=" ...
- 第五十八篇:webpack的Source Map
好家伙,Source Map没听过 1.什么是Source Map? 字面意义上来看应该是个好东西 Source Map 就是一个信息文件,里面储存着位置信息. 也就是说,Source Map 文件中 ...
- 解决国内 github.com 打不开的准确方法
前言 github是目前比较公认的一个开源网站,对于像我们这类使用机器学习进行科学计算的研究人员来讲,github提供了代码开源,验证原文献中计算结果正确性的一个平台. 到目前为止,几乎所有使用机器学 ...
- 002从零开始入门Entity Framework Core——DbContext生存期、配置和初始化
阅读须知:本文为入门介绍.指引文章,所示代码皆为最简易(或仅为实现功能)的演示示例版本,不一定切实符合个人(企业)实际开发需求. 一.DbContext生存期 DbContext 的生存期从创建实例时 ...