JavaScript 모듈 및 클래스-JS 튜토리얼-php.cn

JavaScript 모듈 및 클래스

DDD

풀어 주다： 2024-12-25 17:11:19

원래의

663명이 탐색했습니다.

JavaScript Modules and Classes

9일차: JavaScript 모듈 및 클래스

날짜: 2024년 12월 16일

9일차에 오신 것을 환영합니다! 오늘은 코드 구성, 재사용성, 가독성을 크게 향상시키는 두 가지 개념인 JavaScript의 모듈과 클래스를 살펴보겠습니다. 이러한 주제를 이해하면 JavaScript 기술이 향상되어 전문 개발자처럼 프로젝트를 구성할 수 있습니다.

1. 자바스크립트 모듈

모듈을 사용하면 코드를 재사용 가능한 더 작은 조각으로 나눌 수 있습니다. 하나의 큰 파일을 사용하는 대신 기능을 여러 파일로 구성하여 코드베이스를 더 쉽게 관리하고 유지할 수 있습니다.

모듈을 사용하는 이유

관심사 분리: 각 모듈은 특정 책임을 처리합니다.
재사용성: 한 모듈의 코드를 다른 모듈에서 재사용할 수 있습니다.
유지관리성: 디버그 및 업데이트가 더 쉽습니다.

모듈로 내보내기 및 가져오기

모듈에서 내보내기

내보내기를 사용하여 모듈에서 변수, 함수 또는 클래스를 내보낼 수 있습니다.

지정 수출

// 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();

로그인 후 복사

2. 자바스크립트 클래스

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.

로그인 후 복사

클래스 상속

상속을 통해 클래스는 확장 키워드를 사용하여 다른 클래스에서 속성과 메서드를 파생할 수 있습니다.

예: 상속

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}!`;
}

로그인 후 복사

클래스와 객체 리터럴

객체 리터럴은 간단한 데이터 구조에 대해 빠르고 간단하지만 클래스는 다음을 제공합니다.

여러 개의 유사한 개체를 만들기 위한 명확한 청사진입니다.
상속 및 캡슐화 지원.

3. 모듈과 클래스 결합

모듈과 클래스는 최신 JavaScript 애플리케이션에서 서로를 아름답게 보완합니다. 한 모듈에서 클래스를 정의하고 이를 다른 모듈에서 사용할 수 있습니다.

예: 모듈과 클래스 결합

// main.js
import { add, subtract } from './utils.js';

console.log(add(5, 3)); // Output: 8
console.log(subtract(5, 3)); // Output: 2

로그인 후 복사

4. 실제 예: 장바구니

다음은 모듈과 클래스를 결합한 실용적인 예입니다.

파일: 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가 동시성, 콜백, 약속 및 이벤트 루프를 처리하는 방법을 배우게 됩니다. . 계속 지켜봐주세요!

위 내용은 JavaScript 모듈 및 클래스의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!