D4mations.com

Modular Javascript #3 – Revealing Module Pattern Javascript Tutorial



The revealing module pattern allows us to create private variables in a Javascript Module.
Here’s a writeup on this pattern:
http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript
Here’s the code for this video:

Here’s video 1 in case you missed it:

We write a revealing module pattern by starting with a self-executing anonymous function also known as an IIFE (immediately invoked function expression).

This runs a function and sets it’s return value as our module’s value. If we return an object of methods, then those methods are what other modules have “public” access to. What’s nice about this, is we can create any variables within the function and no other modules have access to them unless we expose them via our return object.

Modular JS #1 – Object Literal Pattern pt 1:

Modular JS #2 – Object Literal Pattern pt 2:

Modular JS #3 – Revealing Module Pattern:


Original source

d4mer

, , , , , , ,

49 responses to “Modular Javascript #3 – Revealing Module Pattern Javascript Tutorial”

  3. Hi Will, I just got confused between this video and the previous one. Why did you remove all the function you wrote in the previous video and replaced them with comments or different looking methods. ex. init, casheDOM, binding?
    Is there a use case where this way is more suitable and the other is not?

  10. I am still waiting for my a-moment. Would there be any difference between

    var people = function() {
    //actions…
    }
    people();

    and what your wrote in your video

    var people = (function() {
    //actions…
    })()

  16. When you refered to a "self executing anonymous function" I think you should refer to it as a immediately invoked function expression or IIFE , the key to understanding it is to understand the difference between a function statement and a expression, what the () do is convert the function statement into a function expression.

  19. Hi…you have amazing videos…. thanks! just wanted to ask a newbie question…. I tried using your "REVEAL PATTERN" and used some DOM CACHING…. then ran it through webpack (again using one of your excellent videos)… but for some reason I can't CACHE the DOM anymore…..if I manually use a jquery search within the new scripts.min.js produced by webpack…. it works but the dom cache $el is an empty value….thanks again!

  20. Your delete person function makes no sense. first off, you rerender the entire module instead of just removing the "$remove". Also, i = event does not return a number. if the event is not a number, it returns a -1. I'm not sure what your function is doing

  23. hey Will ! you are awesome ! so are your lessons
    for this one, i still have to catch up on (splice.delegate) felt a bit sad not fully understandin you in this video,

    but to make the day worth it , i did Add a Keypress event on input, made it work !!! (thanks to your other vide ofc )
    this kinda compensate not understandin this at 100%.. but soon ; i WILL

    you are a great mentor !!

    p.s: (bad english is good english )

  24. I have a question, why the line 13 works after calling addPerson? addPerson adds an item to the array and calls render, which rewrites the ul inner html, but the binding is happening when the self executing function executes, and that happen once, right?

  25. you should not query dom in the function body put them in function, call that function in init, right now it is executed when the script is read by the browser and you query the dom even if you are not using this particular module on a given page, leads to performance issues same goes with event handlers.

  28. Great Tutorials, btw I have an issue. Do I need to install any libraries to use 'mustache.render'. I checked this on every browser and 'mustache.render' does not recognize by browsers. Can you help me?

  29. Great Video~ I'm new to JavaScript, this video helped a lot, thanks.

    But about why the immediately-invoked function expression (IIFE) need to be wrapped in parentheses and why 1.toString() doesn't work around 2:10 https://youtu.be/pOfwp6VlnlM?t=2m10s, I think it might be because of different reason.

    I think the reason the IIFE need to be wrapped in parentheses is to make it a function expression, rather than a function statement.

    function () {alert();}() // 1 Uncaught SyntaxError: Unexpected token (

    Line 1 doesn't work not because the function is not evaluated before called, it's not a semantic error, it's a SyntaxError.

    A line starting with "function" is function statement. In line 1, the function was defined as a function statement, the statement ends with '}', JavaScript doesn't expect any characters after that. So it is a SyntaxError with Unexpected token '('.

    (function () { alert(); }) () // 2 works

    While line 2 works, as it it starts with '(' not 'function', so it's not a function statement, it's a function expression. As an expression, it can be used in another expression, so it is just invoked by the subsequent '()', there is no SyntaxError.

    (function () { alert(); } ()) // 3 works too

    For the same reason, line 3 works too, the function isn't defined in parentheses, but still can be invoked right away, as it is a function expression.

    var a = function () { alert(); } () // 4 works too

    Line 4 also works, assignment also force it to function expression.

    1.toString() // 5 Uncaught SyntaxError: Invalid or unexpected token

    Reason why 1.toString() doesn't work is also a SyntaxError, I quote from http://stackoverflow.com/questions/12701609/1-tostring-syntaxerror-in-javascript:

    '''
    The parser is trying to treat 1. as the start of a floating-point literal — only toString turns it into an invalid number.

    Compare with:

    1.0.toString()
    '''

    Sorry, too long.

  33. Awesome video. Been working with javascript a lot (only smaller scripts). But lately my projects are growing a lot. Knew about this pattern, just never really sat down learning it. Nice quick introduction.

  34. For me, MustacheJS won't run unless I include it inside a document ready function, and I can't define an API when I put it inside document ready.

    EDIT- got around this by scoping properly – globals

    var people;
    $(document).ready(function(){
    people = (function(){ ..api stuff… })
    });

  40. Hey Will, just watching these over again!! lol Question, are there any benefits to using Object Literal modules instead of a revealing module? Is this the new accepted pattern that we should use and the object literal is the old way things used to be done? Or do they both still have their place?

  43. I stopped watching. The code is quite sloppy and your explanation of 1.toString() is just wrong. The reason it fails is not because it's a number, the reason it fails is that "1." is ambiguous to the engine: the dot can indicate a float or a property accessor. It will work fine if you type 1..toString()

  45. Just wanted to thank you for putting these videos together. I had been "taught" how to program with the "crap" you described in your first video and it was always annoying and hard to deal with. Going over these patterns is very refreshing so thank you for taking the time to put together the examples and resources.

Leave a Reply