enquire.js-响应css媒体查询的轻量级javascript库

待我称王封你为后i 2022-12-03 12:52 164阅读 0赞

轻量，没有依赖。

安装： npm install enquire.js

API:

enquire.register(mediaQuery, handler).

mediaQuery: 字符串，需要响应的媒体。

handler: 函数或对象，

enquire.unregister(mediaQuery\[, handler\])

mediaQuery: 字符串，需要注销响应的媒体。

handler: 函数或对象，可不写，一旦写了，只有这个handler被注销

handler Object:

destory: 当handler是unregister状态时响应。

deferSetup: 布尔值。默认false,设置为true时，推迟执行setup里的回调，直到第一次match时才执行。

setup: 函数。

一般情况下，如果当match时需要请求数据，改变UI。变成unmatch不需要显示UI,再变回match,又要再一次请求数据,显示UI,请求数据就会有很多次。setup的存在就是让数据只需要请求一次，将数据与UI的显示分离开来。即在setup中请求数据,在match中显示UI,setup的回调是只会执行一次的。

match: 函数。媒体匹配时的回调。

unmatch: 函数。媒体不匹配时的回调。

主要使用的方法为 register。

enquire.register('screen and (max-width: 45em)', {
      // 以下为使用的五种选择
    
    // 当媒体查询与上述匹配时，即当窗口宽度小于45em时的响应
      match: function() {},
    // 当窗口从匹配调整到不匹配以后的响应
      unmatch: function() {},
    // 只会响应一次，when the handler is registered?
      setup: function() {},
    // 默认为false,一旦被设置为true,defers execution of the setup function until the first time the media query is matched
    deferSetup: true, destroy: function() {}, 
    // triggered when handler is unregistered. Place cleanup code here
    destroy: function() {},
    });

inquire允许在register中有多个处理程序，

// 可以把各种回调放在一个数组中
    enquire.register('screen and min-width: 45em', [
      { match: function() { console.log('handler 1 matched'); } },
      { match: function() { console.log('handler 2 matched'); } }
    ]);
    
    // 或者用以下的方式
    const query = 'screen and (min-width: 45em)';
    enquire.register(query, function() { console.log('handler 3 matched'); });
    enquire.register(query, function() { console.log('handler 4 matched'); });
    ...

当存在很多种不同的屏幕宽度，每种宽度需要不同的布局时，

enquire
    .register('screen and (max-width: 50em)', function() {
             // handler 1 matched  
        });
    .register('screen and (max-width: 40em)', function() {
            // handler 2 matched
        });

取消注册处理程序，

enquire提供了unregister方法去取消register，

当unregister只有一个参数query时，匹配该query的handler将会全部被注销，即是说不再会有关于该query的任何操作和响应。

当unregister有两个参数query和handler时，注销指定query的指定handler。

当handler内有destory时执行destory内的回调，没有destory时，执行unmatch。

在项目中，通过match和unmatch去改变组件的状态，以控制组件是否显示或以怎样的形式显示来达到响应式布局。

转载：[https://www.cnblogs.com/holajulie/p/7891354.html][https_www.cnblogs.com_holajulie_p_7891354.html]

[https_www.cnblogs.com_holajulie_p_7891354.html]: https://www.cnblogs.com/holajulie/p/7891354.html