Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

start javascript code with $(function, etc

I am studying Backbone and the todo example apps from http://todomvc.com/ I have noticed there are 3 severals ways of starting the code in the files:

$(function() {  // code here });  $(function( $ ) {  // code here });  (function() {  // code here }()); 

I do not understand the differences and when I should use one over the other.

I also saw some people using this to start their code:

$(document).ready(function(){   // code here }); 

From what I have seen, this is the full way of writing it right?

In a more general way, should I always include my javascript code into something like that in each files?

Thanks for your advice.

like image 882
Michael Avatar asked Aug 17 '12 15:08

Michael


People also ask

What does $() mean in JavaScript?

The $() function The dollar function, $(), can be used as shorthand for the getElementById function. To refer to an element in the Document Object Model (DOM) of an HTML page, the usual function identifying an element is: document.

How do I execute a JavaScript function?

Use the keyword function followed by the name of the function. After the function name, open and close parentheses. After parenthesis, open and close curly braces. Within curly braces, write your lines of code.

What is difference between $( document .ready function () vs $( function ()?

So technically they are both the same. Not major difference between these two declaration. They used based on weather you use JavaScript then you should use $(document). ready declaration in other case you use jQuery library which is a part of JavaScript then you should use $(function) declaration.


2 Answers

  1. $(document).ready(function(){}) ensures that your code runs on DOM ready, so that you have access to the DOM. You can read more about this in jQuery's documentation.

  2. $(function(){}) is just an alias to #1. Any code in here will wait for DOM ready (see the docs).

  3. $(function($){}) is equivalent to #1 and #2, only you get a clean reference to jQuery in the local scope (see the note below). You can likewise pass in $ to the function in #1, and it'll do the same thing (create a local reference to jQuery).

  4. (function(){}()) is just a self-executing-anonymous-function, used to create a new closure.

Please note that none of these are specific to Backbone. The first 3 are specific to jQuery, while #4 is just vanilla JavaScript.


Note: To understand what's going on in #3 above, remember that $ is an alias to jQuery. However, jQuery is not the only library that uses the $ variable. Since the $ might be overwritten by someone else, you want to ensure that within your scope, $ will always reference jQuery - hence the $ argument.


In the end, it basically boils down to the following 2 options:

  1. If your JavaScript is loaded in the head, you have to wait for document ready, so use this:

    jQuery(function($) {     // Your code goes here.     // Use the $ in peace... }); 
  2. If you load your JavaScript at the bottom of your document (before the closing body tag - which you should definitely be doing), then there's no need to wait for document ready (since the DOM is already constructed by the time the parser gets to your script), and a SEAF (A.K.A. IIFE) will suffice:

    (function($) {     // Use the $ in peace... }(jQuery)); 

P.S. For a good understanding of Closures and Scope, see JS101: A Brief Lesson on Scope.

like image 64
13 revs Avatar answered Sep 18 '22 03:09

13 revs


I guess it makes sense to start out, by realizing that $ = jQuery. The purpose of which down below when reading about namespaces within anonymous functions will make more sense. But in essence, you can use either of them. One would use jQuery() instead of $() if they were using multiple libraries, and wanted the $ to be used by the other one.

$(document).ready(function(){     // Here we have jQuery(document) firing off the ready event     // which executes once the DOM has been created in      // order to ensure that elements you are trying to manipulate exist. });  ​$(function () {     // Short-hand version of $(document).ready(function () { }); }); 

More information on Document.ready()

Putting the $ within the parenthesis ensures the jQuery $ alias (you can be safe it always signifies jQuery this way).

$(function ($) { /* code here : $ always means jQuery now */ });  

Lastly you have an IIFE (Immidiately-Invoked Function Expression) - IIFE explanation

(function (myNameSpace, $) {     // This is an anonymous function - it is ran instantly     // Usually used for namespaces / etc     // This creates a scope/wrapper/closure around everything inside of it }(window.myNameSpace, jQuery)); 

The $ at the top (with it's matching jQuery on the bottom) signify that the $ (dollar sign) stands for jQuery within the scope of the namepsace. This is done to ensure that other libraries do not collide with what the developer intends/wants the $ to be used with.

(function (myNameSpace, $) {     // Now because of all of this scope/wrapper/closure awesome...     // you can create -INTERNAL- variables (sort of like Private variables from other langs)      // this variable cannot be accessed outside the namespace unless it is returned / exposed      var internalVariable = '123'; // Internal      // Even Internal functions!     function privateFunction () {         console.log('this is private!');     }      // --------------------------------------------------------     // Public -method- of nameSpace exposing a private variable     // Notice we're using the myNameSpace object we exposed at the top/bottom      myNameSpace.nameSpaceMethod = function () {         privateFunction(); // we can call the private function only inside of the namespace         return internalVariable; // now we could get this variable     }; }(window.myNameSpace, jQuery)); // notice these mirror the above arguments in the anon function 

More information on anonymous functions

Now if we're outside of the namespace, we can see how these internal/public methods and variables are effected:

// This will come up undefined alert(internalVariable);  // This will trigger a -method- of the myNameSpace namespace - and alert "123" // Showcasing how we access a Public method - which itself has access to the internal variable // and exposes it to us! alert(myNameSpace.nameSpaceMethod()); ​ 
like image 38
Mark Pieszak - Trilon.io Avatar answered Sep 19 '22 03:09

Mark Pieszak - Trilon.io