Modularity

A house is a typical modular environment -- the bedroom is distinct from the living room, for example, although both are part of the same house and there is some interaction between the two (wiring, heating ducts, foot traffic). If you want to re-paint the bedroom walls you needn't necessarily re-paint the living room walls. This means that you can make changes to the house piecemeal, and although each change redefines the house as a whole, you need only attend to one module or another at a time.

An exception to this model would be the modern, funky "open concept" house, wherein modularity is reduced for the sake of connecting the various subspaces -- kitchen, living room, and so on. In this house re-painting one room may well necessitate re-painting another since both can be seen simultaneously. As far as program architecture goes, we favor the modular house, the goal being to change the program as a whole by attending to a particular module.

A very clear implementation of modularity is the use of subroutines, sometimes known as procedures, and also known as "functions" in JavaScript lingo. Functions allow you to group together bits of code which work towards a single outcome. You then combine the behavior of these functions to construct the whole. Here is a simple, fictional example of creating a modular program using functions.

function grabEggs()
{ open Fridge;
  remove eggCarton;
}

function grabMilk()
{ open Fridge;
  remove milkCarton;
  check expiryDate;
  if (expired(expiryDate))
   { return "Sorry but the milk has turned! 
   Cannot make breakfast." }
}

function cookOmelet(eggs,milk)
{ crackEggs(2);
  addMilk(.25);
  whisk();
  heatPan(300);
  ...etc...
}

//to prepare breakfast we call each module in turn
someEggs=grabEggs();
someMilk=grabMilk();
cookOmelet(someEggs,someMilk);

This program is modular because if we wanted to, say, add more specificity to which eggs were used (extra large, brown, etc) we need only modify the grabEggs() function without touching the rest of the program. Similarly, if we learned of a new, superior way to cook an omelet, we need only change cookOmelet() without worrying about the other modules.

Since modularity is created through segregation, it only makes sense that embedding code within an HTML document hinders the aim of ideal modularity. If we could, for instance, keep modular code in a separate file from the HTML modularity would be enhanced. And we can ... which we'll see shortly.

Why not embed?
Creating Portable and Modular Client-Side Scripts
Portability