Question

我正在尝试在另一个HTML文件中实例化一个JavaScript类。

这是JavaScript类：

class Puzzle {
  constructor(fenStart, pgnEnd) {
    this.fenStart = fenStart;
    this.pgnEnd = pgnEnd;
  }
}

module.exports = Puzzle;

这是HTML文件：

<!DOCTYPE html>
<html>
    <body>
        <script src="jquery-3.2.1.min.js"></script>
        <script src="class.js"></script>
        <p id="demo"></p>

        <script>
            var demoEL = $('#demo');

            const x = new Puzzle("fenStart", "pgnEnd");

            demoEL.html(x.fenStart);
        </script> 
    </body>
</html>

然而，当我在Chrome中打开HTML文件时，页面上没有任何内容。在开发人员控制台中，我收到错误“未捕获的ReferenceError：模块未定义，在class.js：8”如何在此HTML文件中正确实例化益智类？

PS：我读到可能需要JQuery，所以我下载了“jquery-3.2.1.min.js”并将其包含在与JavaScript类和HTML文件相同的文件夹中。

Answer 1

在这种情况下，您不需要module.exports 您可以直接创建对象并更新DOM。如果你想在浏览器中使用模块，你可以使用像webpack这样的模块捆绑器

Answer 2

没有必要说module.exports = Puzzle; 这就是我所做的，它运作良好。

JS

class Puzzle {
 constructor(fenStart, pgnEnd) {
this.fenStart = fenStart;
this.pgnEnd = pgnEnd;
 }}

HTML

<!DOCTYPE html>
 <html>
  <body>
     <script src="jquery.min.js"></script>
     <script src="class.js"></script>
     <p id="demo"></p>

     <script>
        var demoEL = $('#demo');

        const x = new Puzzle("fenStart", "pgnEnd");

        console.log(x.fenStart);
        console.log(x.pgnEnd);
    </script> 
    </body>
   </html>

因为我们在这个主题上我强烈建议使用伪古典模式如果您计划为您的班级添加一项功能，这种模式将使您的生活更轻松

只是为了澄清这是你班级的一个例子：

pseudoclassical patern - HTML：

<!DOCTYPE html>
  <html>
  <body>
    <script src="jquery.min.js"></script>
    <script src="class.js"></script>
    <p id="demo"></p>

    <script>
        var demoEL = $('#demo');

        const x = new Puzzle("fenStart", "pgnEnd");

        console.log(x.fenStart);
        console.log(x.pgnEnd);
        var bla = x.bla();
        console.log(bla);
    </script> 
</body>

伪经典模式 - JS：

var Puzzle = function(fenStart,pgnEnd){
this.fenStart = fenStart;
this.pgnEnd = pgnEnd;
}


Puzzle.prototype.bla = function(){ // some other function
return "bla";
}

就是这样，有一个很好的编码。

试图在html文件中实例化JavaScript类

2 个答案: