本教程将详细介绍如何利用jquery和`window.matchmedia`实现一个响应式的跑马灯（marquee）效果。我们将学习如何根据屏幕宽度动态地初始化跑马灯插件，并在宽度条件不满足时安全地销毁它，避免重复初始化导致的潜在问题，从而优化用户体验和页面性能。
引言
在现代网页设计中，响应式布局是不可或缺的。许多UI组件需要根据设备屏幕尺寸进行调整，甚至在特定尺寸下完全启用或禁用。jQuery Marquee插件提供了一种创建滚动文本或图片效果的简便方式，但在不同屏幕尺寸下，我们可能希望其行为有所不同。例如，在移动设备上启用跑马灯以节省空间，而在桌面设备上则禁用，以提供更静态的布局。
本教程将指导您如何实现一个智能的响应式跑马灯，它能够根据屏幕宽度自动初始化或销毁，确保在任何设备上都能提供最佳的用户体验。
挑战：动态初始化与销毁
直接在$(window).on('resize', function() { ... })事件中根据宽度条件进行初始化和销毁，可能会遇到以下问题：
- 重复初始化： 当用户反复调整窗口大小跨越阈值时，如果缺乏状态管理，插件可能会被多次初始化，导致错误或不可预测的行为。
- 销毁不彻底： 如果插件没有提供destroy方法，或者销毁逻辑不正确，可能会留下DOM元素或事件监听器，造成内存泄漏。
- 性能问题： resize事件触发频繁，不加优化的处理逻辑可能导致页面卡顿。
为了解决这些问题，我们需要一种机制来跟踪插件的当前状态（是否已初始化），并利用更高效的媒体查询方法。
解决方案核心：matchMedia与数据属性
我们将结合使用以下技术来构建健壮的响应式跑马灯：
- window.matchMedia()： 这是一个原生的JavaScript API，用于评估CSS媒体查询。它比直接读取$(window).width()更高效，因为它会监听媒体查询状态的变化，并提供一个matches属性来指示当前是否匹配。
- jQuery data()方法： 我们可以利用jQuery的data()方法为DOM元素附加自定义数据，用来标记跑马灯插件是否已经在该元素上初始化。这提供了一种简单而有效的方式来管理组件的状态。
- jQuery Marquee destroy方法： 幸运的是，jQuery Marquee插件提供了destroy方法，允许我们干净地移除跑马灯效果并清理相关资源。
实现步骤
1. 引入必要的库
首先，确保您的页面中已引入jQuery库和jQuery Marquee插件。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式jQuery Marquee</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.tt-services-listing {
white-space: nowrap;
overflow: hidden;
border: 1px solid #ccc;
padding: 10px;
background-color: #f9f9f9;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="tt-services-listing">
这是一个需要滚动的文本内容，当屏幕宽度小于768px时，它将以跑马灯形式滚动。请尝试调整浏览器窗口大小。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 请确保您的Marquee插件路径正确 -->
<script src="https://cdn.jsdelivr.net/npm/jquery.marquee@1.6.0/jquery.marquee.min.js"></script>
<script>
// 您的JavaScript代码将放在这里
</script>
</body>
</html>2. 编写JavaScript逻辑
我们将使用window.matchMedia()来定义媒体查询，并创建一个处理函数来管理跑马灯的生命周期。
jQuery($ => { // DOM ready and $ alias in scope
// 定义媒体查询对象：当屏幕宽度小于768px时匹配
const m768 = matchMedia("(width < 768px)");
// 获取目标元素
const $listings = $('.tt-services-listing');
// 定义跑马灯的配置选项
const marqueeOptions = {
duration: 20000, // 滚动一圈所需时间（毫秒）
duplicated: true, // 是否复制内容以实现无缝滚动
delayBeforeStart: 0, // 滚动开始前的延迟（毫秒）
startVisible: true, // 初始时是否可见
// 其他可选配置...
};
// 定义处理跑马灯初始化和销毁的函数
const handleMarquee = () => {
// 检查当前是否匹配媒体查询（即屏幕宽度小于768px）
// 并且检查跑马灯是否尚未初始化（通过data属性判断）
if (m768.matches && !$listings.data("marqueeinit")) {
// 如果匹配且未初始化，则初始化跑马灯
$listings.data("marqueeinit", 1); // 设置data属性标记为已初始化
$listings.marquee(marqueeOptions);
console.log('Marquee initialized.');
}
// 否则，如果当前不匹配媒体查询（即屏幕宽度大于等于768px）
// 并且跑马灯已经初始化
else if (!m768.matches && $listings.data("marqueeinit")) {
// 如果不匹配且已初始化，则销毁跑马灯
$listings.removeData("marqueeinit"); // 移除data属性
$listings.marquee("destroy");
console.log('Marquee destroyed.');
}
};
// 绑定resize事件：当窗口大小改变时调用处理函数
$(window).on("resize", handleMarquee);
// 页面加载时立即调用一次处理函数，以设置初始状态
handleMarquee();
});3. 代码解析
- jQuery($ => { ... });: 这是一个常见的jQuery模式，用于确保DOM完全加载后执行代码，并安全地将$别名传递给函数，即使jQuery.noConflict()被使用。
- const m768 = matchMedia("(width : 创建一个MediaQueryList对象，它会监听width
- $listings.data("marqueeinit", 1);: 当跑马灯被初始化时，我们给目标元素添加一个名为marqueeinit的自定义数据属性，并将其值设为1（任何非undefined的值都可以）。
- $listings.removeData("marqueeinit");: 当跑马灯被销毁时，我们移除这个marqueeinit数据属性，表示它不再处于初始化状态。
- if (m768.matches && !$listings.data("marqueeinit")): 这个条件判断非常关键。它确保只有在屏幕宽度小于768px 并且 跑马灯尚未初始化时，才执行初始化操作。
- else if (!m768.matches && $listings.data("marqueeinit")): 这个条件判断确保只有在屏幕宽度大于等于768px 并且 跑马灯已经初始化时，才执行销毁操作。
- $(window).on("resize", handleMarquee);: 将handleMarquee函数绑定到window的resize事件上，这样每当窗口大小改变时，都会调用该函数来检查和调整跑马灯状态。
- handleMarquee();: 在脚本加载并执行时，立即调用一次handleMarquee，以确保页面在加载时就能根据当前屏幕尺寸正确设置跑马灯的初始状态。
注意事项与最佳实践
-
Debounce resize事件： resize事件在用户调整窗口时会频繁触发，这可能导致handleMarquee函数被多次调用，虽然我们的逻辑已经避免了重复初始化/销毁，但仍然可能造成不必要的计算。在实际项目中，可以考虑对resize事件进行防抖（debounce）处理，例如使用Lodash库的_.debounce()方法，或手动实现一个防抖函数，以限制函数调用的频率。
// 简单的防抖函数示例 const debounce = (func, delay) => { let timeout; return function(...args) { const context = this; clearTimeout(timeout); timeout = setTimeout(() => func.apply(context, args), delay); }; }; // 应用防抖 $(window).on("resize", debounce(handleMarquee, 200)); // 200ms的延迟 插件兼容性： 确保您使用的jQuery插件提供了destroy方法。如果插件没有提供，您可能需要手动移除其生成的DOM元素和事件监听器，或者重新加载包含该组件的区域。
媒体查询阈值： 根据您的设计需求调整"(width 平板电脑/小屏幕桌面）和480px（手机）。
初始状态： handleMarquee()在页面加载时调用一次是至关重要的，它确保在用户没有触发resize事件之前，跑马灯就能处于正确的初始状态。
替代状态管理： 除了data()属性，您也可以使用一个全局变量或模块作用域内的变量来跟踪跑马灯的初始化状态，但data()属性的好处是它直接与DOM元素关联，更具局部性和可维护性。
总结
通过结合使用window.matchMedia()和jQuery的data()方法，我们成功地构建了一个高效且健壮的响应式jQuery Marquee解决方案。这种方法不仅解决了重复初始化和销毁的潜在问题，还通过利用原生媒体查询API提升了性能。遵循这些最佳实践，您可以为用户提供一个无缝且响应迅速的网页体验，无论他们使用何种设备。
