Enquire.js -负载中的不匹配事件

Question

看这个小提琴。

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

当浏览器窗口是640 to或更少的加载，那么背景色将被设置为红色。(即调用匹配事件)。但是，当窗口在加载时大于640 is时，什么都不会发生，即不调用不匹配事件。为什么不行？如果没有匹配的条件，是否有办法强制不匹配的事件开火？

基本上，我想要的是，查询表现为即时调用的if-else语句。

Answer 1

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

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

如果最初调用了不匹配，当查询不匹配时，则必须将逻辑放入不匹配回调中，以检查匹配是否已经发生(更糟的是，在makeStacked中有这样的逻辑)。

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

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/

Answer 2

查询js在寄存器函数内部提供了一个名为setup的方法，该方法在调用寄存器处理程序时只触发一次(没有检测到任何媒体查询)。因此，您可以扩展代码，使其包括如下内容：

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)