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

轻量，没有依赖。

安装： 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，

 

const query1 = 'screen and (min-width: 40em)';
const query2 = 'screen and (min-width: 5oem)';
const handler1 = {
  match: function() {},
  destory: function() { console.log('handler 1 destoryed'); },   
};
const handler2 = {
  match: function() {},
  unmatch: function() { console.log('handler 2 unmatched'); }
};

enquire.register(query1, handler1);
enquire.unregister(query1); // 'handler 1 destoryed'

enquire.register(query2, handler2);
enquire.unregister(query2, handler2); // 'handler 2 unmatched'

 

　　当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