外部文件中的 javascript 类

📌 相关文章

📜 外部文件中的 javascript 类 - Javascript (1)

📅 最后修改于: 2023-12-03 15:23:42.868000 🧑 作者: Mango

JavaScript 是一种广泛使用的客户端脚本语言，它可以通过内联或外部文件的方式在 HTML 文档中使用。外部文件中的 JavaScript 可以使代码更加可读，易于维护。可以通过 script 标签引入 JavaScript 文件，将脚本代码从 HTML 中分离出来。

引入外部 JavaScript 文件的方法

引入外部 JavaScript 文件的方法非常简单。在 HTML 文档中使用 script 标签，并设置 src 属性为 JavaScript 文件的路径即可。

<!DOCTYPE html>
<html>
  <head>
    <title>引入外部 JavaScript 文件</title>
  </head>
  <body>
    <script src="path/to/js/file.js"></script>
  </body>
</html>

定义 JavaScript 类

在文件中定义一个 JavaScript 类，可以使用 class 关键字。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

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

let person = new Person('Mike', 29);
person.sayHello();

在上面的例子中，我们定义了一个 Person 类，类有两个成员变量 name 和 age，以及一个成员函数 sayHello()。我们通过 new 关键字创建了一个 Person 对象，并调用了 sayHello() 函数。

导出 JavaScript 类

为了能够在外部文件中使用 JavaScript 类，我们需要将类导出，并在其他文件中导入。在 JavaScript 中，可以使用 export 关键字来导出一个类，也可以使用 module.exports 导出该类。

// export 关键字导出
export default class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

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

// module.exports 导出
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

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

module.exports = Person;

需要注意的是，在使用 export 关键字导出类时，需要使用 default 关键字指定默认导出的类。在导入时，也需要使用 import 关键字，并且需要指定导入的变量名。

// 导入 export 关键字导出的类
import Person from './path/to/person.js';

// 导入 module.exports 导出的类
const Person = require('./path/to/person.js');

总结

在 JavaScript 中，通过将代码从 HTML 中分离出来，可以让代码更加清晰易读。通过使用 class 关键字，可以定义 JavaScript 类，并通过 export 或 module.exports 导出该类，以在其他文件中使用。在导入外部 JavaScript 文件时，需要使用 script 标签，并设置 src 属性为 JavaScript 文件的路径。