Mrs Potts the school dinner lady is tired of all the global sandwich variables getting under her feet and tripping her up all the time. She needs help cleaning her kitchen. Will you help her?
She would like it very much if you would build a sandwich machine for her, but wrap it in a closure so as to keep everything neat.
like this:
(function () {})();This will be our closure and will hold the sandwich machine, keeping all it’s parts nicely together.
Within the closure, create three little functions to add the bread, spread the soya margarine and add the jam. These little methods should use jQuery to write a string representing their action to the DOM, e.g. “Now spreading the jam!”
Assign these functions to private variables, we don’t want any of the children breaking in to the closure and spreading jam all over the place.
Now, also within the closure create a makeSandwich function which calls the three other methods in sequence, writing the sandwich instructions to the DOM.
We want Mrs Potts to be able to call makeSandwich, so we need to make a global variable which she can access from the kitchen, the news agent, a flight to Barbados, anywhere.
Assign makeSandwich to the global window object, thus smuggling it out of the closure. Refer back to the example if you need to remember how to do this.
You can now call makeSandwich from outside the closure. Because you’ve used onDomReady, you’ll need to call it onDomReady.
If you’ve succeeded well done! This is super close to #{Time.now.year} best practice JavaScript!
If you’d like to take this a little further, you could make it receive an array of fillings, then output them in the sandwich.