尝试在 html 文件中实例化 JavaScript 类答案

【问题标题】：Trying to instantiate JavaScript class in a html file尝试在 html 文件中实例化 JavaScript 类
【发布时间】：2018-01-20 13:11:32
【问题描述】：

我正在尝试在另一个 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 文件时，页面上不会出现任何内容。在开发人员控制台中，我收到错误“Uncaught ReferenceError: module is not defined, at class.js:8”我怎样才能正确实例化这个 HTML 文件中的拼图类？

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

【问题讨论】：

您是否在控制台中遇到任何错误？签入开发人员工具一次。可能不支持require。
在开发者工具中我收到错误“Uncaught ReferenceError: module is not defined, at class.js:8”
您不需要导出拼图模块，因为它已在全局命名空间中定义。

标签： javascript jquery html node.js

【解决方案1】：

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

【讨论】：

【解决方案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>

既然我们在讨论这个主题，我强烈建议使用伪经典模式如果你打算在你的类中添加一个函数，这种模式会让你的生活更轻松

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

伪经典模式 - 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";
}

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

【讨论】：