'f'

mh-two-thousand-and-two

2024-04-12 26f2711ef9461961fb953e2b497bd314ef95e345

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
const mediaQueryObservers = {}
const listeners = {} // 用公用对象存储监听器
 
// 拼接媒体查询条件
function handleMediaQueryStr ($props) {
  let mediaQueryStr = []
  const propsMenu = [
    'width',
    'minWidth',
    'maxWidth',
    'height',
    'minHeight',
    'maxHeight',
    'orientation'
  ]
  for (const item of propsMenu) {
    if (item !== 'orientation' && $props[item] !== '' && Number($props[item]) >= 0) {
      mediaQueryStr.push(`(${humpToLine(item)}: ${Number($props[item])}px)`)
    }
    if (item === 'orientation' && $props[item]) {
      mediaQueryStr.push(`(${humpToLine(item)}: ${$props[item]})`)
    }
  }
  mediaQueryStr = mediaQueryStr.join(' and ')
  return mediaQueryStr
}
 
function humpToLine (name) {
  return name.replace(/([A-Z])/g, '-$1').toLowerCase()
}
 
// 请求媒体查询对象
export function requestMediaQueryObserver ({
  reqId,
  options
}) {
  // 创建一个媒体查询对象
  const mediaQueryObserver = mediaQueryObservers[reqId] = window.matchMedia(handleMediaQueryStr(options))
 
  // 创建一个监听器
  const listener = listeners[reqId] = e => {
    UniViewJSBridge.publishHandler('onRequestMediaQueryObserver', {
      reqId,
      res: e.matches
    })
  }
 
  listener(mediaQueryObserver) // 监听前执行一次媒体查询
  mediaQueryObserver.addListener(listener)
}
 
// 销毁媒体查询对象
export function destroyMediaQueryObserver ({
  reqId
}) {
  const listener = listeners[reqId] // 需要移除的某个监听
  const mediaQueryObserver = mediaQueryObservers[reqId]
 
  if (mediaQueryObserver) {
    mediaQueryObserver.removeListener(listener) // 移除监听
    delete mediaQueryObservers[reqId]
    UniViewJSBridge.publishHandler('onRequestMediaQueryObserver', {
      reqId,
      reqEnd: true
    })
  }
}