Enquire.js - 加载时不匹配事件答案

【问题标题】：Enquire.js - unmatch event on loadEnquire.js - 加载时不匹配事件
【发布时间】：2015-03-19 00:56:42
【问题描述】：

看到这个fiddle。

enquire.register("screen and (max-width: 640px)", {
    match: function () {
        $("body").css("background","red");
    },
    unmatch: function () {
        $("body").css("background","blue");
    }
});

当浏览器窗口小于或等于 640 像素时加载时，则背景颜色将设置为红色。（即调用匹配事件）。但是，当加载时窗口的宽度超过 640 像素时，什么都不会发生，即不调用 unmatch 事件。为什么不？如果条件不匹配，有没有办法强制触发 unmatch 事件？

基本上我想要的是，inquiry 表现为一个 if-else 语句，立即被调用。

【问题讨论】：

标签： jquery media-queries enquire.js

【解决方案1】：

当我设计 enquire.js 时，它打算与移动优先的 RWD 一起使用。因此，它假设您正在采用渐进式增强方法。也就是说，当查询匹配时调用 match，并且仅当 match 已经发生一次（并且查询不再匹配）时才调用 unmatch。这可能看起来很奇怪，但常见的用例是“当这个查询匹配时做某事，当它不再匹配时撤消它”。一个示例可能是将元素转换为大屏幕上的选项卡区域，否则返回堆叠元素：

enquire.register(desktopMediaQuery, {
  match : function() { 
    makeTabs(someElement);
  },
  unmatch : function() {
    makeStacked(someElement);
  }
};

如果最初调用了 unmatch，当查询不匹配时，您必须将逻辑放入 unmatch 回调中以检查是否已经发生匹配（或者更糟，但 makeStacked 中的此类逻辑）。

如果我们要严格遵循渐进增强，在您的示例中，我将在 CSS 中默认使用蓝色背景，并在 match 中添加一个类，并在 unmatch 中删除该类：

enquire.register("screen and (max-width: 640px)", {
    match: function () {
        $("body").addClass("red-bg");
    },
    unmatch: function () {
        $("body").removeClass("red-bg");
    }
});

虽然我假设您的示例是您实际想要的简化版本。所以另一种方法是使用设置回调来掩盖默认情况：

enquire.register("(max-width: 640px)", {
    setup : function() {
        $("body").css("background","blue");
    },
    match : function() {
        $("body").css("background","red");
    },
    unmatch : function() {
        $("body").css("background","blue");
    }
});

如果这更适合您的需要，您也可以使用两个媒体查询。我认为这比使用上述设置更能传达意图。

enquire.register("(max-width: 640px)", {
    match : function() {
        $("body").css("background","red");
    }
})
.register("(min-width: 641px)", {
    match : function() {
        $("body").css("background","blue");
    }
});

这是一个演示这两种方法的小提琴：http://jsfiddle.net/7Pd3m/

【讨论】：

这确实是一个（非常）简化的案例。我一方面试图让 Inquire 与 Masonry 合作，另一方面与 Stellar 合作。我确实选择了最后一个解决方案。它更好地概述了我在做什么。但至少现在我明白为什么 enquire.js 是这样工作的。谢谢你！最后一件事，稍微偏离主题：Enquire.js 是否像 CSS 媒体查询一样考虑滚动条？我尚未对其进行测试，但我遇到了一些可能归因于滚动条宽度的行为，该宽度在 CSS 或 Enquire 中计入或未计入。
@WickyNilliams，我试着像你的上一个例子一样对我的问题进行排序，但在某种程度上它没有发生..stackoverflow.com/q/38168744/3697102
@WickyNilliams 这里是另一个喜欢 enquire.js 的用户。然而，我花了将近 1 个半小时试图弄清楚我做错了什么。我遇到了同样的问题。在我阅读了你的答案之后，我现在完全理解你为什么这样做了，但我建议在演示页面上做一个小注释，代码如下 sn-p 'Unmatch'，第一次加载的 'unmatch' 不会工作（类似的东西:)）。它可以避免很多麻烦:) 感谢您提供这个出色的工具！

【解决方案2】：

Enquire js 在 register 函数内部提供了一个名为 setup 的方法，该方法在调用 register 处理程序时触发一次（不会检测到任何媒体查询）。所以你可以像这样扩展你的代码来包含它：

enquire.register("screen and (max-width: 640px)", {
    setup: function() {
     // do stuff here as soon as register is called.
    },
    match: function () {
        $("body").css("background","red");
    },
    unmatch: function () {
        $("body").css("background","blue");
    }
});

（引用自他们的文档http://wicky.nillia.ms/enquire.js/#quick-start）

【讨论】：