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