Responsive Javascript 是什么？
Responsive Javascript 是什么？
簡單來說就是可以根據瀏覽器的狀態做出響應。響應包括對視窗大小的反應，根據你設備是否支持觸摸事件或地理定位功能來決定是否顯示特定內容，不一而足。
什么是瀏覽器APIs
瀏覽器提供了兩個關鍵的APIs來讓我們可以添加Responsive Javascript到站點，那就是 ‘window.matchMedia’ 和’window.onresize’。
window.matchMedia
我們可以使用window.matchMedia API 來檢測特定的媒體并為之添加一個事件監聽器來監聽matched或unmatched事件。這樣做的好處就是可以在我們的javascript中復用媒體檢測代碼，缺點是我們只能檢測有限的那些我們想檢測的媒體。
//Prepare a MediaQueryList
var mql = window.matchMedia("(max-width:768px)");
//Add a listener to the MediaQueryList
mql.addListener(function(e){
if(e.matches){
console.log('enter mobile');
}
});</pre>
方法如下：
用window.matchMedia方法準備一個MediaQueryList
為MatchQueryList添加監聽器
監聽器觸發的時候檢查match狀態
瀏覽器支持
polyfill提供了兼容古老瀏覽器的方法
window.onresize
當用戶改變瀏覽器視窗大小的時候會觸發這個方法。我們就是靠這個方法來提供不同的響應javascript。
這個window.onresize方法由來已久，大家以前肯定也用過，然而Responsive Javascript就是使用這個簡單方法來處理不同的瀏覽器狀態。
var resizeMethod = function(){
if (document.body.clientWidth < 768) {
console.log('mobile');
}
};
//Attach event for resizing
window.addEventListener("resize", resizeMethod, true);</pre>
方法如下：
為window.onresize添加事件
用條件語句來檢測當前瀏覽器寬度
替換默認的resize行為
瀏覽器支持
有現成的庫嗎？
SimpleStateManager
SimpleStateManager是一個狀態響應管理器，他可以根據你的站點的不同狀態響應出不同的Javascript，允許你根據需求定義任意多的站點狀態，并且你可以為每一個站點狀態建立獨立的Enter,Leave,Resize事件
主要功能
調用瀏覽器的resize事件
使用SSM調試板來調試站點狀態
你可以隨心隨遇的測試
插件擴展
方法如下:
準備一個響應onEnter的狀態
用onLeave清空狀態
為每一個狀態定義onResize事件(可選)
示例站點：
Accordion
Equal Columns
瀏覽器支持
enquire.js
enquire.js庫旨在根據CSS media queries響應不同的Javascript。他根據你寫的CSS中media queries來決定Javascript什么時候可用，什么時候禁用
主要功能：
調用matchMedia API
管理 registering和unregistering
示例站點：
Accordion
Equal Columns
瀏覽器支持
polyfill提供了兼容古老瀏覽器的方法
yepnope.js
yepnope.js是一個根據條件異步資源加載器。他可以根據用戶需要加載特定腳本
調用示例：
yepnope({
test : Modernizr.geolocation,
yep : 'normal.js',
nope : ['polyfill.js', 'wrapper.js']
});
瀏覽器支持
Modernizr
Modernizr主要是檢測用戶瀏覽器中的HTML5和CSS3功能
鮮為人知的功能就是他可以使用Modernizr.mq(str)來檢測媒體
調用示例：
//Returns true or false
Modernizr.mq('only all and (max-width: 767px)');
瀏覽器支持
原文鏈接： Responsive Javascript 翻譯： 伯樂在線 - 蔡蔡
譯文鏈接： http://blog.jobbole.com/60245/