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 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值