javascript - 当我将两个相同（由 IntelliJ 确认）的 JS 脚本加载到我的 Web 应用程序中时，一个会产生与另一个不同的结果

问题描述

TL;DR：IntelliJ 确认不同的脚本是相同的，但是在浏览器中运行时它们会产生不同的结果（使用 IntelliJ 和 Tomcat）。下面的具体细节。

我正在使用 Spring MVC 创建一个允许我下棋的 Web 项目。我正在使用chess.js库和chessboard.js库。

根据 chess.js 库README，它有一个方法pgn()可以将游戏的移动返回为string. 您可以选择传入 aJSON以设置 max_length 和换行符，以便在黑色移动后有一个换行符。例如game.pgn({ max_width: 5, newline_char: '<br />' }).

这是我的问题。我制作了一个脚本initgame.js，使用库实例化国际象棋游戏，并尝试使用上面的示例，以便将打印出的移动格式化为在每回合后打印一个新行。

它没有像我希望的那样工作。所以我创建了另一个脚本test_game.js来进行实验，当我得到我想要的行为时，我将内容复制并粘贴test_game.js到initgame.js. <script>再次将标记点更改为initgame.js，它再次忽略了换行符。使用 IntelliJ 比较文件，IntelliJ 确认文件确实相同。

现在我简直傻眼了。我尝试重建项目，清理工件，清理 Maven。没有什么。我什至关闭了 IntelliJ 并重新启动。当我使用它运行程序时，test_game.js它可以按需要工作。当我运行它时，initgame.js它会忽略换行符。

作为一个潜在的提示，当我使用 Visual Studio 并将其加载到浏览器中时，这不会发生，.html而不是.jsp任何见解都值得赞赏！下面是输出的代码和屏幕截图，以及 IntelliJ 比较文件的屏幕截图。

initgame.js

// NOTE: this example uses the chess.js library:
// https://github.com/jhlywa/chess.js

var board = null;
const game = new Chess()
var $status = $('#status');
var $fen = $('#fen');
var $pgn = $('#pgn');

function onDragStart (source, piece, position, orientation) {
    // do not pick up pieces if the game is over
    if (game.game_over()) return false;

    // only pick up pieces for the side to move
    if ((game.turn() === 'w' && piece.search(/^b/) !== -1) ||
        (game.turn() === 'b' && piece.search(/^w/) !== -1)) {
        return false
    }
}

function onDrop (source, target) {
    // see if the move is legal
    var move = game.move({
        from: source,
        to: target,
        promotion: 'q' // NOTE: always promote to a queen for example simplicity
    });

    // illegal move
    if (move === null) return 'snapback';

    updateStatus()
}

// update the board position after the piece snap
// for castling, en passant, pawn promotion
function onSnapEnd () {
    board.position(game.fen())
}

function updateStatus () {
    var status = '';

    var moveColor = 'White';
    if (game.turn() === 'b') {
        moveColor = 'Black'
    }

    // checkmate?
    if (game.in_checkmate()) {
        status = 'Game over, ' + moveColor + ' is in checkmate.'
    }

    // draw?
    else if (game.in_draw()) {
        status = 'Game over, drawn position'
    }

    // game still on
    else {
        status = moveColor + ' to move';

        // check?
        if (game.in_check()) {
            status += ', ' + moveColor + ' is in check'
        }
    }

    $status.html(status);
    $fen.html(game.fen());
    $pgn.html(game.pgn({ max_width: 5, newline_char: '<br />' }))
}

var config = {
    draggable: true,
    position: 'start',
    onDragStart: onDragStart,
    onDrop: onDrop,
    onSnapEnd: onSnapEnd
};
board = Chessboard('myBoard', config);

updateStatus();

test_game.js

// NOTE: this example uses the chess.js library:
// https://github.com/jhlywa/chess.js

var board = null;
const game = new Chess()
var $status = $('#status');
var $fen = $('#fen');
var $pgn = $('#pgn');

