导入 var 并调整 windows

Question

I have some problems with an importing variable. despite different events, the var is never updated...

This is utilities file:

function sizes() {
    let contentWidth = [...document.body.children].reduce(
        (a, el) => Math.max(a, el.getBoundingClientRect().right), 0)
        - document.body.getBoundingClientRect().x;

    window.addEventListener('resize', sizes)

    return {
        windowWidth:  document.documentElement.clientWidth,
        windowHeight: document.documentElement.clientHeight,
        pageWidth:    Math.min(document.body.scrollWidth, contentWidth),
        pageHeight:   document.body.scrollHeight,
        screenWidth:  window.screen.width,
        screenHeight: window.screen.height,
        pageX:        document.body.getBoundingClientRect().x,
        pageY:        document.body.getBoundingClientRect().y,
        screenX:     -window.screenX,
        screenY:     -window.screenY - (window.outerHeight-window.innerHeight),
    }
}

export default sizes();

Here, I import my var

import size from "../../utilities/size";

window.addEventListener('resize', () => {
    console.log(size.windowWidth);
})

Answer 1

When you call export default sizes(); you are actually evaluating the size function. Your utilities file is actually the same as this:

const size = {
        windowWidth:  document.documentElement.clientWidth,
        windowHeight: document.documentElement.clientHeight,
        pageWidth:    Math.min(document.body.scrollWidth, contentWidth),
        pageHeight:   document.body.scrollHeight,
        screenWidth:  window.screen.width,
        screenHeight: window.screen.height,
        pageX:        document.body.getBoundingClientRect().x,
        pageY:        document.body.getBoundingClientRect().y,
        screenX:     -window.screenX,
        screenY:     -window.screenY - (window.outerHeight-window.innerHeight),
    }
export default size;

Now if you want that code to be reactive, and calculate the variables each time you call them, you can use a simple Accessor Get Method (MDN) which will evaluate those for you, each time you access those properties:

const size = {
  get windowWidth() {
    return document.documentElement.clientWidth
  },
  get windowHeight() {
    return document.documentElement.clientHeight
  },
  get pageWidth() {
     let contentWidth = [...document.body.children].reduce(
        (a, el) => Math.max(a, el.getBoundingClientRect().right), 0)
        - document.body.getBoundingClientRect().x;
    return Math.min(document.body.scrollWidth, contentWidth)
  },
  get pageHeight() {
    return document.body.scrollHeight
  },
  get screenWidth() {
    return window.screen.width
  },
  get screenHeight() {
    return window.screen.height
  },
  get pageX() {
    return document.body.getBoundingClientRect().x
  },
  get pageY() {
    return document.body.getBoundingClientRect().y
  },
  get screenX() {
    return -window.screenX
  },
  get screenY() {
    return -window.screenY - (window.outerHeight - window.innerHeight)
  },
}
export default size;

By doing this you will neither need to bind any event handler in the utils file, just plug them where you need.

Now your user file will be:

import size from "../../utilities/size";

window.addEventListener('resize', () => {
    console.log(size.windowWidth);
})

And it will log a changed value each time you resize your window!

Further analysis of your code:

export default sizes();

// is actually the same as
const $tmp = sizes();
export default $tmp;

// Now take a look at what sizes does:
function sizes() {
    ...    
    
    // this evaluates instantly your object
    return { windowWidth, ... }
    
    // is the same as
    const result = { windowWidth, ... }
    return result
    // if you now console.log one of those properties, they are fixed numbers
    // and they will not be changed inside this function
    
}


// But, why the object is not changing when the window resizes?
// Every time you call the function, it returns a new instance of the object
function example() { return { } }
let A = size();
let B = size();
console.log(A == B) // false

// Now when you export the constant sizes() you actually
// referring (for example) to the object A
// When you bind the resize event to sizes, it will create another object B
// and change it:
window.addEventListener('resize', example);
// is the same as
window.addEventListener('resize', () => { return {} });

This snippet tries to explicate what is happening behind the scenes:

 const btn = document.getElementById('resize'); let OBJECT_ID = 0; let exportedObject = null; // emulates sizes() function makeMyObject() { OBJECT_ID += 1; const result = { id: OBJECT_ID }; // first time just print the export value if (.exportedObject) { console:log('exported ID,'. result;id). } // the other times print exported value and current returned value else { console:log('exported ID,'. exportedObject,id: 'returned ID,'. result;id) } return result. } // emulates window,addEventListener('resize'; sizes). btn,addEventListener('click'; makeMyObject); // emulates export default sizes() exportedObject = makeMyObject();

 <p>Click the button to emulate the <code>winow.resize Event</code></p> <button id="resize">Emulate</button>

Answer 2

You should not call the function in the export. Leave that up to whatever is importing the function.

Also, do not declare the resize event listener inside of the function.

Additionally, the variable/function "dimensions" is slightly-less cryptic that "size/sizes".

Definition

/app/utilities/dimensions.js

const dimensions = () => {
  let contentWidth = [...document.body.children].reduce(
      (a, el) => Math.max(a, el.getBoundingClientRect().right), 0) -
    document.body.getBoundingClientRect().x;

  return {
    windowWidth  : document.documentElement.clientWidth,
    windowHeight : document.documentElement.clientHeight,
    pageWidth    : Math.min(document.body.scrollWidth, contentWidth),
    pageHeight   : document.body.scrollHeight,
    screenWidth  : window.screen.width,
    screenHeight : window.screen.height,
    pageX        : document.body.getBoundingClientRect().x,
    pageY        : document.body.getBoundingClientRect().y,
    screenX      : -window.screenX,
    screenY      : -window.screenY - (window.outerHeight - window.innerHeight),
  }
};

export default dimensions; // Do not call as a function...

Usage

/app/view/components/main.js

import dimensions from '../../utilities/dimensions';

window.addEventListener('resize', () => {
  const { windowWidth } = dimensions(); // Call as a function...
  console.log(windowWidth);
})

Answer 3

I think what you are trying to do is

function sizes() {
let contentWidth = [...document.body.children].reduce(
    (a, el) => Math.max(a, el.getBoundingClientRect().right), 0)
    - document.body.getBoundingClientRect().x;

return {
    windowWidth:  document.documentElement.clientWidth,
    windowHeight: document.documentElement.clientHeight,
    pageWidth:    Math.min(document.body.scrollWidth, contentWidth),
    pageHeight:   document.body.scrollHeight,
    screenWidth:  window.screen.width,
    screenHeight: window.screen.height,
    pageX:        document.body.getBoundingClientRect().x,
    pageY:        document.body.getBoundingClientRect().y,
    screenX:     -window.screenX,
    screenY:     -window.screenY - (window.outerHeight-window.innerHeight),
}}

window.addEventListener('resize', () => {
    console.log(sizes());
});