Question

尝试使用ES6，但我遇到了麻烦。为简单起见，存在两个问题：

JS源代码未在用module="type" HTMLelements调用的脚本中执行
直接从index.html导入将返回SyntaxError: fields are not currently supported

尝试并挖掘这两种情况，都无法发现错误所在。道路是正确的。没有将.js扩展名放在from语句中，则直接在index.html中使用import的第二次尝试返回了错误。以前的initGame()是$(document).ready(function(e) { ... });。如果我未将type="module"中的index.html分隔开，还会返回一个错误。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <meta http-equiv="Content-Language" content="en">

  <title></title>

  <link rel="stylesheet" href="design/css/main.css">
</head>
<body>
  <main id="displayer">
  </main>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="module">
  import { initGame } from "./lib/js/core.js";
  initGame();
</script>
<script type="application/javascript, module" src="./lib/js/core.js"></script>
</html>

//core.js
import { Board } from './classes/Board.js';
import { Pawn } from './classes/Pawn.js';

export function initGame () {
  console.log("plop");
  var $displayer = $('#displayer');
  var board = new Board($displayer, 32, 19, 19, ['#ffffcc', '#333333']);
  console.debug(board);
}

//Board.js
import { TileMap } from "./TileMap.js"

export class Board extends TileMap
{
    _tileColors;

    constructor(wrapper, tileSize, columnsNb, rowsNb, tileColors) {
        super(wrapper, tileSize, columnsNb, rowsNb);

        this._name = "Board:" + columnsNb + ":" + rowsNb;

        this.selector.css({
            class: "board"
        })

        tileColors.forEach(function(color, i) {
            this._tileColors[i] = color;
        });
        this.colorize();
    }

    colorize() {
        this._grid.forEach(function(col, i) {
            col.forEach( function(tile, j) {
                tile.color = ((i + j) % 2 === 0) ? this.getColor(0) : this.getColor(1);
            });
        });
    }

    getColor(index) {
        return this._tileColors[index];
    }
}

只是为了方便和自学而希望使用ES6的模块化系统。

错误：

如果未指定type="module" src="path"：
- SyntaxError: import declarations may only appear at top level of a module
空控制台，如果<script type="module">仅$(document).ready()和core.js变体
如果此版本处于活动状态：
- SyntaxError: fields are not currently supported

Answer 1

您用来声明_tileColors的语法称为field declaration，这是一个高度实验性的建议。它们仅在Chrome 72及更高版本中实现，并且如果您为它们启用了实验性标记，则似乎在某些Firefox版本中已部分实现。

您需要从类中删除行_titleColors;，并在构造函数中设置this._titleColors。此外，构造函数的代码已损坏，正在尝试设置_titleColors的内容，但该变量甚至没有初始化。相反，您可以这样做（假设titleColors是一个数组）：

// create an array copy of titleColors
this._tileColors = [...titleColors];

在Javascript模块类型的脚本源[ES6]中未执行代码

1 个答案: