مقدمه ای بر ماژول های جاوا اسکریپت: چه هستند و چگونه از آنها استفاده کنیم

این تکنیک قدرتمند به نام JavaScript modules یک ابزار ضروری برای توسعه دهندگان وب است که به آنها امکان می دهد کدهای ماژولار و قابل استفاده مجدد بنویسند.

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

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

تعریف ماژول های جاوا اسکریپت

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

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

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

آنها را مانند بلوک های ساختمانی در نظر بگیرید که می توان آنها را کنار هم قرار داد تا یک ساختار بزرگ و پیچیده مانند یک برج ایجاد کند. هر بلوک هدف خاصی دارد و می توان از آن در قسمت های مختلف برج استفاده مجدد کرد که ساخت آن را سریعتر و آسان تر می کند.

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

• ماژول های CommonJs

  ماژول های CommonJS قالب اصلی ماژول هستند که در آن استفاده می شود
  node.js، که به شما امکان می دهد ماژول ها را با استفاده از module.exports نحو.

  ماژول های CommonJS به صورت همزمان طراحی شده اند و با استفاده از آن در یک برنامه بارگذاری می شوند require() تابع.
  به عنوان مثال:

 // math.js

    function add(x, y) {
      return x + y;
    }

    function subtract(x, y) {
      return x - y;
    }

    module.exports = {
      add,
      subtract
    };

در یک فایل دیگر، ما می توانیم ماژول را وارد کرده و از توابع آن به صورت زیر استفاده کنیم:

    // main.js

    const math = require('./math');

    console.log(math.add(2, 3)); // output: 5
    console.log(math.subtract(5, 2)); // output: 3

توجه داشته باشید که require() تابع برای وارد کردن ماژول ها و module.exports اعتراض به ماژول های صادراتی

• ماژول های ES6

  ماژول های ES6 یک قالب جدیدتر و استاندارد شده ماژول هستند که در ECMAScript 2015 معرفی شده اند و برای کار در هر دو مرورگر و node.js.

  آنها استفاده می کنند export کلمه کلیدی برای صادرات متغیرها، توابع یا کلاس ها و import کلمه کلیدی برای وارد کردن آنها به عنوان مثال:

    // math.js

    export function add(x, y) {
      return x + y;
    }

    export function subtract(x, y) {
      return x - y;
    }

در یک فایل دیگر، ما می توانیم ماژول را وارد کرده و از توابع آن به صورت زیر استفاده کنیم:

    // main.js

    import { add, subtract } from './math';

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

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

ایجاد یک ماژول

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

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

مرحله 1:
هدف و عملکرد ماژولی که می خواهید ایجاد کنید را تعیین کنید
داشتن یک ایده واضح از آنچه که ماژول باید انجام دهد به شما کمک می کند در هنگام نوشتن کد خود متمرکز و سازماندهی بمانید.

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

ممکن است نام فایل را انتخاب کنید circle.js

مرحله 3:
ماژول را تعریف کنید
برای تعریف ماژول خود، با ایجاد یک تابع یا شی که حاوی عملکردی است که می خواهید صادر کنید، شروع کنید.

در اینجا نمونه ای از ماژولی است که a را صادر می کند Circle کلاس:

مثال ماژول ES6

    // circle.js

    class Circle {
      constructor(radius) {
        this.radius = radius;
      }

      getArea() {
        return Math.PI * Math.pow(this.radius, 2);
      }
    }

    export { Circle };

در این مثال، Circle کلاس با سازنده ای تعریف می شود که a را می گیرد radius بحث و جدل. این getArea() متد مساحت دایره را با استفاده از فرمول محاسبه می کند πr². در نهایت، Circle کلاس با استفاده از export کلمه کلیدی.

مرحله 4:
ماژول را وارد کنید
برای استفاده از عملکرد ماژول جدید خود در یک فایل دیگر، باید آن را وارد کنید. برای این کار از import کلمه کلیدی.

در اینجا مثالی از نحوه وارد کردن آن آورده شده است Circle کلاس از circle.js مدول:

    // main.js

    import { Circle } from './circle.js';

    const circle = new Circle(5);
    const area = circle.getArea();
    console.log(`The area of the circle is ${area}`); 
    // Output: The area of the circle is 78.53981633974483

در این مثال، Circle کلاس با استفاده از وارد می شود import کلمه کلیدی. نمونه ای از Circle کلاس با شعاع ایجاد می شود 5، و مساحت دایره با استفاده از عدد محاسبه می شود getArea() روش. در نهایت، ناحیه با استفاده از یک رشته الگو در کنسول چاپ می شود.

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

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

1. از نحو ماژول ES6 استفاده کنید:

   ES6 سینتکس ماژول جدیدی را معرفی کرد که به شما امکان می دهد ماژول ها را با استفاده از آن تعریف کنید import و export کلید واژه ها. این نحو به طور گسترده در مرورگرهای مدرن و Node.js پشتیبانی می‌شود و روشی واضح و مختصر برای تعریف و وارد کردن ماژول‌ها ارائه می‌کند.

2. ساده و متمرکز نگه داشتن ماژول ها:

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

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

   هنگام کار با برنامه های پیچیده، از بسته های ماژول مانند Webpack یا Rollup برای بهینه سازی کد خود و به حداقل رساندن تعداد درخواست های HTTP مورد نیاز برای بارگذاری برنامه شما.

4. اجتناب از متغیرهای سراسری:

   از استفاده از متغیرهای سراسری در ماژول‌های خود اجتناب کنید، زیرا می‌توانند باعث تضاد نام‌گذاری شوند و ردیابی خطاها را دشوار کنند.

خلاصه ای از ماژول های جاوا اسکریپت

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

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

ما همچنین یاد گرفتیم که برای ایجاد یک ماژول، شما به سادگی توابع، کلاس ها یا متغیرهای خود را با استفاده از آن تعریف کنید export کلمه کلیدی. این باعث می شود آنها را برای استفاده در فایل های دیگر که import آنها را

آینده ماژول های جاوا اسکریپت

آینده ماژول های جاوا اسکریپت با پیشرفت های هیجان انگیزی مانند ماژول های ES در Node.js، ماژول های WebAssembly، واردات پویا و فدراسیون های ماژول امیدوار کننده به نظر می رسد.

این تغییرات توسعه دهندگان را قادر می سازد تا برنامه های تحت وب قدرتمندتر و کارآمدتری ایجاد کنند و در عین حال تجربه توسعه دهندگان را نیز بهبود بخشند.

منابع اضافی

https://www.w3schools.com/js/js_modules.asp

https://www.freecodecamp.org/news/javascript-modules-explained-with-examples/