ماژول ها و کلاس های جاوا اسکریپت – انجمن DEV

Summarize this content to 400 words in Persian Lang

روز نهم: ماژول ها و کلاس های جاوا اسکریپت

تاریخ: 16 دسامبر 2024

به روز 9 خوش آمدید! امروز، ما بررسی می کنیم ماژول ها و کلاس ها در جاوا اسکریپت، دو مفهوم که سازماندهی کد، قابلیت استفاده مجدد و خوانایی را به طور قابل توجهی افزایش می دهد. درک این موضوعات مهارت های جاوا اسکریپت شما را افزایش می دهد و به شما امکان می دهد پروژه های خود را مانند یک توسعه دهنده حرفه ای ساختار دهید.

1. ماژول های جاوا اسکریپت

ماژول ها به شما امکان می دهند کد خود را به قطعات کوچکتر و قابل استفاده مجدد تقسیم کنید. به جای داشتن یک فایل بزرگ، می‌توانید عملکردها را در چندین فایل سازماندهی کنید و مدیریت و نگهداری پایگاه کد خود را آسان‌تر کنید.

چرا از ماژول ها استفاده کنیم؟

تفکیک نگرانی ها: هر ماژول مسئولیت خاصی را بر عهده دارد.

قابلیت استفاده مجدد: کد یک ماژول را می توان در ماژول دیگر استفاده مجدد کرد.

قابلیت نگهداری: اشکال زدایی و به روز رسانی آسان تر است.

صادرات و واردات در ماژول ها

صادرات از یک ماژول

شما می توانید متغیرها، توابع یا کلاس ها را از یک ماژول با استفاده از آن صادر کنید export.

به نام صادرات

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

مثال: Lazy Loading

const loadModule = async () => {
const module = await import(‘./utils.js’);
console.log(module.add(5, 3)); // Output: 8
};

loadModule();

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

2. کلاس های جاوا اسکریپت

کلاس ها در جاوا اسکریپت طرحی برای ایجاد اشیاء و کپسوله کردن داده ها و روش های مرتبط ارائه می دهند. آنها بخشی از ES6 هستند و برای برنامه نویسی شی گرا در جاوا اسکریپت اساسی هستند.

تعریف کلاس

یک کلاس با استفاده از 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.

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

روش های استاتیک

متدهای استاتیک به خود کلاس تعلق دارند نه نمونه.

مثال: روش استاتیک

class MathUtil {
static square(number) {
return number * number;
}
}

console.log(MathUtil.square(4)); // Output: 16

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

زمینه ها و روش های خصوصی

فیلدها و متدهای خصوصی فقط در داخل کلاس قابل دسترسی هستند و با a نشان داده می شوند # پیشوند

مثال: فیلد خصوصی

class BankAccount {
#balance;

constructor(initialBalance) {
this.#balance = initialBalance;
}

getBalance() {
return this.#balance;
}
}

const account = new BankAccount(1000);
console.log(account.getBalance()); // Output: 1000
// console.log(account.#balance); // Error: Private field ‘#balance’ must be declared in an enclosing class

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

کلاس در مقابل شیء Literals

در حالی که لفظ شیء برای ساختارهای داده ساده سریع و ساده است، کلاس ها ارائه می دهند:

طرحی واضح برای ایجاد چندین شیء مشابه.

پشتیبانی از وراثت و کپسولاسیون.

3. ترکیب ماژول ها و کلاس ها

ماژول ها و کلاس ها به زیبایی یکدیگر را در برنامه های جاوا اسکریپت مدرن تکمیل می کنند. شما می توانید یک کلاس را در یک ماژول تعریف کنید و از آن در ماژول دیگری استفاده کنید.

مثال: ترکیب ماژول ها و کلاس ها

// car.js
export class Car {
constructor(brand, model) {
this.brand = brand;
this.model = model;
}

display() {
return `${this.brand} ${this.model}`;
}
}

// main.js
import { Car } from ‘./car.js’;

const myCar = new Car(“Tesla”, “Model 3”);
console.log(myCar.display()); // Output: Tesla Model 3

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

4. مثال دنیای واقعی: سبد خرید

در اینجا یک مثال عملی از ترکیب هر دو ماژول و کلاس آورده شده است.

فایل: cart.js

export class Cart {
constructor() {
this.items = [];
}

addItem(item) {
this.items.push(item);
}

getTotalItems() {
return this.items.length;
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

فایل: main.js

import { Cart } from ‘./cart.js’;

const cart = new Cart();
cart.addItem(“Apple”);
cart.addItem(“Banana”);

console.log(`Total Items: ${cart.getTotalItems()}`); // Output: Total Items: 2

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

خوراکی های کلیدی

ماژول ها: به سازماندهی کد خود و ارتقای قابلیت استفاده مجدد کمک کنید.

کلاس ها: ارائه یک روش ساختاریافته برای کار با اشیا، ارائه ویژگی هایی مانند وراثت و کپسوله سازی.

استفاده ترکیبی: از ماژول ها و کلاس ها با هم برای ساخت برنامه های مقیاس پذیر و قابل نگهداری استفاده کنید.

وظایف تمرینی

ماژولی ایجاد کنید که توابع را برای عملیات حسابی پایه صادر کند.

یک کلاس بنویسید Library سیستم با روش هایی برای افزودن و فهرست کردن کتاب ها.

ماژول ها و کلاس ها را برای شبیه سازی یک سبد خرید پایه تجارت الکترونیکی ترکیب کنید.

بعد چه می شود؟

فردا، در روز 10، ما به آن می پردازیم حلقه رویداد و برنامه نویسی ناهمزمان، جایی که می آموزید که چگونه جاوا اسکریپت همزمان، تماس ها، وعده ها و حلقه رویداد را مدیریت می کند. با ما همراه باشید!

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

// 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!

const loadModule = async () => {
  const module = await import('./utils.js');
  console.log(module.add(5, 3)); // Output: 8
};

loadModule();

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.

class MathUtil {
  static square(number) {
    return number * number;
  }
}

console.log(MathUtil.square(4)); // Output: 16

class BankAccount {
  #balance;

  constructor(initialBalance) {
    this.#balance = initialBalance;
  }

  getBalance() {
    return this.#balance;
  }
}

const account = new BankAccount(1000);
console.log(account.getBalance()); // Output: 1000
// console.log(account.#balance); // Error: Private field '#balance' must be declared in an enclosing class

// car.js
export class Car {
  constructor(brand, model) {
    this.brand = brand;
    this.model = model;
  }

  display() {
    return `${this.brand} ${this.model}`;
  }
}

// main.js
import { Car } from './car.js';

const myCar = new Car("Tesla", "Model 3");
console.log(myCar.display()); // Output: Tesla Model 3

export class Cart {
  constructor() {
    this.items = [];
  }

  addItem(item) {
    this.items.push(item);
  }

  getTotalItems() {
    return this.items.length;
  }
}

import { Cart } from './cart.js';

const cart = new Cart();
cart.addItem("Apple");
cart.addItem("Banana");

console.log(`Total Items: ${cart.getTotalItems()}`); // Output: Total Items: 2