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

Question

查看此fiddle .

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

当浏览器窗口加载时小于或等于 640 像素时，背景颜色将设置为红色。 (即调用比赛事件)。然而，当加载时窗口宽度超过 640px 时，什么也不会发生，即不调用不匹配事件。为什么不？如果条件不匹配，是否有办法强制触发不匹配事件？

基本上我想要的是，inquire 的行为就像立即调用的 if-else 语句一样。

Answer 1

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

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

如果最初调用了unmatch，当查询不匹配时，那么您必须在不匹配回调中添加逻辑来检查匹配是否已经发生(或者更糟，但是在makeStacked<中这样的逻辑)。

如果我们严格遵循渐进增强，在您的示例中，我将在 CSS 中默认设置蓝色背景，并在匹配中添加一个类，并在不匹配中删除该类:

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");
    }
});

这是一个演示这两种方法的 fiddle :http://jsfiddle.net/7Pd3m/