Kodokon kodokon.com

وحدات ES: import/export، وهيكلة مشروع

هيكل مشاريعك بوحدات ES باستثمار تحليلها الساكن وتجنّب البراميل السامة والاعتماديات الدائرية.

8 دقيقة · 3 أسئلة

افتح هذا الدرس في Kodokon

وحدات ES ساكنة: تُحلّ عبارات import وexport عند تحليل الملف نحويا، قبل تشغيل أي شيفرة. وهذا ما يتيح هزّ الشجرة (tree-shaking، إزالة الشيفرة التي لا تُستورَد أبدا) والتقاط أخطاء التسمية وقت البناء. تصديرات مسمّاة أم تصدير افتراضي؟ تفوز التصديرات المسمّاة في كل جبهة تقريبا: إعادة تسمية صديقة لإعادة الهيكلة، وإكمال تلقائي موثوق، ولا سبيل لاستيراد الشيء نفسه بعشرة أسماء مختلفة. احفظ الافتراضي للحالة التي تصدّر فيها الوحدة شيئا واحدا بديهيا.

JAVASCRIPT
export const TAX_RATE = 0.2;

export function applyTax(price) {
  return price * (1 + TAX_RATE);
}

export default class Cart {
  items = [];
  add(item) {
    this.items.push(item);
    return this;
  }
}
‏cart.js: تصديرات مسمّاة للأدوات، وتصدير افتراضي للصنف المركزي.

من جهة الاستهلاك، أربع صيغ: الاستيراد المسمّى (مع اسم بديل اختياري عبر as)، والاستيراد الافتراضي، واستيراد فضاء الأسماء (* as)، والاستيراد الديناميكي import() الذي يعيد وعدا بفضاء أسماء. وهذا الأخير هو لبنة تقسيم الشيفرة: لا تحمّل وحدة ثقيلة (محرر، مخطط بياني، PDF) إلا في اللحظة التي يحتاجها فيها المستخدم فعلا.

JAVASCRIPT
import Cart, { applyTax, TAX_RATE } from "./cart.js";
import * as cartModule from "./cart.js";

console.log(applyTax(100), TAX_RATE); // 120 0.2
console.log(cartModule.TAX_RATE); // 0.2

const lazy = await import("./cart.js");
const cart = new lazy.default();
console.log(cart instanceof Cart); // true
الصيغ الساكنة والاستيراد الديناميكي لنفس الوحدة.

للتنظيم، فضّل التقسيم حسب الميزة (features/cart/ وfeatures/auth/) بدل التقسيم حسب النوع التقني (controllers/ وhelpers/): فالشيفرة التي تتغير معا تعيش معا، وإزالة ميزة تعني حذف مجلد واحد. اعرض كل ميزة عبر نقطة دخول ضيقة، واعتبر أي استيراد يتجاوز نقطة الدخول تلك انتهاكا للحدود.

اختبار المعرفة

تأكّد من أنك تذكّرت النقاط الأساسية في هذا الدرس.

  1. ما الذي يجعل هزّ الشجرة ممكنا مع وحدات ES؟
    • تنفّذ المُجمّعات الشيفرة لترى ما يُستعمل
    • الاستيرادات والتصديرات ساكنة ويمكن تحليلها دون تشغيل الشيفرة
    • تضغط وحدات ES الشيفرة الميتة تلقائيا
  2. ماذا يعيد التعبير import("./module.js")؟
    • فضاء أسماء الوحدة، بشكل متزامن
    • وعدا محلولا بفضاء أسماء الوحدة
    • دالة تحمّل الوحدة عند استدعائها
    • التصدير الافتراضي للوحدة فقط
  3. ما الخطر الرئيسي لملفات البرميل (index يعيد تصدير مجلد كامل)؟
    • تجعل التصديرات المسمّاة مستحيلة
    • قد تحمّل المجلد كاملا لاستيراد واحد وتعيق هزّ الشجرة
    • تمنع الاستيراد الديناميكي للمجلد