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去改變組件的狀態，以控制組件是否顯示或以怎樣的形式顯示來達到響應式布局。