乐趣区

关于前端:SAP-UI5-sapuiDevicemedia-的使用介绍

jiezi

sap.ui.Device.media 是一个命名空间，属于 sap/ui/Device.

该 API 属于屏幕宽度更改的事件 API。此 API 基于媒体查问，但如果应用的浏览器自身不反对媒体查问，也能够应用此 API。在这种状况下，媒体查问的行为由这个 API 模仿。

有几个可用的预约义范畴集，它们中的每一个都定义了一组屏幕宽度的距离（从小到大）。每当屏幕宽度发生变化并且以后屏幕宽度与更改前的工夫距离不同时，就会调用范畴集的已注册事件处理程序。

如果须要，还能够定义一组自定义距离。

以下示例显示了一个典型用例：

function sizeChanged(mParams) {switch(mParams.name) {
        case "Phone":
            // Do what is needed for a little screen
            break;
        case "Tablet":
            // Do what is needed for a medium sized screen
            break;
        case "Desktop":
            // Do what is needed for a large screen
    }
}

// Register an event handler to changes of the screen size
sap.ui.Device.media.attachHandler(sizeChanged, null, sap.ui.Device.media.RANGESETS.SAP_STANDARD);
// Do some initialization work based on the current size
sizeChanged(sap.ui.Device.media.getCurrentRange(sap.ui.Device.media.RANGESETS.SAP_STANDARD));

看个具体的例子：

下面的代码，第一个 a 是我浏览器在全屏环境下打印的后果，返回的 width 对应的 device 为 Desktop，因为 width 是 1024 px；

而后我成心用鼠标拖拽的形式，把浏览器窗口的宽度放大，如下图所示：

因而第二个 a 打印为 Tablet，因为宽度放大为 600 px 了。

单步调试理解 Device.media.getCurrentRange 的实现原理：

Device.js 里的实现：

失去所有的 query：

window.matchMedia 是一个 native 实现？

这次返回 true：

轻易传一个 aa 进去：

留神区别：

window.matchMedia("all and (min-width:2024px)");

最初的返回值：

留神，我是间接在 SAP UI5 源代码上设置断点，而后从 Chrome 开发者工具 Console 发动调用，触发断点，能看到这个 VM 标记：

退出移动版