Javascript

Topics

Javascript Basics Modularization Dependency Management Bundling

JavaScript Basics

Topics

Variables & Data types

Object Literals

Functions Declarations Functions as arguments Anonymous functions

Variables & Data types

In javascript, variables can hold any type of data.

Variable types keep on changing as we assign new data to them.

Code Examples:

var hello = “world”;

hello = 23;

hello = function(){ return “world” }

Object Literals

An object literal is a comma separated list of name value pairs wrapped in curly braces.

In JavaScript an object literal is defined as follows: var person = {

name: 'James',

age: 28,

isAlive: true

};

Objects can have arrays, objects and functions as their properties

var person = {

name: 'James',

age: 28,

isAlive: true,

childObject: {

property1: ‘hello world’,

property2: 4938,

property3: false

},

favoriteColors: [“Blue”, “Yellow”, “Magenta”],

getAge: function(){

return this.age;

}

};

Function Declarations

function isNimble() { return true; } var canFly = function () { return true; }; window.isDeadly = function () { return true; };

Differences: isNumble is defined at parse-time, whereas canFly and isDeadly is

defined at runtime.

canFly and isDeadly are merely two variables which have anonymous functions assigned to them whereas isNumble is a named function.

Functions as Arguments

function greet( getMessage ) {

var message = “Good “ + getMessage();

alert( message );

}

function eveningGreet () {

return “evening”;

}

greet( eveningGreet );

Anonymous Functions

function greet( getMessage ) {

var message = “Good “ + getMessage();

alert( message );

}

greet( function () {

return “evening”;

} );

Modularization

What & Why?

A module is an independent unit of functionality that is part of the total structure of a web application

it’s very important to have all the code well-organized

Maintaining a spaghetti-coded application will only cause you headaches and nightmares

Modularization makes your code easier to manage

Benefits

Small pieces of code are separately stored in modules

Easier maintenance

Avoid global namespace problems.

Encapsulation - Expose only selected functions or properties by wrapping all your code inside a module

Module Rules Modules are like little kids, they need a strict set of rules so they don’t get into trouble.

Hands to yourself

Only call your own methods or those available in application core.

Don’t access DOM elements outside of your box

Don’t access non-native global objects

Don’t leave your toys around

Don’t create global objects

Don’t talk to strangers

Don’t directly reference other modules

LoadRunner

A small javascript dependency manager.

Modules are loaded asynchronously.

Defining a module:

provide(‘module_name’, function( exporter ){

function say ( text ) {

alert ( text ) ;

}

exporter( say );

});

Using a module:

using(‘module_name’, function( speak ){

speak( ‘ hello world ‘);

});

Code Examples

Example1.html - Global functions

Example2.html - Modularized functions – single module

Example3.html - Modularized functions – multiple modules at once

Dependency Management

Single module dependency

using(‘module_say’, function( speak ){

speak( ‘ hello world ‘);

});

Multiple module dependency

using(‘module_say’, ‘module_greet’,

function( speak , greet){

speak(‘ hello world ’); // say hello to world

greet(‘Mr. Zain’); // greet Mr. Zain

});

Automatic dependency loading

Loading external files automatically when required.

Code Examples Example4.html - Modularization - loading external modules

Example5.html - Modularization - loading external modules on click event

AMD – Asynchronous Module Definition

Non-blocking

Parallel loading

Fast

Improved maintainability

Well-defined / standardized

How AMD works?

Core methods to implement an AMD Module require – used to get reference to an already loaded module.

define – used to define a module.

define method: require, exports, module parameters

debug module()define(‘ debug‘ ,

[ ‘module’, ‘require’, ‘exports’ ] ,

function (module , require, exports) {

function debug( data ) {

console.log( data );

}

module.exports = debug;

}

);

define()define(‘ module_1 ‘ ,

[ ‘module’, ‘require’, ‘exports’, ‘depA’, ‘depB’ ] ,

function (module , require, exports, depA , depB) {

var myModule = {};

myModule.play = depA.play;

myModule.player = depB.player;

module.exports = myModule;

}

);

Lets see code examples

Example6.html - Modularization – define a module AMD way

Example7.html - Modularization – loading external AMD modules

Example8.html - Modularization – loading external modules which are dependent on other modules.

Example9.html - Modularization – loading external modules on click event

Bundling

Used to merge multiple modules in one single file to reduce number of http requests.

Code Examples

Example10.html – loading bundles instead of separate modules

Questions?

References

Function definition

http://stackoverflow.com/questions/336859/javascript-var-functionname-function-vs-function-functionname

Modularization

https://github.com/danwrong/loadrunner

https://tutsplus.com/tutorial/writing-modular-javascript/