没有合适的资源?快使用搜索试试~ 我知道了~
resize-observer-polyfill源码分析
需积分: 0 1 下载量 49 浏览量
2024-03-18
12:39:32
上传
评论
收藏 955KB PDF 举报
温馨提示
试读
33页
1、ResizeObserver类实现 2、ResizeObservation类实现 3、ResizeObserverSPI 类 4、ResizeObserverEntry类 5、ResizeObserverController类
资源推荐
资源详情
资源评论
1
r
e
s
i
z
e
-
o
b
s
e
rv
e
r
-
po
l
y
fill
源
码
分
析
R
e
s
i
z
e
O
b
s
e
rv
e
r
R
e
s
i
z
e
O
b
s
e
rv
e
r
类
实
现
A
P
I
使
⽤
示
例
R
e
s
i
z
e
O
b
s
e
rv
a
t
i
on
R
e
s
i
z
e
O
b
s
e
rv
a
t
i
on
类
实
现
ge
t
C
ont
e
nt
R
ec
t
函
数
ge
t
H
T
MLE
le
m
e
nt
C
ont
e
nt
R
ec
t
函
数
减
法
赋
值
示
例
ge
t
W
i
n
d
ow
O
f
函
数
ge
t
P
addi
n
g
s
函
数
ge
t
B
or
de
rs
S
i
z
e
函
数
c
r
ea
t
e
R
ec
t
I
n
i
t
函
数
i
s
D
o
c
um
e
nt
E
le
m
e
nt
函
数
ge
t
SV
GC
ont
e
nt
R
ec
t
函
数
R
e
s
i
z
e
O
b
s
e
rv
e
r
SP
I
R
e
s
i
z
e
O
b
s
e
rv
e
r
SP
I
类
R
e
s
i
z
e
O
b
s
e
rv
e
r
E
ntry
R
e
s
i
z
e
O
b
s
e
rv
e
r
E
ntry
类
c
r
ea
t
e
R
ead
O
n
l
y
R
ec
t
函
数
defi
n
e
C
on
fig
ur
able
函
数
R
e
s
i
z
e
O
b
s
e
rv
e
r
C
ontro
lle
r
R
e
s
i
z
e
O
b
s
e
rv
e
r
C
ontro
lle
r
类
定
义
按
位
⾮
运
算
数
值
转
为
布尔
类
型
示
例
up
da
t
e
O
b
s
e
rv
e
rs
_
函
數
c
onn
ec
t
_
⽅
法
M
ut
a
t
i
on
O
b
s
e
rv
e
r
例
⼦
2
on
T
r
a
ns
i
t
i
on
E
n
d
_
函
數
监
听
元
素
⼤
⼩
变
化
w
i
n
d
ow
.
r
e
s
i
z
e
w
i
n
d
ow
.
m
a
t
ch
M
edia
github
地址
:
https://github.com/que-etc/resize-observer-polyfill
版
本
v1.5.1(2018.12.9)
ResizeObserver
这
个
是
⽤
来
定
义
观
察
者
的
,
观
察
者
其
实就
是
⼀个
回
调
函
数
这
个
观
察
者
有
三个
⽅
法
,
observe,unobserve,disconnect
。
⼀个
observer
可
以
同
时
观
察
多
个
html
元
素
,
它
们
对
应
同
⼀个
回
调
函
数
。
●
observe,
就
是
开
始
观
察
某
个
元
素
,
⽤
法
observe(htmlelement).
●
unobserve,
就
是
停
⽌
观
察
某
个
元
素
,
⽤
法
unobserve(htmlelement).
●
disconnect,
就
是
停
⽌
观
察
所
有
的
元
素
.
ResizeObserver
ResizeObserver
类
实
现
callback(entris:ResizeObserverEntry[],observer:ResizeObserver)
1
3
ResizeObserver.disconnect
:
取
消
和
结
束
⽬
标
对
象
上
所
有
对
Element
或
SVGElement
观
察
;
ResizeObserver.observe
:
开
始
观
察
指
定
的
Element
或
SVGElement
;
第
⼀个
参
数
为
观
察
的
元
素
;
第
⼆
个
参
数
为
可
选
参
数
BoxOptions
,
⽤
来
指
定将
以
哪
种
盒
⼦
模
型
来
观
察
变
动
,
如
content-box (
默
认
值
)
,
border-box
和
device-pixel-content-box
;
ResizeObserver.unobserve
:
结
束
观
察
指
定
的
Element
或
SVGElement
API
●
●
//
当
浏
览
器
⽀
持
WeakMap
使
⽤
WeakMap
创
建
,
否
则
⽤
Map
创
建
const observers = typeof WeakMap !== "undefined" ? new WeakMap() : new Map
();
/**
* ResizeObserver API. Encapsulates the ResizeObserver SPI implementation
* exposing only those methods and properties that are defined in the spe
c.
*/
class ResizeObserver {
constructor(callback) {
//
调
度
器
,
单
例
的
控
制
器
。
所
有
的
resizeObserver
归
它
管
理
,
或
者
说
ResizeObserverS
PI
归
它
管
理
。
const controller = ResizeObserverController.getInstance();
//
创
建
观
察
元
素
变
化
的真
正
实
例
const observer = new ResizeObserverSPI(callback, controller, this);
observers.set(this, observer);
}
}
// Expose public methods of ResizeObserver.
["observe", "unobserve", "disconnect"].forEach((method) => {
ResizeObserver.prototype[method] = function () {
//
真
正
的
⽅
法
在
observer
实
例
上
return observers.get(this)[method](...arguments);
};
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
JavaScript
4
ResizeObservation
这
个
类
是
被观
察
的
元
素
的
封
装
,
它
会保
存
元
素
上⼀
次
的
宽
⾼
信
息
,
提
供了
两个
⽅
法
●
isActive()
与
元
素
之
前
的
宽
⾼
进
⾏
⽐
较
,
如
果
不
同
则
返
回
true,
这
样
就
指
定
这
个
元
素
更
新
了
。
●
broadcastRect()
这
个
是
⽤
当
前
的
值
更
新
上⼀
次
的
值
。
使
⽤
示
例
ResizeObservation
ResizeObservation
类
实
现
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);
1
2
3
4
5
6
7
8
9
10
11
12
13
JavaScript
5
getContentRect
函
数
export default class ResizeObservation {
target; // @type {Element}
broadcastWidth = 0; // element
的
content
宽
度
broadcastHeight = 0; //element
的
content
⾼
度
contentRect_ = createRectInit(0, 0, 0, 0); // element
的
padding-left padd
ing-top width height
/**
*
创
建
ResizeObservation
实
例
*/
constructor(target) {
this.target = target;
}
/**
*
⽬
标
元
素
的
宽
度
和
⾼
度
是
否
存
在
更
新
*/
isActive() {
//
获
取
元
素
的
padding-left,padding-top, width
和
height
属
性
//
普
通
element
执
⾏
getHTMLElementContentRect
;
svg
执
⾏
getSVGContentRect
const rect = getContentRect(this.target);
this.contentRect_ = rect;
return (
rect.width !== this.broadcastWidth || rect.height !== this.broadcast
Height
);
}
/**
*
更
新
'broadcastWidth' and 'broadcastHeight'
属
性
,
通过
监
听
的
内
容
元
素
this.c
ontentRect_
*/
broadcastRect() {
const rect = this.contentRect_;
this.broadcastWidth = rect.width;
this.broadcastHeight = rect.height;
return rect;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
JavaScript
剩余32页未读,继续阅读
资源评论
HaanLen
- 粉丝: 332
- 资源: 1
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功