Check out this piece of JavaScript code:
(function (w, d) {
var loader = function () {
var s = d.createElement("script"), tag = d.getElementsByTagName("script")[0];
s.src = "https://example.org/script.js";
tag.parentNode.insertBefore(s,tag);
};
w.addEventListener ? w.addEventListener("load", loader, false) :
w.attachEvent("onload", loader);
}) (window, document);
Why did the author of this code use this method to include a script in the document?
And what is the usefulness of the line:
w.addEventListener ? w.addEventListener("load", loader, false) :
w.attachEvent("onload", loader);
Last point: I'm a JavaScript beginner, what is the (window, document) at the end?
The first question, the code checks to see if window.addEventListener is defined. If it is, it uses it, otherwise it uses window.attachEvent. This is for browser compatibility.
The 2nd question, this code is an anonymous function which takes 2 parameters, w and d. This function is immediately called, passing the parameters window and document.
The following addEventListener line is to register the function so that it gets called when the page finishes loading. Internet Explorer and Firefox (et al) use different functions to do this.
w.addEventListener ? w.addEventListener("load", loader, false) :
w.attachEvent("onload", loader);
In javascript a function is an object in and of itself. As such it's 'value' can be assigned to a variable or consumed immediately. To consume it immediately it must be wrapped in parentheses (otherwise it won't do what you want) and then call it like it were a regular function.
(function (w, d) { ... }) (window, document);
It's more obvious what is going on if we break it up across two lines.
var a = function(w, d){ ... };
a(window, document);
It was done this way to as to not pollute the global scope with temporary values or functions. Not to mention not trashing anyone else variables. This can be broken into two parts:
By encapsulating the code in a closure anything explicitly declared inside is in the closure's scope, not the global scope. var loader is in the closure's scope.
By consuming the closure immediately it won't be stored in a variable in the global scope. Since it was declared anonymously it won't exist as a named function in the global scope.
Firstly, w.addEventListener ?to make sure if the browser supported the addEventListener method of window
Secondly, (window, document) is just parameter call of anonymous function he wrote before function(w,d) {}
It looks like the author is waiting for the page to be fully loaded before attaching the script tag. addEventListener (DOM level 2) and attachEvent (Microsoft stuff) are more flexible ways of attaching events. The code is similar to saying w.onload = loader.
The last bit is passing arguments into the anonymous function, where they are named w and d. By putting the () at the end, the anonymous function is invoked right away.
So the function is wrapped in a closure. Which in turn means w = window and d = document.
When the method is called the it creates a function called loader which is the callback for one of the two possible event listener triggers (meaning, that'll be called when the load or onload event is called on the window).
The x ? y : z syntax is a shorthand if then else call.
If we expanded that out, it'd look like this:
if (w.addEventListener) {
w.addEventListener("load", loader, false);
} else {
w.attachEvent("onload", loader);
}
that statement is used cater the method for both IE and other browsers.
The author of this code is using an anonymous function wrapped in a closure to fire off the function, which registers a load event. The script on the page will not actually be loaded until the window's onload event fires.
The reason that the author may be delaying the script load may be to give the web page more time to render before actually loading in the other script. This is a great technique to load page content quickly while delaying the loading of resources that are not immediately needed.
The technique the author is using is an anonymous function wrapped in a closure. Picture this:
myFunction (window, document);
Now, I'm going to replace the function call with an anonymous function:
function(w, d) {
// do stuff
alert("w = " + w);
alert("d = " + d);
}
Now I'm going to cause that function to run immediately, without actually giving it a name. I'm also going to pass two parameters into that anonymous function:
( function(w, d) {
// do stuff
alert("w = " + w);
alert("d = " + d);
}) ("1234", "5678");
The output in this example would be:
w = 1234
d = 5678
If you watch the parentheses and match them up, the first outer parentheses matches the closing parentheses on the last line at character 2, that is the function name, and the following set of parentheses wrap the two values passed into the function as parameters.
This can be a tough concept to grasp at first; after you see it done a few times, it starts to make more sense.
Adding the script that way allows the author to include that script in the document without directly editing HTML files. Can also be used to dynamically load a script only when needed. (i.e. if you have a bunch of code to edit something on the page, you don't want to download it until the user actually clicks the edit button, so you don't waste bandwidth when it's not needed).
addEventListener and attachEvent are ways to trigger a function to be called when the page has finished loading. In this case, there's a function named loader
The reason for both is that some browsers support one and some support the other. I've been using jQuery long enough that I don't remember which is which.
(window, document) is a way to encapsulate those variables in scope and/or refer to them by shorthand w and d. The author is creating a function that expects those parameters, then passing both window and document as the arguments for them.
The closure also helps the author keep from having his script clash with other scripts on the page. Think of every variable declared in there like it's a private variable in other languages.
This is effectively the same as:
function RegisterEventListener(w, d) {
var loader = function () {
var s = d.createElement("script"), tag = d.getElementsByTagName("script")[0];
s.src = "https://example.org/script.js";
tag.parentNode.insertBefore(s,tag);
};
if (w.addEventListener) {
w.addEventListener("load", loader, false);
} else {
w.attachEvent("onload", loader);
}
}
RegisterEventListener(window, document);
The only real differences are:
If you define an anonymous function (using function () {};) without assigning it to anything it is only available for limited use (because there is no way to reference it). At the same time, anonymous functions also allow immediate execution (like the one in the code from your question function(a, b) {}(a, b);.
The condition ? true : false (tertiary operator) is just shorthand for writing simple if statements so it requires less typing to write out, but some people also see it as being less readable.
The window, document at the end of the first block of code are arguments to the anonymous function defined in the rest of the code block. Since Javascript is pretty much a functional language programmers are allowed to define these anonymous functions and even use them without giving them a name.
The block of code you pasted with the question mark is an example of infix notation, a language construct that fits this pattern: condition ? ifTrueExpression : ifFalseExpression. Where condition is true, the entire expression will be equal to ifTrueExpression. Otherwise, the entire expression will be equal to ifFalseExpression.
The use of infix notation you pasted is common in detecting which type of internet browser is being used. Although, I'm not sure which browser this block of code is trying to detect, its intent is to implement an event handler in a browser specific way.
I may be wrong, but this is the implementation used by Google with their analytics script.
This is called a closure, a function that is autoexecuted and enclose the variables inside, so they can't mess with your code.
This codes essentially creates a script tag and append this to the DOM before the first script tag it finds in the document.
The answer for the first question is about browser compatibility. some browsers use addEventListener and others attachEvent to attach events to elements in the page (in this case, the window) and it will lounch on the load event of the window (when all content is loaded, after the document is ready). Take a look at this for a more detailed answer: window.onload vs $(document).ready()
The second answer is simple. This are the parameters used in the closure (the auto calling function) and can be read in this way:
function anonymous(w, d) {
...
}
anonymous(window, document);
Related
I want to overwrite some functions because the function that I want to load first depends on user interaction (most of time) and I want to load first only an empty version of functions (to be sure that if this function is called, JavaScript will not stop the execution and throw an error). After the page loads, I want to load the actual function.
Is that a good idea?
Will the code below work on all browsers?
//for the first time
function name(){}
//after page loaded
function name(){....//long function//..........}
1. Is that good idea?
Probably not, but we'd have to know a great deal more about what you actually need to do; maybe for your use case, this is exactly the right solution.
Alternately, it might make more sense to provide some state information the (one) function can use to determine its logic.
2. does below code will work on all browsers?
Yes, and it's defined in the specification. If there are multiple function declarations in the same scope, the bottom one wins.
Alternately, you could assign to the identifier created by the first function declaration:
//for the first time
function name(){}
//when the page loads
name = function() { };
The advantage to doing this is that you can do it in a callback (for instance, an event handler), whereas (of course) writing a function declaration in an event handler only defines the function within that event handler's scope.
Is it a good idea?
No.
Will it work in all browsers
Yes.
var func = function() {};
window.onload = function() {
func = function() {
...new function definition...
};
};
Use simple closure.
http://jsfiddle.net/sidonaldson/ZuPYM/
(function() {
if (window.DeviceOrientationEvent)
{
$("e").innerHTML = "DeviceOrientationEvent";
window.addEventListener('deviceorientation', function(e)
{
// y-axis - yaw
var g = e.gamma || 0;
// x-axis - tilt
var b = e.beta || 0;
// z=axis - swivel
var a = e.alpha || 0;
// degree north
var c = e.compassHeading || e.webkitCompassHeading || 0;
// accuracy in deg
var accuracy = e.compassAccuracy || e.webkitCompassAccuracy || 0;
deviceOrientationHandler(g, b, a, c, accuracy);
}, false);
}
else
{
$("e").innerHTML = "NOT SUPPORTED #FAIL";
}
})();
Why does the function have a format of (function(...) {...}) (); What is going on here I have never seen a function declared like this.
Is the $ use a variable name like a _ in other languages
How does this function keep on looping, in C++ you needed a while or for or recursion what is going on with the function('e').
1) why does the function have a format of (function(...) {...}) (); What is going on here I have never seen a function declared like this.
This is a so called IIFE(Instantly Invoked Function Expression), which is basically an unnamed function which gets called just when the compiler reaches its end.
Think of it as a simple named function:
function myFunc() {...my code...}
And then it is executed right after the declaration:
myFunc();
Now the IIFE:
(function() {...my code...})();
^--------------------------^^^
Parentheses to enclose the function, the last two are to invoke the function itself
2) is the $ use a variable name like a _ in other languages
Yes it is, but in this case it is a function which simply returns the element with id e(normally it is the jQuery library, a very common one).
3) how does this function keep on looping, in C++ you needed a while or for or recursion what is going on with the function('e').
The function doesn't loop, it executes just once.
EDIT: as #Rup pointed out, you could be referring to why the handler is executed every time the event is triggered. This is possible since the window.addEventListener function adds a handler to an event(in this case deviceOrientation) which will be called every time the event is triggered. For more information please refer to this page, MDN is the best place(IMHO) to get informations about JS.
This is an IIFE. Basically, this function will execute immediately, without being explicitly called. Once you are more comfortable with javascript, I would strongly recommend you to read the link for IIFE (Immediately Invoked Function Expressions)
$ is for jQuery. It is a javascript library for HTML manipulation among other things. In javascript, $ and _ and more non-alphanumeric characters are also quite frequently used to define variables. Generally, $ stands for jQuery (but you can use it for anything else also). Similarly, _ stands for underscore.js.
This function does not "keep on looping". It is a listener. It listens to the DeviceOrientationEvent event and executes only when the device orientation changes.
It seems you are very new to javascript. I'd recommend you get some experience in JS before diving into jQuery
The format you're talking about is called immediately-invoked function expression (IIFE). It is normally used in plugin / libraries definitions to make the declared function part of window/document or extend an existing object such as jquery.
$ is for jQuery, _ is for underscore.js, but it simply depends on what argument you're passing.
the function you're referring to is executed every time the event deviceorientation is fired. This is referred in javascript as a callback or a handler.
1) This is an anonymous function being called and executed inmediately.
(function(argumentList) {
// body
})(provideArguments);
2) $ is a global variable declared by the jQuery library.
3) if you use jQuery, you can directly affect all the results of your query. The library will loop for you. This code, for example, will select all anchor tags and foreach tag will execute the addClass method, putting the class "myClassName" to the results of the "query".
$('a').addClass('myClassName');
(function(...) {...}) ();
It means the code will be executed in the page directly.
$
This is the Jquery selector. cf : http://api.jquery.com/category/selectors/
e
This is an event object. cf : http://api.jquery.com/category/events/event-object/
We use a bit of javascript that overwrites the setTimeout method for IE. This is because in some versions of IE the parameters do not get passed correctly (see here).
I have to load the modified setTimeout script first, because if I load it after the code that calls setTimeout is parsed (not run) then the modifed version does not get called.
What happens when the javascript engine parses files that have method calls to methods at the global scope? Do the mappings to the methods get created at parse time or when the code is executed?
EDIT
I have had a few answers to this question, which give other solutions to this problem, but the problem at hand is not my concern as I already have a solution for it. What I want to gain by this question is a better understanding of how javascript is parsed and run.
Methods are created at when the code is executed.
If the semantics of the code is correct interpreter is able to execute code.
While parsing nothing wasn't be executed.
File after parsing is executed singly one by one , before parsing the next.
Check this out:
We have two js files.
<script src ='1.js'></script>
<script src ='2.js'></script>
In second file we put declaration of setTimeout;
//file2
window.setTimeout = function(){};
In first file we'll checking for setTimeout being overridden
//file1
var f = function() { alert( setTimeout ); };
f();// alerts native setTimeout
setTimeout( f, 1000 ); // We use native settimeout, propably after one second file2 being loaded and executed and function `f` will be alerts the overriden setTimeout
If methods which I added were would be created during parsing. This would have access to it anywhere in the script in which it was created, even before its declaration.
so:
//somefile.js
setTimeout(); // we do not have access to function declared below, so while parsing this wasn't created.
window.setTimeout = function() { alert( 'whatever' ); }
EDIT #2
Fiddle #1 - http://jsfiddle.net/zEaL8/4/ - Allows you to set/reset a native function. To see how the redefinition and calling order works.
Fiddle #2 - http://jsfiddle.net/aKnjA/1/ -Demonstrates that the order of definition does not matter. Notice that the redefinition happens after the browser parses the call to the function.
EDIT
To answer your question: Javascript does not enforce any order of definition of functions. i.e. we can call a function defined afterwards in code. When the browser parses a line of code that calls a function that is defined afterwards, it does not have any clue as to where to find that function. This being the case, it is clear that binding happens only at run-time and not during initial parse. This in effect would mean that your redefinition of setTimeout is what will execute. The only thing to ensure is that the redefinition of setTimeout itself gets executed before any call to that is executed.
To ensure that the redefinition of your new setTimeout is processed first, you can place it in a script block as the first element inside the head node outside load, domReady etc.
i.e. Something like:
<html>
<head>
<script>
window.setTimeout = function() {
alert('new sT');
}
</script>
</head>
<body onload="setTimeout();"></body>
</html>
you can store original setTimeout in a global variable at the beginning of the code and then overload the setTimeot with a new function.
window.oldST = setTimeout;
window.setTimeout = function(funct,x) {
return oldST(funct,x);
}
so if these are the first lines of the js code you will have overloaded the setTimeout function with yours and set the old one in oldST.
(function($, window, undefined){
... jquery code...
})(jQuery, window);
What does it really mean? Does it also mean $(document).ready()? Or just two different things?
There are already two answers but this is my guess on the missing end of the code:
(function ($, window, undefined) {
// ... jquery code...
})(jQuery, window);
Note: three parameters are expected but two are supplied.
What it basically does is:
gives a private scope inside curly braces, so any var declared inside is not visible outside
makes a private $ shortcut to jQuery without relying on this shortcut being set globally (eg. jQuery.noconflict() might have been called and this would still work)
makes a lexical window variable that would mean faster lookups for global variables
makes sure that undefined is indeed undefined in the scope between curly braces, even if someone has written something like undefined = "now it's defined"; in the global scope, because undefined can actually be redefined (this is a mistake of the language).
This pattern is known as immediately invoked function, or immediate function for short, or self-invoking anonymous function, or some other names. The basic idea is that:
(function (x, y) {
// ...
})(1, 2);
or:
(function (x, y) {
// ...
}(1, 2));
means the same as:
function myFunction (x, y) {
// ...
}
myFunction(1, 2);
but without the need to give any name to your function and pollute the namespace.
Going back to your question, this doesn't mean $(document).ready() or anything like that, but it means that you can use $(document).ready() inside instead of jQuery(document).ready() even if the $ shortcut is not available outside.
This example may actually explain it better, even if it isn't used anywhere:
(function (JQ, window, undefined) {
JQ(document).ready(function () {
// this is run when document is ready
});
})(jQuery, window);
Now instead of $ you can call jQuery as JQ and use JQ(document).ready() instead of $(document).ready() – it may not seem very useful but it shows what happens when you have a code like that.
As a side note I might add that thanks to this pattern you don't actually need variable declarations in the language but only function arguments. Instead of:
var x = 10;
alert(x * x * x);
you could use:
(function (x) {
alert(x * x * x);
})(10);
and indeed a function like this:
function square (x) {
// some code ...
var result = x * x;
return result;
}
is exactly equivalent to:
function square (x, result) {
// some code ...
result = x * x;
return result;
}
because of the hoisting mechanism in JavaScript that would make the result variable available (but undefined) even before the declaration and assignment in both cases (in the // some code ... part). This is often a source of confusion but is actually quite interesting and extremely powerful.
See also my other recently updated answer to the question:
Help understanding JavaScript global abatement techniques for more info on this subject.
(function($, window, undefined){
... jquery code...
})();
is different than
$(document).ready()
Paul Irish has a good video on 10 Things I Learned from the jQuery Source at 1:30 in he talks about the jquery source's self executing anonymous function and what the arguments mean
Like that it doesn't mean much at all (in addition a closing ) is missing). What you are probably looking at is something similar to this:
(function($, window){
// code
} )($, window);
This puts the code inside a new scope, so you can for example define variables without messing with the outside scope.
It also allows that you pass different things to the function, without having to change the code. For example if you use different JavaScript frameworks, and $ is not bound to jQuery, you can pass the alternative variable for jQuery instead, while you are still using the $ to refer to jQuery internally. Similar to that you could also pass a different window instance (for example from a popup).
I'm guessing the code actually looks like this:
(function($, window, undefined){
... jquery code...
})(jQuery, window);
Note the parenthesis at the end.
If this is the case, what's going on here is a self-executing anonymous function. The point of doing this is that any local variables or functions defined inside of that anonymous function will not pollute the global namespace.
#rsp has a great answer for this specific question.
For general background on this pattern also see http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth.
In the answers to this question, we read that function f() {} defines the name locally, while [var] f = function() {} defines it globally. That makes perfect sense to me, but there's some strange behavior that's different between the two declarations.
I made an HTML page with the script
onload = function() {
alert("hello");
}
and it worked as expected. When I changed it to
function onload() {
alert("hello");
}
nothing happened. (Firefox still fired the event, but WebKit, Opera, and Internet Explorer didn't, although frankly I've no idea which is correct.)
In both cases (in all browsers), I could verify that both window.onload and onload were set to the function. In both cases, the global object this is set to the window, and I no matter how I write the declaration, the window object is receiving the property just fine.
What's going on here? Why does one declaration work differently from the other? Is this a quirk of the JavaScript language, the DOM, or the interaction between the two?
This two snippets declares a function in the current scope, named "onload". No binding is done.
function onload() { ... }
.
var onload = function() { ... }
This snippet assigns a function to a property/variable/field named "onload" on the current scope:
onload = function() { ... }
The reason why Firefox performed the binding and raised the onload event on the 1st snippet and the others didn't might be because the Firefox chrome (its user interface) itself is written and automated using JavaScript - that's why it's so flexible and easy to write extensions on it. Somehow, when you declared the locally-scoped onload function that way, Firefox "replaced" the window's (most likely the local context at the time) implementation of onload (at that time, an empty function or undefined), when the other browsers correctly "sandboxed" the declaration into another scope (say, global or something).
Many people are correctly pointing out the global / local difference between (UPDATE: Those answers have mostly been removed by their authors now)
var x = function() {
and
function x() {
But that doesn't actually answer your specific question as you aren't actually doing the first one of these.
The difference between the two in your example is:
// Adds a function to the onload event
onload = function() {
alert("hello");
}
Whereas
// Declares a new function called "onload"
function onload() {
alert("hello");
}
Here's what I think is going on, based on Tim Down's helpful comments and a brief discussion with Jonathan Penn:
When the JavaScript interpreter assigns to the window.onload property, it's talking to an object that the browser has given it. The setter that it invokes notices that the property is called onload, and so goes off to the rest of the browser and wires up the appropriate event. All of this is outside the scope of JavaScript — the script just sees that the property has been set.
When you write a declaration function onload() {}, the setter doesn't get called in quite the same way. Since the declaration causes an assignment to happen at parse time, not evaluation time, the script interpreter goes ahead and creates the variable without telling the browser; or else the window object isn't ready to receive events. Whatever it is, the browser doesn't get a chance to see the assignment like it does when you write onload = function() {}, which goes through the normal setter routine.
The simplest explanation:
function aaaaaaa(){
Can be used before it is declarated:
aaaaaaa();
function aaaaaaa(){
}
But this doesn't work:
aaaaaaa();
aaaaaaa=function(){
}
That's because in the third code, you are assigning aaaaaaa to an anonymous function, not declaring it as a function.
var onload = function() {
alert("hello");
}
Will declare it locally too.
I suggest you to read this very helpful article : http://kangax.github.io/nfe/
This generates an error:
foo();
var foo = function(){};
This doesn't:
foo();
function foo(){}
The second syntax is therefore nicer when you're using functions to modularize and organize your code, whereas the first syntax is nicer for the functions-as-data paradigm.