Javascript Function is not getting called when using modular pattern

Question

I am trying to write my javascript code using modular pattern, but i am facing problem while calling the functions inside and also there are some security problems. I can easily open the console and type in my namespace name . variable and change the variable value.

JS

Below JS Code is working fine, but as i said i can change the gridValue from console. How do i avoid this. i will be using this variable across all my functions.

    var myTicTacToe =  {
        turn:'X',
        score: {
            'X': 0,
            'O': 0
        },
        gridValue: 0,

        fnLoad:function () {
            var select = document.getElementById("grid");
            for (i = 3; i <= 100; i += 1) {
                var option = document.createElement('option');
                select.options[select.options.length] = new Option(i + ' X ' + i, i);
            }
        }
    }

window.onload = function(){
      myTicTacToe.fnLoad();
}

Below one is giving me problem while calling the fnLoad.

var myTicTacToe = function(){
    var turn = 'X',
        score =  {
            'X': 0,
            'O': 0
        },
        gridValue =  0,

    fnLoad = function () {
        var select = document.getElementById("grid");
        for (i = 3; i <= 100; i += 1) {
            var option = document.createElement('option');
            select.options[select.options.length] = new Option(i + ' X ' + i, i);
        }
    }
}

    window.onload = function(){
          myTicTacToe.fnLoad();
    }

1. How can i protect my gridValue or any of the variable in First pattern ?
2. Why i am not able to call fnLoad just like first one ? how do i call it ?
3. Whats the difference between these 2 patterns ?
4. In the first code when i declared any variable using var, it gave me error. Why is it so ?

Answer 1

What you are referring to is the Revealing Module Pattern. Everything is private unless you explicitly return it

var myTicTacToe = (function(){
    var turn = 'X',
        score =  {
            'X': 0,
            'O': 0
        },
        gridValue =  0,

    fnLoad = function () {
        var select = document.getElementById("grid");
        for (i = 3; i <= 100; i += 1) {
            var option = document.createElement('option');
            select.options[select.options.length] = new Option(i + ' X ' + i, i);
        }
    };

    return {
        load: fnLoad //fnLoad is now publicly named "load".
    };
})();

window.onload = function(){
      myTicTacToe.load();
}

/* Or even
window.onload = myTicTacToe.load; //Because it's a single function.
*/

As for your concrete questions:

1. You can't. All object members are public by default with the normal Module Pattern.
2. Because you haven't returned it, see the example above.
3. One allows for private members, and one does not. The revealing pattern allows for privates.
4. I didn't understand which variable we are talking about. But if it's an object member, it should not be declared with a var.

Answer 2

You can use a closure to make gridValue a private variable. Consider this pattern:

var myTicTacToe =  (function(){
        var turn = 'X'.
            score =  {
                'X': 0,
                'O': 0
            },
            gridValue = 0;

        return {
            fnLoad: function () {
                  var select = document.getElementById("grid");
                  for (i = 3; i <= 100; i += 1) {
                      var option = document.createElement('option');
                      select.options[select.options.length] = new Option(i + ' X ' + i, i);
                  }
             }
        };
    })();

window.onload = function(){
      myTicTacToe.fnLoad();
}

Here we use an IIFE to close in the local variables so that only the fnLoad function has access to them. Later the fnLoad function is returned and invoked fill the namespace so it can be public ally accessed by other parts of your program.

This pattern can be extremely useful. Read more here: http://css-tricks.com/how-do-you-structure-javascript-the-module-pattern-edition/

Answer 3

This links is my constant reference when working with javascript. It does an amazing job of explaining the different patterns to use with javascript and I bet will help solve your issue.

http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#designpatternsjavascript

Here is your code refactored to protect your private variables and only allow methods to be public that you declare. I am using the "Revealing Modular Pattern" below.

var myTicTacToe = (function () {

    // PRIVATE AREA
    var turn = 'X';
    var score = {
        'X': 0,
        'O': 0
    };
    var gridValue = 0;

    function fnLoad() {
        var select = document.getElementById("grid");
        for (i = 3; i <= 100; i += 1) {
            var option = document.createElement('option');
            select.options[select.options.length] = new Option(i + ' X ' + i, i);
        }
    }

    // PUBLIC METHODS
    return {
        Load: fnLoad
    }

})();

then call it like

myTicTacToe.Load();

If you need to pass a dependency in such as jQuery or another module you've created then you would create the parameter in the (function(HERE) and then pass it in at the bottom in the last set of parentheses. Here is an example of your code with jQuery.

var myTicTacToe = (function ($) {

    // PRIVATE AREA
    var turn = 'X';
    var score = {
        'X': 0,
        'O': 0
    };
    var gridValue = 0;

    function fnLoad() {
        var select = $('#grid');
        for (i = 3; i <= 100; i += 1) {
            var option = document.createElement('option');
            select.options[select.options.length] = new Option(i + ' X ' + i, i);
        }
    }

    // PUBLIC METHODS
    return {
        Load: fnLoad
    }
})($);