<html>
<script>
//some largeFunction()
//load a script dynamically based on the previous code
document.write("<script src='//...'><\/script>");
</script>
</html>
Question: is it possible to move the largeFunction() out of the static html page and put it into a js file? If yes, how could I then call that function statically before writing the <script> tag?
Short answer: Yes.
As long as you load the first script containing the function first, you can call the function anywhere, as long as it's loaded first.
<script src="file1.js" type="text/javascript"></script>
<script src="file2.js" type="text/javascript"></script>
In this example, make sure file1.js contains your largeFunction() function. You can then call largeFunction(); inside file2.js.
You can also do this:
<script src="file1.js" type="text/javascript"></script>
<script>
largeFunction();
</script>
Just make sure your FIRST script contains the function.
You can try following options:
function largeFunction(){
// This is a global function and is a part of window object.
// This can be called from anywhere once the file is loaded.
}
<script src="largeFunction.js" type="text/javascript"></script>
<script>
largeFunction();
</script>
These are functions that are executed only once when the file is loaded. They are called the moment they are compiled.
function largeFunction(){
}
(function(){
largeFunction();
})()
You can even try without IIFE
function largeFunction(){
}
largeFunction();
This events are fired once all elements are rendered. If your JS is manipulating any elements like managing UI states or creating controls like datepickers or searchable dropdowns or adding options to select, these events are preferred.
Note: Both events are not same. You can refer following post window.onload vs $(document).ready()
// Pure JS
function largeFunction(){
}
window.onload = function(){
largeFunction();
}
// jQuery
function largeFunction(){
}
$(document).ready(function(){
largeFunction();
})
Note: Its not a good practice to have large function. You should also try to split function to multiple functions
function getData(callback){
var data = ...
// Gets data from server
data = cleanData(data);
data = processData(data);
if(callback) callback(data); // callback refers to renderUI function
}
function cleanData(data){
// Clean if any field needs formatting
return data;
}
function processData(data){
// You can permute logic to parse data
return data;
}
function renderUI(data){
// Update DOM element with data
}
function largeFunction(){
getData(renderUI);
}
Without going into details about javascript modules, etc, I'll just address the easiest way for you to move forward and leave you to optimize as you see fit. Let's say you put largeFunction() into a separate file called myScript.js, then your HTML page setup would be like this:
<html>
<script type="text/javascript" src="myScript.js"></script>
<script>
largeFunction();
//load a script dynamically based on the previous code
document.write("<script src='//...'><\/script>");
</script>
</html>
As you can see, all you really need to do is make sure that you reference the external script file before your current script tag. From there, you can call largeFunction() as you would have if it were embedded in your HTML.
If you grab DOM elements and add event handlers in your JavaScript you don't have to put functions on the HTML page. You could just make the JS file and link to it using a script tag. It would probably be best to place the script tag at the bottom of the page to ensure that all of the DOM has loaded.
Example:
var getDomJquery = $("#got-Some-dom").on( "click", function(){
// do some cool JS DOM stuff here
});
var getDomPureJs = document.getElementById("got-Some-dom").on( "click", function(){
// do some cool JS DOM stuff here
});
In your HTML near bottom of the page.
<script src="myJsFile.js"></script>
myJsFile.js during load, without directly triggering the function?
IIFEorwindow.onload. These can be in that file as well.