How to import javascript function from file without running entire js file?

Question

I have page1.html which uses blah.js. One of the things blah.js does is run a function1() when the page is loaded. I would like to use function2() from blah.js in page2.html without blah.js running function1(). I thought I could add

export {function2}

to blah.js and then just import function2() by adding

<script type = "module">
import { function2 } from './blah.js'
</script>

to page2.html. But this seems to have the same functionality as if I just imported the file as normal:

  <script defer src="blah.js"></script>

i.e. function1() runs in page2 in both cases. How can I get access to function2() without running the other parts of blah.js?

Split function2 into another file and have both pages import it — slebetman
– slebetman, Commented Jun 5, 2022 at 3:42
Alternatively, modify blah.js so it doesn't run function1 when loaded. Instead have page1 call function1 manually — slebetman
– slebetman, Commented Jun 5, 2022 at 3:43

CertainPerformance · Accepted Answer · 2022-06-05 03:41:42Z

1

If you import from a module, all of that module's top-level code will run. That is, given

console.log('running');
export const foo = 5;

There is no way to import foo without also logging the text.

One good approach to this problem (and a very good practice in general) is to avoid side-effects at the top level of modules. If you have something that's a side-effect, put it into a function instead, and export that function, so that it only runs on demand, instead of every time anything from the file is imported.

So, you probably want to change your file to something like:

export const runFunction1WhenPageLoads = () => {
  const fnToRun = () => {
    // insert code here
  };
  if (document.readyState === 'complete') {
    fnToRun();
  } else {
    window.addEventListener('DOMContentLoaded', fnToRun);
  }
};
export const function2 = () => {
  // insert code here
};

answered Jun 5, 2022 at 3:41

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DMcC Over a year ago

"If you import from a module, all of that module's top-level code will run." Thank you for the info, I didn't know this was the case. Given that, yeah I can find plenty of workarounds.

Collectives™ on Stack Overflow

How to import javascript function from file without running entire js file?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related