🚀 تسلط بر سیستم ماژول جاوا اسکریپت: کد خود را مانند یک حرفه ای سازماندهی کنید!

Summarize this content to 400 words in Persian Lang
هنگام ساخت برنامه های وب مدرن، سازمان کلیدی است 🔑. همانطور که پایگاه کد شما رشد می کند، می تواند به سرعت به یک آشفتگی درهم تبدیل شود 😵. جاوا اسکریپت را وارد کنید سیستم ماژول – یک تغییر دهنده بازی برای تمیز نگه داشتن کد شما، قابل نگهداری و مقیاس پذیر. در این پست، نحوه کار ماژول‌ها، چرایی استفاده از آنها و اینکه چگونه می‌توانند مهارت‌های جاوا اسکریپت شما را ارتقا دهند را بررسی خواهیم کرد. بیایید شیرجه بزنیم! 🌊

🧩 ماژول چیست؟

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

ماژول ها به شما کمک می کنند:

از تکرار کد جلوگیری کنید 🔁

کارها را مرتب نگه دارید 📚

کد خود را قابل استفاده مجدد کنید 🔄

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

🔑 ماژول های ES6: روشی مدرن برای سازماندهی کد شما

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

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

دو راه برای صادرات در ES6 وجود دارد: صادرات نام برد و صادرات پیش فرض.

صادرات به نام: شما چندین قطعه کد را صادر می کنید، و آنها باید با همان نام وارد شوند.

صادرات پیش فرض: شما یک تکه کد را صادر می کنید که می تواند با هر نامی وارد شود.

بیایید این را در عمل ببینیم! 🎬

مثال: math.js 🧮

// Named exports
export const add = (a, b) => a + b;
export const subtract = (a, b) => a – b;

// Default export
const divide = (a, b) => a / b;
export default divide;

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

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

در این فایل، ما صادر کرده ایم add و subtract به عنوان صادرات نام برد و divide به عنوان یک صادرات پیش فرض.

📥 وارد کردن ماژول

حالا بیایید این توابع را به فایل دیگری وارد کنیم.

مثال: app.js 💻

// Importing named exports
import { add, subtract } from ‘./math.js’;

// Importing the default export
import divide from ‘./math.js’;

console.log(add(5, 3)); // 8
console.log(subtract(10, 4)); // 6
console.log(divide(6, 3)); // 2

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

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

توجه کنید که چگونه می توانیم وارد کنیم صادرات نام برد با استفاده از {} و صادرات پیش فرض به سادگی با استفاده از نام انتخابی ما.

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

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

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

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

از درگیری اجتناب کنید: ماژول ها دامنه خاص خود را دارند، بنابراین دیگر نگران تداخل متغیرهای سراسری با یکدیگر نباشید 🛑.

کد قابل استفاده مجدد: ماژول‌های خود را در بخش‌های مختلف برنامه یا حتی در پروژه‌های مختلف به اشتراک بگذارید و مجدداً استفاده کنید.

🏗️ ماژول های CommonJS: راه حل Node.js برای کد ماژولار

در حالی که ماژول های ES6 اکنون استانداردی برای توسعه front-end و جاوا اسکریپت مدرن هستند، CommonJS ماژول ها هنوز به طور گسترده ای در Node.js. CommonJS از یک نحو متفاوت برای صادرات و وارد کردن ماژول ها استفاده می کند، اما مفهوم اصلی یکسان است: کد خود را برای ساختار و قابلیت نگهداری بهتر ماژولار کنید.

📤 صادرات با CommonJS

در CommonJS، ما استفاده می کنیم module.exports برای صادرات عملکرد، و require() برای واردات آن

مثال: math.js (CommonJS)

// Exporting functions
module.exports.add = (a, b) => a + b;
module.exports.subtract = (a, b) => a – b;

// Default export
module.exports.divide = (a, b) => a / b;

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

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

در اینجا، ما استفاده می کنیم module.exports برای صادرات توابع به جای export (در ES6 استفاده می شود).

📥 واردات با CommonJS

برای وارد کردن ماژول های CommonJS، از require() تابع

مثال: app.js (CommonJS)

// Importing CommonJS modules
const { add, subtract } = require(‘./math’);
const divide = require(‘./math’).divide;

console.log(add(5, 3)); // 8
console.log(subtract(10, 4)); // 6
console.log(divide(6, 3)); // 2

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

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

به استفاده از require() برای وارد کردن عملکرد از math.js. در CommonJS می‌توانید آیتم‌های صادر شده را به عنوان شی وارد کنید.

💡 تفاوت های کلیدی بین ماژول های ES6 و CommonJS

نحو: ES6 استفاده می کند export و import، در حالی که CommonJS استفاده می کند module.exports و require().

موارد استفاده: ES6 برای برنامه های کاربردی وب مدرن، به ویژه در مرورگر، انتخاب ارجح است، در حالی که CommonJS هنوز در محیط های Node.js رایج است.

