Question

我有2个模型文件，每个模型文件包含一个构造函数，还有一个index.js文件，我想用它来使用innerHTML将元素插入到HTML文件中。我想使用js模型文件中的一个变量，但是当我尝试索引index.js文件中的文件时，innerHTML文件突然停止工作。请注意，当前`window.onload'函数中的代码是插入h1元素作为测试，我将用构造函数的返回值替换它，但此刻，当我需要文件时，甚至是h1插入停止工作。我认为相关的代码片段如下所示：

index.js文件：

var ToDo = require('../src/toDo.js');
var ToDoList = require('../src/toDoList.js');

window.onload = function() {

         // create a couple of elements in an otherwise empty HTML page
         var heading = document.createElement("h1");
         var heading_text = document.createTextNode("Big Head!");
         heading.appendChild(heading_text);
         document.body.appendChild(heading);
      }

模型文件1：

function ToDo(task) {
  this.task = task;
  this.complete = false;
}

module.exports = ToDo;

function ToDoList() {
  this.array = [];
}

ToDoList.prototype.add = function(task) {
  this.array.push(task);
};

ToDoList.prototype.popTask = function() {
  var poppedTask = this.array.pop();
  var concat = "<ul><li>";
  var concat2 = "</li></ul>";
  return (concat + poppedTask.task + concat2);
};

module.exports = ToDoList;

Answer 1

require是CommonJs功能，没有此库的浏览器不支持它。因此，如果您需要具有require语法的模块，则需要在项目中使用它。

<强>更新

要使用require功能，您需要一些模块加载器。您可以查看两种非常受欢迎的内容 - Webpack 或 Browserify 。他们都支持您正在寻找的CommonJS require。至于我，我最喜欢webpack，因为它非常强大，开箱即用。要了解他们的比较： https://medium.com/@housecor/browserify-vs-webpack-b3d7ca08a0a9#.lb3sscovr

RequireJS 是另一个模块加载器，但他不使用CommonJs样式的模块（require）。他实现了AMD风格的模块。您可以查看本文以了解AMD与CommonJS的不同之处： https://auth0.com/blog/2016/03/15/javascript-module-systems-showdown/

如何在index.js文件中要求javascript模型文件？

1 个答案: