將JavaScript文件移動到稱為HTML的Node.JS中的外部引用

Question

我在Node.JS服務器上托管的html頁面中有一些javascript ajax代碼。

我想將其移至特定的.js側文件以進行調試，但不知道如何進行調試。 這里的解決方案不起作用。

似乎是由於范圍，但不確定如何解決。

<script>
  $(document).ready(function() {
    $('#mainTable').DataTable( {
        "ajax": "jsonData",
        "columns": [
            { "data": "level" },
            { "data": "value" },
            { "data": "description" }
        ]
    } );
  } );
</script>

編輯

這樣做的原因：

1. 希望有一個干凈的對分投注。 腳本和HTML
2. 能夠調試腳本部分（對於html文件中的部分，在Visual Studio Code中似乎是不可能的）
3. 解決了一些在html腳本部分似乎不起作用的導入問題

對於＃3，請參閱以下示例，盡管路徑正確，但require無效：

<script>
    window.onload = function() {
    var a = document.getElementById("books");
    a.onclick = function() {
        var utils = require('./../controllers/utils.js');
        var filteredData = utils.filterJsonData(table, "HighLevel");
    }
</script>

先感謝您

Answer 1

在您的html頁面中添加以下內容。

<script src="./somename.js"></script>
<script src="./../controllers/utils.js"></script>

在你的somename.js中

$(document).ready(function(){
  $('#mainTable').DataTable({
      "ajax": "jsonData",
      "columns": [
        { "data": "level" },
        { "data": "value" },
        { "data": "description" }
      ]
  });
  $('a#books').click(function(){
    //Where is table coming from?
    var filteredData = utils.filterJsonData(table, 'HighLevel');
  });
});

至於更容易在單獨的js和單個html頁面之間進行調試，則沒關系。 在瀏覽器中進行調試應該花費相同的精力。

require僅在可在服務器端js代碼中使用的nodejs中有效。 您是否正在使用某些在瀏覽器中提供require的庫？

Answer 2

將當前位於script標記中的代碼移動到一個單獨的文件，例如side.js ：

  $(document).ready(function() {
    $('#mainTable').DataTable( {
        "ajax": "jsonData",
        "columns": [
            { "data": "level" },
            { "data": "value" },
            { "data": "description" }
        ]
    } );
  } );

將腳本標記更改為

<script source="./side.js"></script>

從您嘗試在HTML內部執行Node.js的其他一些代碼（ require... ）來看。 Node.js在服務器端執行； HTML中的所有Javascript都將在客戶端（瀏覽器）上執行。

---

預計到達時間：現在，您已經更新了代碼，可以看到，是的，您正在嘗試在HTML內使用Node.js。 它不起作用-您require在用戶的瀏覽器內部。