function onDragStart (source, piece, position, orientation) {
    // do not pick up pieces if the game is over
    if (game.game_over()) return false;

    // only pick up pieces for the side to move
    if ((game.turn() === 'w' && piece.search(/^b/) !== -1) ||
        (game.turn() === 'b' && piece.search(/^w/) !== -1)) {
        return false
    }
}

function onDrop (source, target) {
    // see if the move is legal
    var move = game.move({
        from: source,
        to: target,
        promotion: 'q' // NOTE: always promote to a queen for example simplicity
    });

    // illegal move
    if (move === null) return 'snapback';

    updateStatus()
}

// update the board position after the piece snap
// for castling, en passant, pawn promotion
function onSnapEnd () {
    board.position(game.fen())
}

function updateStatus () {
    var status = '';

    var moveColor = 'White';
    if (game.turn() === 'b') {
        moveColor = 'Black'
    }

    // checkmate?
    if (game.in_checkmate()) {
        status = 'Game over, ' + moveColor + ' is in checkmate.'
    }

    // draw?
    else if (game.in_draw()) {
        status = 'Game over, drawn position'
    }

    // game still on
    else {
        status = moveColor + ' to move';

        // check?
        if (game.in_check()) {
            status += ', ' + moveColor + ' is in check'
        }
    }

    $status.html(status);
    $fen.html(game.fen());
    $pgn.html(game.pgn({ max_width: 5, newline_char: '<br />' }))
}

var config = {
    draggable: true,
    position: 'start',
    onDragStart: onDragStart,
    onDrop: onDrop,
    onSnapEnd: onSnapEnd
};
board = Chessboard('myBoard', config);

updateStatus();

.jsp页

    <!doctype html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/static/javascript/chessboardjs/css/chessboard-1.0.0.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.min.css">

    <title>Hello, world!</title>
</head>


<body>

<main>
    <div class="container">

        <div class="d-flex justify-content-between align-items-center">
            <h1>Hello World</h1>
            <a href="#" class="btn btn-outline-success btn-sm flex-row-reverse">Login</a>
        </div>

        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">
                <i class="fas fa-chess-queen"></i>
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Dropdown
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                    </li>
                </ul>
                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                    <!-- Replace with Spring security Login form -->
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                </form>
            </div>
        </nav>

        <div class="container">
            <div class="row justify-content-center mx-1 my-3">
                <div id="myBoard" class="col-6"></div>

                <div class="card bg-light col-3">
                    <div class="card-header">Header</div>
                    <div class="card-body">
                        <h5 class="card-title">PGN</h5>
                        <p class="card-text">Here are the moves of the game as printed by test_game.js</p>
                        <div class="card-text" id="pgn"></div>
                    </div>
                    <button type="button" class="btn btn-primary m-3">Reset Game</button>
                </div>

            </div>

            <div class="row justify-content-center">
                <label>Status:</label>
                <div id="status"></div>

                <label>FEN:</label>
                <div id="fen"></div>
                <!--
                          <label>PGN:</label>
                          <div id="pgn"></div> -->
            </div>
        </div>

    </div>
</main>

<%-- jquery    --%>
<script
        src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>
<script src="${pageContext.request.contextPath}/static/javascript/chessboardjs/js/chessboard-1.0.0.min.js"></script>
<script src="${pageContext.request.contextPath}/static/javascript/node_modules/chess.js/chess.js"></script>
<script src="${pageContext.request.contextPath}/static/javascript/test_game.js"></script>
</body>
</html>

With initgame.js With test_game.js IntelliJ 比较函数的结果

标签： javascriptspring-mvcjspintellij-ideatomcat9

javascript - 当我将两个相同（由 IntelliJ 确认）的 JS 脚本加载到我的 Web 应用程序中时，一个会产生与另一个不同的结果

问题描述

解决方案

推荐阅读