بارگذاری ناهمزمان: ماژول های CommonJS به صورت همزمان بارگذاری می شوند (بهترین برای سمت سرور)، در حالی که ماژول های ES6 از بارگیری ناهمزمان پشتیبانی می کنند و آنها را برای برنامه های سمت سرویس گیرنده مناسب تر می کند.

🔄 مثال دنیای واقعی: ساختن یک برنامه Task Manager

بیایید ببینیم چگونه می توانیم از سیستم ماژول در a استفاده کنیم دنیای واقعی پروژه: الف مدیر وظیفه برنامه! 📝

ما سه ماژول اصلی خواهیم داشت:

taskManager.js: وظیفه ایجاد و مدیریت را بر عهده دارد.

utils.js: توابع ابزاری مانند تولید شناسه وظایف منحصر به فرد را ارائه می دهد.

app.js: همه چیز را به هم گره می زند.

1. taskManager.js (مدیریت وظایف) 📋

// taskManager.js

let tasks = [];

export const addTask = (taskName) => {
const newTask = {
id: Date.now(),
name: taskName,
completed: false
};
tasks.push(newTask);
};

export const listTasks = () => {
return tasks;
};

export const completeTask = (taskId) => {
const task = tasks.find(task => task.id === taskId);
if (task) {
task.completed = true;
}
};

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

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

2. utils.js (توابع سودمند) 🔧

// utils.js

export const generateTaskId = () => {
return Date.now();
};

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

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

3. app.js (برنامه اصلی) 🖥️

// app.js

import { addTask, listTasks, completeTask } from ‘./taskManager.js’;
import { generateTaskId } from ‘./utils.js’;

addTask(‘Buy groceries’);
addTask(‘Complete homework’);
console.log(listTasks());

const taskId = generateTaskId();
completeTask(taskId);
console.log(listTasks());

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

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

💡 اینجا چه خبر است؟

taskManager.js تمام منطق مربوط به کار را کنترل می کند – اضافه کردن وظایف، فهرست کردن آنها و علامت گذاری آنها به عنوان تکمیل شده.

utils.js یک تابع کمکی برای تولید شناسه های کار ارائه می کند (در یک برنامه واقعی، احتمالاً از چیز پیچیده تری استفاده می کنید!).

app.js ماژول های لازم را وارد کرده و منطق را اجرا می کند.

🎯 قدرت ماژول ها

با تقسیم کد خود به این ماژول های جداگانه، می توانید:

وظایف را به راحتی به روز کنید بدون تأثیر بر سایر قسمت های برنامه.

هر ماژول را به طور مستقل تست کنید، اطمینان حاصل شود که همه چیز قبل از ادغام به آرامی کار می کند.

برنامه خود را مقیاس کنید بدون زحمت با اضافه شدن ویژگی های جدید.

🏗️ نکته مهم: ماژول ها کد شما را مقیاس پذیر می کنند!

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

بنابراین، چه در حال ساخت یک برنامه کوچک یا یک سیستم بزرگ سازمانی هستید، به یاد داشته باشید: کد ماژولار کد شاد است! 😄

اکنون که قدرت جاوا اسکریپت را می دانید سیستم ماژول، وقت آن است که کد خود را مانند یک حرفه ای سازماندهی کنید! 🚀 کد نویسی مبارک! 👨‍💻👩‍💻

بیایید لینکدین را وصل کنیم

// Named exports
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// Default export
const divide = (a, b) => a / b;
export default divide;

// Importing named exports
import { add, subtract } from './math.js';

// Importing the default export
import divide from './math.js';

console.log(add(5, 3));        // 8
console.log(subtract(10, 4));  // 6
console.log(divide(6, 3));     // 2

// Exporting functions
module.exports.add = (a, b) => a + b;
module.exports.subtract = (a, b) => a - b;

// Default export
module.exports.divide = (a, b) => a / b;

// Importing CommonJS modules
const { add, subtract } = require('./math');
const divide = require('./math').divide;

console.log(add(5, 3));        // 8
console.log(subtract(10, 4));  // 6
console.log(divide(6, 3));     // 2

// taskManager.js

let tasks = [];

export const addTask = (taskName) => {
  const newTask = {
    id: Date.now(),
    name: taskName,
    completed: false
  };
  tasks.push(newTask);
};

export const listTasks = () => {
  return tasks;
};

export const completeTask = (taskId) => {
  const task = tasks.find(task => task.id === taskId);
  if (task) {
    task.completed = true;
  }
};

// utils.js

export const generateTaskId = () => {
  return Date.now();
};

// app.js

import { addTask, listTasks, completeTask } from './taskManager.js';
import { generateTaskId } from './utils.js';

addTask('Buy groceries');
addTask('Complete homework');
console.log(listTasks());

const taskId = generateTaskId();
completeTask(taskId);
console.log(listTasks());