modular javascript
TRANSCRIPT
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/