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

我使用CSS媒体查询使我的网站响应：

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

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

我用于检查媒体查询

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

所以一开始一切正常，当我的屏幕<1200px时，它会显示移动版本，如果屏幕更高，它会显示桌面版本（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)

1）加载桌面JAVASCRIPT（一切正常）
2） 调整窗口大小<1200px（切换到移动模板）
加载移动JAVASCRIPT（站点中断）
3） 调整窗口大小>1200px（切换到桌面模板）
第二次加载桌面JAVASCRIPT（网站中断次数更多）

---

因此，我想知道如何“卸载”javascript，或者根据使用的媒体查询加载两个不同的javascript文件的优雅方式？

首先，您可以有一个javascript（将两个javascript连接在一起）和一个控制器，该控制器将验证您的窗口大小是否大于1200

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

---

希望这有帮助。顺便提一下，这个问题很好。

首先，您可以使用一个JavaScript（将两个JavaScript连接在一起）和一个控制器来验证您的窗口大小是否大于1200

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

---

希望这有帮助。顺便提一下，这个问题很好。

我推荐一个库，比如，你可以自己编写触发器代码，但是如果你有“桌面幻灯片”和“移动幻灯片”，你需要确保在调整大小时销毁非活动的，并且Inquire有一个很好的API，其中包括一个不匹配的触发器

---

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

我推荐一个库，比如，你可以自己编写触发器代码，但是如果你有“桌面幻灯片”和“移动幻灯片”，你需要确保在调整大小时销毁非活动的，并且Inquire有一个很好的API，其中包括一个不匹配的触发器

---

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

也许可以尝试使用jQuery Mobile。。。从技术上讲，您不需要使用JavaScript来使网站具有响应性。这一切都可以通过CSS和流畅的布局来实现。你能详细说明一下JavaScript是如何发挥作用的吗？好吧，我不使用JavaScript来使网站响应。我只是通过CSS（媒体查询，我在这里设计了两个单独的模板）来实现这一点。但是，由于移动版和桌面版使用相同的DOM元素，因此javascript仍然会尝试运行幻灯片。这是一个问题，因为大多数交互元素在移动版本中被简化了。所以你不用幻灯片，只需要静态图像。好的，我明白了。抱歉，我误解了您的全部情况。也许可以尝试使用jQuery Mobile。。。从技术上讲，您不需要使用JavaScript来使网站具有响应性。这一切都可以通过CSS和流畅的布局来实现。你能详细说明一下JavaScript是如何发挥作用的吗？好吧，我不使用JavaScript来使网站响应。我只是通过CSS（媒体查询，我在这里设计了两个单独的模板）来实现这一点。但是，由于移动版和桌面版使用相同的DOM元素，因此javascript仍然会尝试运行幻灯片。这是一个问题，因为大多数交互元素在移动版本中被简化了。所以你不用幻灯片，只需要静态图像。好的，我明白了。抱歉，我误解了你的全部情况。谢谢你的回复，你好。嗯，有点希望有一个更简单的方法来做。但我想这是唯一的办法。如果javascript文件非常小，也没有问题，而且我必须解除所有处理程序的绑定。对于一个简单的开关来说，似乎有很多额外的代码：）顺便问一下，为什么需要两个不同大小的脚本？难道你不能让脚本的功能尽可能通用并设置参数吗？还是通过这两个脚本加载不同的HTML控件？谢谢您的回复，helly0d。嗯，有点希望有一个更简单的方法来做。但我想这是唯一的办法。如果javascript文件非常小，也没有问题，而且我必须解除所有处理程序的绑定。对于一个简单的开关来说，似乎有很多额外的代码：）顺便问一下，为什么需要两个不同大小的脚本？难道你不能让脚本的功能尽可能通用并设置参数吗？或者通过这两个脚本加载不同的HTML控件？