javascript - 具有调整大小功能的 Javascript 函数的多个实例

Question

我创建了一个快速库来帮助我将文本绝对定位在背景图像上。它适用于一个实例。一旦我添加了多个实例，库函数中的调整大小函数就只对最后一个实例起作用。

这是我的图书馆代码 -

function overlay(params) {
  function resizeOverlay(params) {
    //get the overlay container
    var layContainer = document.getElementsByClassName(params.element)[0];

    //user sets height and width of bg image used so we can calculate ratio
    var bgHeight = params.height;
    var bgWidth = params.width;

    var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;

    var newSize = getFinalMeasurements(x, y, bgWidth, bgHeight);

    var newPos = getNewPosition(x, y, newSize);

    function getFinalMeasurements(x, y, natWidth, natHeight) {
      var finalSize = {};

      var originalRatios = {
        width: x / natWidth,
        height: y / natHeight
      };

      var coverRatio = Math.max(originalRatios.width, originalRatios.height); 

      finalSize = {
        height: natHeight * coverRatio,
        width: natWidth * coverRatio
      }

      return finalSize;
    }

    function getNewPosition(x, y, finalSize) {
      var left = finalSize.width - x;
      var top = finalSize.height - y;
      var leftPos;
      var topPos;
      var finalPos = {};

      if(left > 0) {
        leftPos = left/2;
      } else {
        leftPos = left;
      }

      if(top > 0) {
        topPos = top/2;
      } else {
        topPos = top;
      }

      finalPos = {
        left: leftPos,
        top: topPos
      }

      return finalPos;
    }

    layContainer.setAttribute('style', 'height:' + newSize.height + 'px; width:' + newSize.width + 'px; left: -' + newPos.left + 'px; top:-' + newPos.top + 'px');
  }

  resizeOverlay(params);

  window.onresize = function() {
    resizeOverlay(params);
    console.log('resizing');
  }
}

然后是我的实例 -

var compassTextContainer = new overlay({
    width: 2364,
    height: 1314,
    element: 'compass-overlay'
});

var liveFeedContainer = new overlay({
    width: 2364,
    height: 1314,
    element: 'livefeed-overlay'
});

var rocketContainer = new overlay({
    width: 2364,
    height: 1314,
    element: 'rocket-overlay'
});

所有这些都在初始加载时工作，但是当我调整窗口大小时，rocket-overlay 元素是唯一工作的。

Answer 1

这是因为您使用的 onresize 覆盖了之前的事件监听器。因此，每次您设置一个实例时，该实例的调整大小事件监听器都会覆盖前一个，因此只有最后一个有效。

要解决此问题，请使用 addEventListener，它会添加新的事件监听器而不删除之前的事件监听器:

window.addEventListener("resize", function() {
  resizeOverlay(params);
  console.log('resizing');
});

注意:由于逻辑在所有实例中重复，您可以重构您的代码以使用仅设置一个事件监听器的事件委托(delegate)。另外，尽量不要在每次调用 overlay 时都重新定义函数 resizeOverlay 和 getNewPosition，IIFE 是理想的选择:

var overlay = (function() {
  function resizeOverlay(params) {
    // ...
  }

  function getNewPosition(x, y, finalSize) {
    // ...
  }

  return function(params) {
    resizeOverlay(params);
    window.addEventListener("resize", function() {
      resizeOverlay(params);
    });
  }
})();