HTML 如何在纯JavaScript (JS) 中导入/导出一个类

在本文中，我们将介绍如何在纯JavaScript (JS) 中导入和导出一个类。使用HTML的模块化特性，我们可以轻松地将类导入到其他JavaScript文件中，以便在项目中重复使用。

阅读更多：HTML 教程

导出一个类

要导出一个类，我们首先需要创建一个JavaScript文件，并在其中定义要导出的类。假设我们创建了一个名为”person.js”的文件，并在其中定义了一个名为”Person”的类。

// person.js
export class Person {
    constructor(name) {
        this.name = name;
    }

    sayHello() {
        console.log(`Hello, ${this.name}!`);
    }
}

在上述代码中，我们导出了一个”Person”类，并在其中包含了一个构造函数和一个”sayHello”方法。

导入一个类

现在，我们已经定义了一个被导出的类，接下来我们将学习如何在其他JavaScript文件中导入它。假设我们创建了一个名为”main.js”的文件，并希望在其中导入”Person”类。

// main.js
import { Person } from './person.js';

const person = new Person('John');
person.sayHello();

在上述代码中，我们使用”import”关键字从”person.js”文件中导入了”Person”类。然后，我们创建了一个名为”person”的实例，并调用了它的”sayHello”方法。

在这个例子中，我们使用相对路径”./person.js”来指定要导入的文件。在实际应用中，您可能需要根据文件的实际位置进行相应调整。

导入/导出多个类

除了导入和导出一个类，我们还可以导入和导出多个类和/或函数。让我们看一个例子来演示这一点。

// person.js
export class Person {
    constructor(name) {
        this.name = name;
    }

    sayHello() {
        console.log(`Hello, {this.name}!`);
    }
}

export class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log(`{this.name} is speaking.`);
    }
}

// main.js
import { Person, Animal } from './person.js';

const person = new Person('John');
person.sayHello();

const animal = new Animal('Cat');
animal.speak();

在上述代码中，我们在”person.js”中导出了两个类：”Person”和”Animal”。然后，在”main.js”中，我们分别导入了这两个类，并创建了相应的实例。

使用默认导出

除了导入和导出具名的类和函数之外，我们还可以使用默认导出来导入和导出一个默认的值。让我们看一个例子，并将其与之前的代码进行对比。

// person.js
export default class Person {
    constructor(name) {
        this.name = name;
    }

    sayHello() {
        console.log(`Hello, ${this.name}!`);
    }
}

// main.js
import Person from './person.js';

const person = new Person('John');
person.sayHello();

在上述代码中，我们将”Person”类设置为默认导出。在”main.js”中，我们可以直接导入默认的”Person”类，而无需使用花括号包装。

总结

在本文中，我们学习了如何在纯JavaScript (JS) 中导入和导出一个类。通过使用HTML的模块化特性，我们可以轻松地将类导入到其他文件中，以便在项目中重复使用。我们还了解到如何导出多个类和使用默认导出。希望这篇文章对您有所帮助！