JavaScript中的全局命名空间_Javascript

JavaScript中的全局命名空间

javascript

JavaScript中的全局命名空间,javascript,Javascript,我用纯JavaScript创建了一个Tic-Tac-Toe游戏如何将整个函数放在全局命名空间中当我尝试时，它给了我一个错误。我以前从未尝试过使用全局名称空间。我想学习更多的javascript，所以我正在努力使我的代码更好 HTML <html> <head> <script type="text/javascript" src="ticTac.js"></script> </head> <body onloa

我用纯JavaScript创建了一个Tic-Tac-Toe游戏

如何将整个函数放在全局命名空间中

当我尝试时，它给了我一个错误。我以前从未尝试过使用全局名称空间。我想学习更多的javascript，所以我正在努力使我的代码更好

HTML

<html>
<head>
<script type="text/javascript" src="ticTac.js"></script>       
</head>
<body onload="fnLoad()">
    ...
    <button name="NewGame" class="newGame" value="Start a New Game" onClick="fnNewGame()">Start a New Game</button>
    ...
</body>
</html>


...
开始新游戏
...

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

    addEvent(document.getElementById("game"), "click", fnChoose);

    fnNewGame();
}

function addEvent(element, eventName, callback) {

    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + eventName, callback);
    }
}

function fnChoose(e) {
    if (e.target && e.target.nodeName == "TD") {
        var targetElement = document.getElementById(e.target.id);
        var prevTurn;
        if ((targetElement.className).indexOf("disabled") == -1) {
            targetElement.innerHTML = turn;
            targetElement.classList.add('disabled');
            targetElement.classList.add(turn);
            score[turn] += 1;
            prevTurn = turn;
            turn = turn === "X" ? "O" : "X";
            if (fndecide(targetElement, prevTurn)) {
                alert(prevTurn + ' has won the game');
                fnNewGame();
            } else if ((score['X'] + score['O']) == (gridValue * gridValue)) {
                alert('Draw!');
                fnNewGame();
            }
        }
    }
}

function fndecide(targetElement, prevTurn) {
    var UL = document.getElementById('game');
    var elements, i, j, cnt;
    if (score[prevTurn] >= gridValue) {
        var classes = targetElement.className.split(/\s+/);
        for (i = 0; i < classes.length; i += 1) {
            cnt = 0;
            if (classes[i].indexOf('row') !== -1 || classes[i].indexOf('col') !== -1 || classes[i].indexOf('dia') !== -1) {
                elements = UL.getElementsByClassName(classes[i]);
                for (j = 0; j < elements.length; j += 1) {
                    if (elements[j].innerHTML == prevTurn) {
                        cnt += 1;
                    }
                }
                if (cnt == gridValue) {
                    return true;
                }
            }
        }
    }
    return false;
}

function fnNewGame() {
    var gameUL = document.getElementById("game");
    if (gameUL.innerHTML !== '') {
        gameUL.innerHTML = null;
        score = {
            'X': 0,
            'O': 0
        };
        turn = 'X';
        gridValue = 0;
    }
    var select = document.getElementById("grid");
    gridValue = select.options[select.selectedIndex].value;
    var i, j, li, k = 0,
        classLists;
    var gridAdd = +gridValue + 1;

    for (i = 1; i <= gridValue; i += 1) {
        tr = document.createElement('tr');
        for (j = 1; j <= gridValue; j += 1) {
            k += 1;
            li = document.createElement('td');
            li.setAttribute("id", 'li' + k);

            classLists = 'td row' + i + ' col' + j;

            if (i === j) {
                classLists = 'td row' + i + ' col' + j + ' dia0';
            }

            if ((i + j) === gridAdd) {
                classLists = 'td row' + i + ' col' + j + ' dia1';
            }

            if (!isEven(gridValue) && (Math.round(gridValue / 2) === i && Math.round(gridValue / 2) === j))
                classLists = 'td row' + i + ' col' + j + ' dia0 dia1';

            li.className = classLists;
            tr.appendChild(li);

        }
        gameUL.appendChild(tr);
    }
}

function isEven(value) {
    if (value % 2 == 0)
        return true;
    else
        return false;
}

var turn='X'；
风险值得分={
“X”：0，
“O”：0
};
var-gridValue=0；
函数fnLoad（）{
var select=document.getElementById（“网格”）；
对于（i=3；i=gridValue）{
var classes=targetElement.className.split（/\s+/）；
对于（i=0；i对于（i=1；i我不确定这是否正是您所要求的，但是在js中构造代码的一种流行方法是使用。要使您的代码脱离全局环境，请使用创建一个闭包。因此，您的代码可能如下所示：
(function(){

  var ticTacToe = {
    load: function() { ... },
    addEvent: function() { ... }
    // and so on
  };

  // get DOM element and init app,  
  // but remember do that when the DOM is loaded

}());

试试这个：
var gloabalFunc= function () {
        //onload function
        $('body').on(function () {
            fnLoad();
        });

希望这有帮助…
它们已经在全局命名空间（即浏览器环境中的窗口）上。污染全局命名空间是不好的。您可以查看以公开相关api。