js 实现jq resize

在JavaScript中实现类似jQuery的resize事件监听，可以通过监听window对象的resize事件来完成。以下是一个基础的实现方式：

// 定义一个函数，该函数会在窗口大小变化时执行
function handleResize() {
    console.log('窗口大小变化了');
    // 在这里添加你需要执行的代码
}

// 添加resize事件监听器
window.addEventListener('resize', handleResize);

如果你想要实现一个类似于jQuery的链式调用风格，可以创建一个简单的封装：

var $ = {
    on: function(event, callback) {
        window.addEventListener(event, callback);
        return this; // 返回当前对象以支持链式调用
    }
};

// 使用封装后的$对象来监听resize事件
$.on('resize', function() {
    console.log('窗口大小变化了');
    // 在这里添加你需要执行的代码
});

如果你需要实现一个自定义的resize事件触发器，可以这样做：

// 创建一个自定义事件
var resizeEvent = new Event('resize');

// 定义一个函数，该函数会在窗口大小变化时执行
function handleResize() {
    console.log('窗口大小变化了');
    // 触发自定义的resize事件
    document.dispatchEvent(resizeEvent);
}

// 添加resize事件监听器
window.addEventListener('resize', handleResize);

// 监听自定义的resize事件
document.addEventListener('resize', function() {
    console.log('自定义的resize事件被触发了');
    // 在这里添加你需要执行的代码
});

在上面的代码中，当浏览器窗口大小发生变化时，handleResize函数会被调用，并且会触发一个自定义的resize事件。然后，你可以监听这个自定义事件来执行特定的代码。

需要注意的是，频繁触发的resize事件可能会导致性能问题，因为它会在用户调整窗口大小的整个过程中不断地触发。为了解决这个问题，可以使用防抖（debounce）或节流（throttle）技术来限制事件处理函数的执行频率。

以下是一个使用防抖技术的例子：

function debounce(func, wait) {
    var timeout;
    return function() {
        clearTimeout(timeout);
        timeout = setTimeout(func, wait);
    };
}

// 使用防抖技术来处理resize事件
window.addEventListener('resize', debounce(function() {
    console.log('窗口大小变化了（防抖处理）');
    // 在这里添加你需要执行的代码
}, 200)); // 200毫秒内连续触发不会执行

在这个例子中，debounce函数确保了即使resize事件在短时间内连续触发，handleResize函数也只会在最后一次触发后的200毫秒后执行一次。这样可以有效减少事件处理函数的执行次数，提高性能。