I am trying to understand what function (global) means in code below, and is 'window' the parameter value passed to the function or its the name of a parameter rather than the parameter value?

May be this is simple JavaScript using an unmon style of coding.

(function (global) {
var mobileSkin = "",
    app = global.app = global.app || {};
    app.application = new kendo.mobile.Application(document.body, 
                      { layout: "tabstrip-layout", skin:"flat"});
})(window);

I am trying to understand what function (global) means in code below, and is 'window' the parameter value passed to the function or its the name of a parameter rather than the parameter value?

May be this is simple JavaScript using an unmon style of coding.

(function (global) {
var mobileSkin = "",
    app = global.app = global.app || {};
    app.application = new kendo.mobile.Application(document.body, 
                      { layout: "tabstrip-layout", skin:"flat"});
})(window);

• javascript
• kendo-ui

Share Follow asked Mar 2, 2014 at 2:18 SunilSunil 21.4k2929 gold badges123123 silver badges204204 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

There are mon JavaScript patterns in this code:

• The namespace pattern.
• The immediate function pattern.

The Namespace Pattern

In a browser, the window object is the global scope object. In this example of code that you shared, the programmer created a immediately-invoked function expression (IIFE) and passes the global object window as a parameter, which in the context of the IIFE is bound to the local variable global.

The function, as its names suggests, is immediately invoked when this file is parsed by the browser.

From this point on, global is just an alias for the global scope object window, and the programmer uses it to define a namespace app in it.

The namespace basically avoids cluttering the global scope with the objects you need to define and allows the programmer to be more in control of exactly what is defined within his custom scope.

The idea is that from this point forward, you should define all application globals within this customized scope and not within the window global scope, avoiding name collisions with other third-party libraries that you are using. This will be a pseudo-equivalent of packages or namespaces in other languages like Java or C#.

Stoyan Stefanov in his book JavaScript Patterns explains it as follows:

Namespaces help reduce the number of globals required by our programs and at the same time also help avoid naming collisions or excessive name prefixing.

JavaScript doesn’t have namespaces built into the language syntax, but this is a feature that is quite easy to achieve. Instead of polluting the global scope with a lot of functions, objects, and other variables, you can create one (and ideally only one) global object for your application or library. Then you can add all the functionality to that object.

The Immediately-Invoked Function Pattern

The immediately-invoked function is another mon JavaScript pattern. It is simply a function that is executed right after it is defined.

Stefanov describes its importance as follows:

This pattern is useful because it provides a scope sandbox for your initialization code. Think about the following mon scenario: Your code has to perform some setup tasks when the page loads, such as attaching event handlers, creating objects, and so on. All this work needs to be done only once, so there’s no reason to create a reusable named function. But the code also requires some temporary variables, which you won’t need after the initialization phase is plete. It would be a bad idea to create all those variables as globals. That’s why you need an immediate function—to wrap all your code in its local scope and not leak any variables in the global scope:

(function () {
   var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
   today = new Date(),
   msg = 'Today is ' + days[today.getDay()] + ', ' + today.getDate();
   alert(msg);
}()); // "Today is Fri, 13"

If this code weren’t wrapped in an immediate function, then the variables days, today, and msg would all be global variables, leftovers from the initialization code.