如何在節點 js 中正確導入/導出方法

Question

我目前正在嘗試從 class 導入一個方法，以保持一切整潔，因為我計划導入的方法會很長。 但是，每次打開它時，我似乎都會收到一個新錯誤。 最大的問題是似乎不想與我一起使用的導入/導出和“事件”參數。

編輯：如果我簡單地結合兩個類並將方法放在 ImportingClass.js 中，代碼就可以工作，但是代碼太多了。

驗證輸入.js：

class ValidateInput
{
    validateInput(event)
    {
        var ID = event.target.StudentID.value;
        // ...
    }
}

導入類.js：

import {validateInput} from '../ValidateInput';

class ImportingClass
{

    handleSubmit(event)
    {
        validateInput(this.event);
        // ...
    }
}

錯誤：未捕獲的類型錯誤：（.validateInput）不是 function

Answer 1

但我們也可以這樣做

創建獨立的 function validateInput

export function validateInput(e){
 .... code
}

為了在你的第一個 class 中調用這個 function 是ValidateInput.js我們可以做這樣的事情

class ValidateInput{
  validateInput(){
    validateInput.apply(this, ...args)
}}

在您的第二個文件ImportingClass.js中，您可以導入並使用import {validateInput} from './validateInput'

或者您可以通過類似這樣的原型導出它

export const validateInput = ValidateInput.prototype.validateInput

Answer 2

1. 您需要導出 class 以便可以在不同的模塊中從外部調用它。 方法是將 class 添加到導出 object 中。

驗證輸入.js：

class ValidateInput
{
    validateInput(event)
    {
        var ID = event.target.StudentID.value;
        // ...
    }
}

exports.ValidateInput = ValidateInput;

2. 將您的ValidateInput class 導入您想要使用的模塊中。

導入類.js：

// import {validateInput} from '../ValidateInput';
const fileName = require(../ValidateInput.js);

class ImportingClass
{

    handleSubmit(event)
    {
        fileName.ValidateInput.validateInput(this.event);
        // ...
    }
}

我使用了命名空間fileName來避免混淆。 它指的是文件。 訪問的第一個屬性是您的 class 名稱，然后是您要調用的方法。 如果您對文件使用幾乎相同的名稱 class 和方法名稱，這可能會有點混亂。