D4mations.com

Modular Javascript – Javascript Tutorial on the Object Literal Pattern



This javascript tutorial covers the javascript object literal pattern for web developers. We’ll cover how to build a basic module in javascript.

The object literal pattern is also shown in this great e-book by Addy Osmani: http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript

The simplest pattern for modular javascript is the object literal pattern – it adds all values and methods on a single object, thus encapsulating all of the module’s function into one object. The downside of this pattern, is it leaves all of the module’s data accessible.

Modular JS #2 – Object Literal Pattern pt 2:

Modular JS #3 – Revealing Module Pattern:


Original source

d4mer

, , , , , , , , , , ,

41 responses to “Modular Javascript – Javascript Tutorial on the Object Literal Pattern”

  14. Just keep in mind that for some use cases this would actually be an anti pattern. This is not a reusable component. You cannot instantiate a new one with a new name and age for example.

  18. I wanted to learn how to code those "objects with functions thingies" that I saw in a lot of well written code but didn't know how it was called so I was stuck, and I found this vid (already a subscriber but I still have a LOT of vids to watch !). Now I know how it's called and I can finally get rid of those spaghettis that litter my code and step up my game.

  20. Thank you so much for your tutorials! I struggled to learn this pattern at first being that I am quite new to programming but after watching a few times my code is looking super sexy in my projects!

  28. Fantastic video series! Its helped me learn so much more about JS that I've always wanted to know about, but had no idea where to start.

    I have a question about the 5:15 point of the video regarding no memory leaks. I'm up to video #4 – PubSub, but I do not recall the no memory leaks ground rule being addressed/further explained. Have I just missed it, or will it be addressed in a later video?

  33. Would love to get the source code for this tutorial. And a tutorial on how to turn the "spaghetti" code from your previous jQuery tutorials into modules. For example the image-slider or tabbed panel, maybe an image slider inside the tabbed panels all using modules. In those tutorial you talk about caching the DOM and with modules i dont see how i do that.

  37. How far should I go with this idea? I have a To Do List app that's about 400 lines of JS. Right now it's separated into about thirteen functions and ten global variables. Would it be wise to put all of this code into one module?

Leave a Reply