介绍enquire.js

最新推荐文章于 2024-08-24 07:49:50 发布

dingshi7798

最新推荐文章于 2024-08-24 07:49:50 发布

阅读量2.6k

点赞数

文章标签： javascript ViewUI

enquire.js是一个轻量级的JavaScript库，用于增强CSS媒体查询的使用。它提供额外的功能和灵活性，比如DOM操作、内容加载和页面增强。文章通过示例介绍了如何在不同场景下使用enquire.js，如移动节点、加载补充内容和应用页面增强，并讨论了可能遇到的问题，如旧版IE的兼容性问题和DOM操作的性能影响。

摘要由CSDN通过智能技术生成

一段时间以来，我一直在使用enquire.js库来增强JavaScript中媒体查询的使用。我在各种项目中使用该库取得了许多成功，但是我遇到的大多数开发人员都承认他们从未使用过，甚至从未听说过它。

在本文中，我想向您介绍该库，解释为什么以及如何使用它。

什么是enquire.js？

enquire.js是一个轻量级的纯JavaScript库，用于响应CSS媒体查询。用我自己的话说，在JavaScript中使用媒体查询时，enquire.js在window.matchMedia()之上为您提供了其他功能和灵活性。

该库是由尼克·威廉姆斯（Nick Williams）编写的，它已经存在了大约三年，拥有大量的开源活动。它的目的不是替换或matchMedia ; 相反，它可以为媒体查询提供其他功能，而这些功能本来就不存在。

我为什么要使用它？

有很多可以使用enquire.js的用例，包括：

在DOM上移动节点
通过Ajax加载补充内容（例如广告）
加载并运行JavaScript库（例如Packery ）以增强页面

以下各节介绍了这些用例中的每一个。

DOM操作

尽管使用JavaScript操纵DOM时需要考虑一些性能和可维护性，但仍有许多原因会这样做。

假设在您的博客上，您的个人简历中的边栏中有图片。在小屏幕上，侧边栏是隐藏的-但您仍然希望个人简介在帖子末尾可见。无需复制生物（和图像）标记，而是可以根据屏幕大小在DOM周围移动它，从而避免标记重复。这是一个例子：

window.$ = document.querySelector.bind(document);

enquire.register("screen and (max-width:40em)", {
  match: function() {
    $(".Post-content").appendChild($(".Bio"));
  },

  unmatch: function() {
    $(".Sidebar").insertBefore($(".Bio"), $(".Sidebar").firstChild);
  }
});

该示例的实时演示如下所示：

请参阅CodePen上的SitePoint（ @SitePoint ）提供的Pen MwNYjp 。

这是一个简单的示例，说实话，它所做的不过是原生matchMedia()提供的功能。实际上，这是仅使用matchMedia() ：