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

【问题标题】：Loading and Unloading JavaScript with CSS Media Queries in mind考虑到 CSS 媒体查询加载和卸载 JavaScript
【发布时间】：2015-04-24 11:36:16
【问题描述】：

我正在使用 CSS 媒体查询来使我的网站具有响应性：

@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 文件，具体取决于使用的媒体查询？

【问题讨论】：

也许可以尝试使用 jQuery Mobile。 jquerymobile.com ...从技术上讲，您也不需要使用 JavaScript 来使网站具有响应性。这一切都可以通过 CSS 和流体布局来完成。您能否详细说明一下 JavaScript 是如何发挥作用的？
好吧，我不使用 JavaScript 来使网站响应。我只是通过 CSS（媒体查询，我设计了两个单独的模板）来做到这一点。但由于移动版和桌面版使用相同的 DOM 元素，因此 javascript 仍然尝试运行幻灯片。这是一个问题，因为大多数交互元素在移动版本中被简化了。因此，您只需使用静态图像，而不是幻灯片。
好的，我明白了。抱歉，我误解了你的全部情况。

标签： javascript jquery media-queries responsive-design

【解决方案1】：

首先，您可以拥有一个 JavaScript（将 2 个连接在一起）并拥有一个控制器来验证您的窗口大小是否大于或小于 1200。

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

希望这会有所帮助。顺便说一句，好问题。

【讨论】：

感谢您的回复，helly0d。好吧，希望有一种更简单的方法来做到这一点。但我想这是唯一的方法。如果 javascript 文件非常小，那也没问题，我也必须取消绑定所有处理程序。对于一个简单的开关来说，这似乎是可怕的额外代码:)
顺便说一句，为什么需要两个不同大小的脚本？你不能让脚本的功能尽可能通用并设置参数吗？或者你是否通过这 2 个脚本加载不同的 HTML 控件？

【解决方案2】：

我会推荐像Enquire.js 这样的库，您可以随时自己编写触发器，但如果您有“桌面幻灯片”和“移动幻灯片”，则需要确保销毁不活动的那个on resize and Inquire 有一个不错的 API，其中包括一个不匹配的触发器。

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

【讨论】：