什么是最佳做法，不要覆盖其他绑定函数window.onresize？ [英] What is the best practice to not to override other bound functions to window.onresize?

问题描述

我多少挖到JavaScript，我发现自己很多。例如，我们有 window.onresize 事件处理程序，如果我说：

  window.onresize = resize; 
 
函数resize（）
 {
 console.log（resize event detected！）; 
} 
  

不会杀死连接到同一个事件的所有其他功能，只需在控制台中记录我的消息？

如果是这样，我认为应该有另一个通知程序告诉我关于窗口大小调整事件 - 或者解决办法 - 而不会覆盖其他功能绑定到同一事件。

或者我完全被其使用困惑了

解决方案

你可以保存旧的onresize函数，也可以在您的自定义调整大小函数之前或之后调用。一个应该工作的例子是这样的：

  var oldResize = window.onresize; 
 
函数resize（）{
 console.log（resize event detected！）; 
 if（typeof oldResize ==='function'）{
 oldResize（）; 
} 
} 
 window.onresize = resize; 
  

如果有几个onresize函数，此方法可能会有问题。您可以将旧的onresize函数保存为闭包的一部分，并在函数后调用旧的onresize函数。

  function addResizeEvent（func）{
 var oldResize = window.onresize; 
 window.onresize = function（）{
 func（）; 
 if（typeof oldResize ==='function'）{
 oldResize（）; 
} 
}; 
} 
 
 function foo（）{
 console.log（resize foo event detected！）; 
} 
 
 function bar（）{
 console.log（resize bar event detected！）; 
} 
 addResizeEvent（foo）; 
 addResizeEvent（bar）; 
  

当您调用addResizeEvent时，您传递一个要注册的函数。它需要旧的resize函数并将其存储为oldResize。当调整大小时，它将调用您的函数，然后调用旧的resize函数。您应该可以添加任意数量的呼叫。

在此示例中，当窗口调整大小时，它将调用bar，然后调用foo，然后任何存储在window.resize（如果有什么）。

How much I dig into JavaScript, I find myself asking that much. For example we have window.onresize event handler and if I say:

window.onresize = resize;

function resize()
{
  console.log("resize event detected!");
}

Wouldn't that kill all other functions which is connected to the same event and just log my message in console?

If so I think there should be another notifier which tells me about window resize event - or a workaround maybe - without overriding other functions which are bound to same event.

Or am I totally confused by its usage?

解决方案

You can save the old onresize function and call that either before or after your custom resize function. An example that should work would be something like this:

var oldResize = window.onresize;

function resize() {
    console.log("resize event detected!");
    if (typeof oldResize === 'function') {
        oldResize();
    }
}
window.onresize = resize;

This method can have issues if there are several onresize functions. You could save the old onresize function as part of a closure and call the old one after your function.

function addResizeEvent(func) {
    var oldResize = window.onresize;
    window.onresize = function () {
        func();
        if (typeof oldResize === 'function') {
            oldResize();
        }
    };
}

function foo() {
    console.log("resize foo event detected!");
}

function bar() {
    console.log("resize bar event detected!");
}
addResizeEvent(foo);
addResizeEvent(bar);

When you call addResizeEvent, you pass it a function that you want to register. It takes the old resize function and stores it as oldResize. When the resize happens, it will call your function and then call the old resize function. You should be able to add as many calls as you would like.

In this example, when a window resizes, it will call bar, then foo, then whatever was stored in window.resize (if there was anything).

这篇关于什么是最佳做法，不要覆盖其他绑定函数window.onresize？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！