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

我有2個模型文件，每個文件都包含一個構造函數，還有一個index.js文件，我希望使用innerHTML將元素插入到HTML文件中。我想使用js模型文件中的一個變量，但是當我嘗試要求index.js文件中的文件時，innerHTML文件突然停止工作。請注意，當前`window.onload'函數中的代碼插入h1元素作爲測試，我將用構造函數的返回值替換它，但此時，當我需要這些文件時，即使是h1插入停止工作。代碼片段，我認爲相關可以看到下面：如何在index.js文件中需要javascript模型文件？

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;

來源

2016-07-05 sdawes

innerHTML文件是什麼？ – SoluableNonagon

innerHTML是修改節點的html的函數，它不是文件 – SoluableNonagon

您在控制檯中遇到什麼錯誤？ – SoluableNonagon

require是CommonJS的功能，它不是由瀏覽器沒有這個庫支持。所以你需要在你的項目中使用它，如果你想要模塊需要語法。

更新

要使用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/

來源

2016-07-05 20:58:45 Luger

對不起，哪個庫？ – sdawes

這一個http://requirejs.org/？ – SoluableNonagon

@sdawes 更新的答案與更多說明 – Luger

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

回答

相關問題