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');
        }
});

方法以下：

• 用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);

方法以下：

• 爲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
轉載自：伯樂在線 - 蔡蔡
編輯：Segmentfault