Question

A simple question.

I have a web project includes multi JavaScripts.

JS:

// (1） Event

$('.input').keyup(function()
{
    keyUpFunction();    
});


// (2) Function

function keyUpFunction(){ ... }

(1),(2) which should come first in one javascript file? If the browser read the function first, does it store the function in memory and invoke it when scan the event.

In some case, the same function is defined in multi javascript . e.g.

prm.add_endRequest(function() {
    fn1();
    fn2();
});

$(document).ready(.......)

Should I duplicate the function name and define each component in each js file.
or keep the function declare in one file and invoke sub-function composite the function?

Answer 1

Functions defined in the following manner:

function fooBar(){}

Are ‘hoisted’ to the top of the current scope. This means they will always be available, in the current scope, even if they are defined at the end of the file.

This does not hold true if you defined you functions like this:

 var fooBar = function(){};

These functions are not hoisted, and must be defined before they can be used.

It should be noted that in your specific example, keyUpFunction will only be called once a keyup event has fired. This also means that all javascript on your page will already be evaluated, so the keyUpFunction will be defined (parsed) already regardless.

EDIT: To be more explicit, this first example is okay:

doSomething('hello world');
function doSomething(str){ 
   console.log(str);
} 

However, this will cause you problems:

doSomething('hello world');
var doSomething = function(str){ 
   console.log(str);
}