考虑到CSS媒体查询加载和卸载JavaScript

Question

我正在使用CSS Media Queries使我的网站具有响应能力：

@media (min-width:1200px) {
    // DESKTOP STYLING
}

@media (max-width:1200px) {
    // MOBILE STYLING
}

我使用https://github.com/paulirish/matchMedia.js检查媒体查询

if(min-width:1200px) {
    // DESKTOP JAVASCRIPT
} else {
    // MOBILE JAVASCRIPT
}

因此，最初一切正常，当我的屏幕小于1200像素时，它显示移动版本，如果屏幕更高，则显示桌面版本（javascript也可以）。

现在的问题是，例如，当我开始调整窗口大小时：

1) LOADS DESKTOP JAVASCRIPT (EVERYTHING IS FINE)
2) RESIZE WINDOW < 1200px (SWITCH TO MOBILE TEMPLATE)
   LOADS MOBILE JAVASCRIPT (SITE BREAKS)
3) RESIZE WINDOW > 1200px (SWITCH TO DESKTOP TEMPLATE)
   LOADS DESKTOP JAVASCRIPT A SECOND TIME (SITE BREAKS EVEN MORE)

所以我想知道如何“卸载” javascript的一种想法，或者是一种优雅的方式来加载两个不同的javascript文件，具体取决于使用哪种媒体查询？

Answer 1

首先，您可以使用一个JavaScript（将2个结合在一起）并具有一个控制器，该控制器将验证您的窗口大小是大于还是小于1200。

或者，您可以尝试将JavaScipt文件包装成两个对象，然后创建第三个对象作为控制器。 通过Ajax，您可以加载和卸载文件（由于控制器仍在其中而不会中断）并在它们之间切换。 但是，这是一个问题，因为在进行切换时，您将必须删除所有侦听器，并且必须加载另一个文件，这将花费少量时间。

希望这可以帮助。 顺便问好问题。

Answer 2

我建议使用像Enquire.js这样的库，您始终可以自己编写触发器的代码，但是如果您有“桌面幻灯片”和“移动幻灯片”，则需要确保在调整大小和Inquire有一个不错的API，其中包括不匹配触发器。

我正在为“桌面幻灯片”和“移动幻灯片”使用相同的幻灯片插件，但是需要不同的设置（例如，使用底部对齐的寻呼机与下一个/上一个导航），该设置很容易在页面加载时进行设置，但是如果设备更改了媒体查询的方向更改断点等，该怎么办。