你知道吗？什么是 Responsive JavaScript ？

2022-04-10 10:09:45

　　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)‘);