本教程详细阐述了如何使用 jquery 实现基于屏幕尺寸的动态 dom 元素定位，解决代码仅在窗口调整大小后生效的问题。通过将核心逻辑封装为函数并在页面加载时及窗口尺寸变化时调用，确保元素在不同屏幕宽度下都能正确初始化和响应式调整。文章还提供了优化后的代码示例和相关最佳实践。
在现代网页开发中，响应式设计是不可或缺的一部分。有时，我们不仅需要通过 CSS 媒体查询来调整元素的样式，还需要根据屏幕尺寸动态地改变 DOM 元素的结构或位置。然而，在使用 JavaScript（尤其是 jQuery）处理这类需求时，开发者常遇到的一个问题是，其编写的逻辑只在浏览器窗口被手动调整大小时才生效，而在页面初次加载时却不执行。这通常是因为相关代码被错误地放置在了 resize 事件监听器中。
问题根源分析
原始代码示例中，所有逻辑都被包裹在 jQuery(window).on('resize', function(){...}) 内部。这意味着，只有当 window 对象触发 resize 事件时（即用户拖动浏览器窗口边界改变其大小时），内部的代码才会执行。在页面初次加载完成时，resize 事件并不会自动触发，因此元素的位置不会被调整，直到用户手动操作。
解决方案：结合初始加载与事件监听
要解决这个问题，关键在于确保动态调整逻辑在页面加载时执行一次，并且在窗口大小改变时也能持续响应。最优雅的解决方案是将核心逻辑封装成一个独立的函数，然后在两个不同的时机调用它：
- 页面加载完成时： 确保元素在页面初次渲染时就处于正确的位置。
- 窗口大小改变时： 响应用户的操作，实时调整元素位置。
实现步骤与优化代码
以下是实现这一目标的优化代码示例，它不仅解决了上述问题，还通过使用三元运算符简化了条件判断：
$(function() {
// 定义一个函数，封装所有动态调整的逻辑
function adjustElementPosition() {
// 获取当前窗口宽度
const windowWidth = $(window).width();
// 根据窗口宽度动态选择目标元素，并执行insertBefore操作
$( ".checkout.woocommerce-checkout .woocommerce-shipping-fields__wrapper" )
.insertBefore(
windowWidth <= 1024 ?
".checkout.woocommerce-checkout .flux-step.flux-step--2 .flux-checkout__shipping-table" :
".checkout.woocommerce-checkout .flux-checkout__content-right #order_review"
);
}
// 1. 在DOM加载完成后立即调用一次函数，处理初始页面状态
adjustElementPosition();
// 2. 监听窗口的resize事件，并在每次事件触发时调用函数
$(window).on('resize', adjustElementPosition);
});代码解析：
- $(function() { ... });: 这是 $(document).ready(function() { ... }); 的简写形式，确保在 DOM 完全加载和解析后才执行内部代码，避免操作尚未存在的元素。
- function adjustElementPosition() { ... }: 我们将所有根据屏幕尺寸调整元素位置的逻辑封装在一个名为 adjustElementPosition 的函数中。这样做提高了代码的模块化和可读性。
- const windowWidth = $(window).width();: 获取当前浏览器视口宽度。
-
三元运算符 condition ? valueIfTrue : valueIfFalse: 这是一个简洁的条件表达式。它根据 windowWidth <= 1024 的结果，动态地选择 insertBefore 方法的目标选择器。
- 如果窗口宽度小于等于 1024px，则目标是 .checkout.woocommerce-checkout .flux-step.flux-step--2 .flux-checkout__shipping-table。
- 否则（窗口宽度大于 1024px），目标是 .checkout.woocommerce-checkout .flux-checkout__content-right #order_review。
- adjustElementPosition();: 在 $(function() { ... }); 内部，我们首先调用一次 adjustElementPosition 函数。这确保了在页面加载完成时，元素的位置就能根据当前屏幕尺寸正确初始化。
- $(window).on('resize', adjustElementPosition);: 接着，我们为 window 对象绑定 resize 事件监听器，当窗口大小发生变化时，再次调用 adjustElementPosition 函数，从而实现响应式调整。
注意事项与最佳实践
-
性能优化（Debouncing resize 事件）: resize 事件在用户拖动窗口时会频繁触发，可能导致函数被调用数百次，从而影响性能。为了避免这种情况，建议对 resize 事件进行“去抖”（Debouncing）处理。去抖技术可以确保在事件停止触发一段时间后才执行回调函数。
$(function() { function adjustElementPosition() { // ... (同上) } adjustElementPosition(); // 初始调用 let resizeTimer; $(window).on('resize', function() { clearTimeout(resizeTimer); resizeTimer = setTimeout(adjustElementPosition, 200); // 200毫秒内不再触发resize事件后执行 }); });上述代码中，我们引入了一个 resizeTimer。每次 resize 事件触发时，都会清除之前的定时器并设置一个新的定时器。如果 resize 事件在 200 毫秒内再次触发，旧的定时器会被清除，新的定时器会重新计时。只有当 resize 事件停止触发超过 200 毫秒时，adjustElementPosition 函数才会被真正执行一次。
CSS 媒体查询的优先考虑: 对于纯粹的样式调整（如隐藏/显示元素、改变颜色、字体大小等），CSS 媒体查询通常是更优的选择，因为它性能更高、更易于维护。只有当需要进行复杂的 DOM 结构操作（如本例中的 insertBefore）时，才考虑使用 JavaScript。
选择器精确性: 确保你的 jQuery 选择器足够精确，以避免意外地修改其他元素。本例中的选择器使用了多个类名和 ID，具有较高的特异性。
可维护性: 将复杂的逻辑封装在独立的函数中，并使用有意义的函数名，可以大大提高代码的可读性和可维护性。
总结
通过将动态 DOM 调整逻辑封装到函数中，并在页面加载时以及窗口 resize 事件发生时调用该函数，我们能够构建出既能在页面初次渲染时正确布局，又能响应用户操作的健壮的响应式网页。结合去抖技术可以进一步优化性能，而合理地选择使用 JavaScript 或 CSS 媒体查询则能确保项目的最佳实践。
