Responsive Javascript 是什么？

　　簡單來說就是可以根據(jù)瀏覽器的狀態(tài)做出響應(yīng)。響應(yīng)包括對視窗大小的反應(yīng)，根據(jù)你設(shè)備是否支持觸摸事件或地理定位功能來決定是否顯示特定內(nèi)容，不一而足。

　　什么是瀏覽器APIs

　　瀏覽器提供了兩個(gè)關(guān)鍵的APIs來讓我們可以添加Responsive Javascript到站點(diǎn)，那就是 ‘window.matchMedia’ 和’window.onresize’。

　　window.matchMedia

　　我們可以使用window.matchMedia API 來檢測特定的媒體并為之添加一個(gè)事件監(jiān)聽器來監(jiān)聽matched或unmatched事件。這樣做的好處就是可以在我們的javascript中復(fù)用媒體檢測代碼，缺點(diǎn)是我們只能檢測有限的那些我們想檢測的媒體。

//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方法準(zhǔn)備一個(gè)MediaQueryList
• 為MatchQueryList添加監(jiān)聽器
• 監(jiān)聽器觸發(fā)的時(shí)候檢查match狀態(tài)

　　瀏覽器支持

　　polyfill提供了兼容古老瀏覽器的方法

　　window.onresize

　　當(dāng)用戶改變?yōu)g覽器視窗大小的時(shí)候會(huì)觸發(fā)這個(gè)方法。我們就是靠這個(gè)方法來提供不同的響應(yīng)javascript。

　　這個(gè)window.onresize方法由來已久，大家以前肯定也用過，然而Responsive Javascript就是使用這個(gè)簡單方法來處理不同的瀏覽器狀態(tài)。

var resizeMethod = function(){
    if (document.body.clientWidth < 768) {
        console.log('mobile');
    }
};

//Attach event for resizing
window.addEventListener("resize", resizeMethod, true);

　　方法如下：

• 為window.onresize添加事件
• 用條件語句來檢測當(dāng)前瀏覽器寬度
• 替換默認(rèn)的resize行為

　　瀏覽器支持

　　有現(xiàn)成的庫嗎？

　　SimpleStateManager

　　SimpleStateManager是一個(gè)狀態(tài)響應(yīng)管理器，他可以根據(jù)你的站點(diǎn)的不同狀態(tài)響應(yīng)出不同的Javascript，允許你根據(jù)需求定義任意多的站點(diǎn)狀態(tài)，并且你可以為每一個(gè)站點(diǎn)狀態(tài)建立獨(dú)立的Enter,Leave,Resize事件

　　主要功能

• 調(diào)用瀏覽器的resize事件
• 使用SSM調(diào)試板來調(diào)試站點(diǎn)狀態(tài)
• 你可以隨心隨遇的測試
• 插件擴(kuò)展

　　方法如下:

• 準(zhǔn)備一個(gè)響應(yīng)onEnter的狀態(tài)
• 用onLeave清空狀態(tài)
• 為每一個(gè)狀態(tài)定義onResize事件(可選)

　　示例站點(diǎn)：

• Accordion
• Equal Columns

　　瀏覽器支持

　　enquire.js

　　enquire.js庫旨在根據(jù)CSS media queries響應(yīng)不同的Javascript。他根據(jù)你寫的CSS中media queries來決定Javascript什么時(shí)候可用，什么時(shí)候禁用

　　主要功能：

• 調(diào)用matchMedia API
• 管理 registering和unregistering

　　示例站點(diǎn)：

• Accordion
• Equal Columns

　　瀏覽器支持

　　polyfill提供了兼容古老瀏覽器的方法

　　yepnope.js

　　yepnope.js是一個(gè)根據(jù)條件異步資源加載器。他可以根據(jù)用戶需要加載特定腳本

　　調(diào)用示例：

yepnope({
  test : Modernizr.geolocation,
  yep  : 'normal.js',
  nope : ['polyfill.js', 'wrapper.js']
});

　　瀏覽器支持

　　Modernizr

　　Modernizr主要是檢測用戶瀏覽器中的HTML5和CSS3功能

　　鮮為人知的功能就是他可以使用Modernizr.mq(str)來檢測媒體

　　調(diào)用示例：

//Returns true or false
Modernizr.mq('only all and (max-width: 767px)');

　　瀏覽器支持

　　原文鏈接： Responsive Javascript   作者：@蔡volvo蔡

　　哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無需額外費(fèi)用，即可穩(wěn)步提升排名至首頁。歡迎體驗(yàn)最佳的哈爾濱網(wǎng)站建設(shè)。