使用模块化模式时未调用Javascript函数

我试图使用模块化模式编写javascript代码，但在调用内部函数时遇到了问题，而且还存在一些安全问题。我可以轻松打开控制台并键入我的命名空间名称。变量并更改变量值

JS

下面的JS代码运行良好，但正如我所说，我可以从控制台更改gridValue。我如何避免这种情况。我将在所有函数中使用此变量

    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();
}

var myTicTacToe={
转弯：'X'，
分数：{
“X”：0，
“O”：0
},
gridValue:0，
fnLoad：函数（）{
var select=document.getElementById（“网格”）；
对于（i＝3；i），可以使用闭包使GrdValuy成为私有变量。
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();
}

var myTicTacToe=（函数（）{
var turn='X'。
分数={
“X”：0，
“O”：0
},
gridValue=0；
返回{
fnLoad：函数（）{
var select=document.getElementById（“网格”）；
对于（i=3；i您所指的是。除非您明确返回它，否则一切都是私有的

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.
*/

var myTicTacToe=（函数（）{
var turn='X'，
分数={
“X”：0，
“O”：0
},
gridValue=0，
fnLoad=函数（）{
var select=document.getElementById（“网格”）；
对于（i=3；i这个链接是我在使用javascript时经常引用的。它在解释javascript使用的不同模式方面做得非常出色，我打赌它将帮助解决您的问题


这里是您的代码重构，以保护您的私有变量，并且只允许您声明的方法是公共的

如果需要传递依赖项，如jQuery或已创建的其他模块，则需要在（函数）中创建参数（此处），然后在最后一组括号的底部传递该参数。以下是使用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
    }
})($);

var myTicTacToe=（函数（$）{
//私人区域
var turn='X'；
风险值得分={
“X”：0，
“O”：0
};
var-gridValue=0；
函数fnLoad（）{
变量选择=$（“#网格”）；
对于（i=3；我可能是@DoXicK的复制品第三个和第四个问题的答案如何？3是关于模块模式的许多在线文章中的答案。4我不知道，因为你没有一个例子。你在这里使用匿名块仪式吗？这会在window.onload之前调用吗？@SharathBangera，因为IIFE被分配给myTicTacToe，内部代码将在window.onLoad（）之前执行并且fnLoad的返回值可以被访问。那么第一个模式和第二个模式之间有什么区别呢？还有一个问题是myTicTacToe现在是一个匿名块，一旦JS被加载就会被调用。它会不会产生问题cos document.getElementById（“网格”）我不认为DOM以前被加载过。+1因为思维相似，链接了那篇伟大的文章。你忘了执行你的生活。你错过了（）编辑：aadd您刚刚修复了吗it@SharathBangera基本上，第一个是一个简单的对象，第二个是一个自调用函数，其结果是一个对象。第二个允许您定义功能而不显示它。至于是否执行它，则不会执行
fnLoad
函数直到使用
myTicTacToe.load（）
调用它，才会查询DOM。这样您就可以安全地使用它了。@SharathBangera您不必为自己是初学者而道歉。
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
    }

})();

myTicTacToe.Load();

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
    }
})($);