日期:2024 年 12 月 16 日
欢迎来到第九天!今天,我们探讨 JavaScript 中的模块 和 类,这两个概念可以显着增强代码组织、可重用性和可读性。理解这些主题将提高您的 JavaScript 技能,使您能够像专业开发人员一样构建您的项目。
模块允许您将代码分割成更小的、可重用的部分。您可以将功能组织到多个文件中,而不是使用一个大文件,从而使您的代码库更易于管理和维护。
您可以使用导出从模块中导出变量、函数或类。
命名导出
// utils.js export const add = (a, b) => a + b; export const subtract = (a, b) => a - b;
默认导出
// greet.js export default function greet(name) { return `Hello, ${name}!`; }
使用 import 关键字从另一个模块引入功能。
示例:导入命名导出
// main.js import { add, subtract } from './utils.js'; console.log(add(5, 3)); // Output: 8 console.log(subtract(5, 3)); // Output: 2
示例:导入默认导出
// main.js import greet from './greet.js'; console.log(greet("Alice")); // Output: Hello, Alice!
使用 import() 在运行时动态导入加载模块。
示例:延迟加载
const loadModule = async () => { const module = await import('./utils.js'); console.log(module.add(5, 3)); // Output: 8 }; loadModule();
JavaScript 中的类提供了创建对象并封装相关数据和方法的蓝图。它们是 ES6 的一部分,是 JavaScript 中面向对象编程的基础。
类是使用 class 关键字定义的。
示例:基础课程
class Person { constructor(name, age) { this.name = name; this.age = age; } greet() { return `Hello, my name is ${this.name} and I am ${this.age} years old.`; } } const person1 = new Person("John", 30); console.log(person1.greet()); // Output: Hello, my name is John and I am 30 years old.
继承允许一个类使用extends关键字从另一个类派生属性和方法。
示例:继承
class Animal { constructor(name) { this.name = name; } speak() { console.log(`${this.name} makes a sound.`); } } class Dog extends Animal { speak() { console.log(`${this.name} barks.`); } } const dog = new Dog("Buddy"); dog.speak(); // Output: Buddy barks.
静态方法属于类本身,而不是实例。
示例:静态方法
// utils.js export const add = (a, b) => a + b; export const subtract = (a, b) => a - b;
私有字段和方法只能在类内访问,并用 # 前缀表示。
示例:私人领域
// greet.js export default function greet(name) { return `Hello, ${name}!`; }
虽然对象字面量对于简单的数据结构来说是快速而直接的,但类提供:
模块和类在现代 JavaScript 应用程序中完美地互补。您可以在一个模块中定义一个类并在另一个模块中使用它。
示例:组合模块和类
// main.js import { add, subtract } from './utils.js'; console.log(add(5, 3)); // Output: 8 console.log(subtract(5, 3)); // Output: 2
这是一个结合模块和类的实际示例。
文件:cart.js
// main.js import greet from './greet.js'; console.log(greet("Alice")); // Output: Hello, Alice!
文件:main.js
const loadModule = async () => { const module = await import('./utils.js'); console.log(module.add(5, 3)); // Output: 8 }; loadModule();
明天,第 10 天,我们将深入研究 事件循环和异步编程,您将了解 JavaScript 如何处理并发、回调、promise 和事件循环。请继续关注!
以上是JavaScript 模块和类的详细内容。更多信息请关注PHP中文网其他相关文章!