Modular javascript

Topics Javascript Basics Modularization Dependency Management Bundling

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”; } );

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

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

 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

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/

Modular javascript

More Related Content

What's hot

Viewers also liked

Similar to Modular javascript

Recently uploaded

Modular javascript