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