0Pricing
JavaScript Academy · درس

مراوغات محمّل ESM والفروق بين المسارات وعناوين URL

حلّوا عناوين URL بأمان، وافهموا الفرق بين المحددات النسبية والمجردة، وشاهدوا كيف تختلف عناوين URL للملفات عن عناوين URL للويب. أمثلة صغيرة قابلة للتشغيل

مراوغات محمّل ESM والفروق بين المسارات وعناوين URL درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 2 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 3 دروس في المجموع.

الصورة العامة

الهدف: حلّ المسارات بأمان عبر البيئات المختلفة.

  • استخدم مُنشئ URL لحل المسارات النسبية
  • ميّز بين المحددات النسبية والمحددات bare
  • تعرّف على الفروق بين file: وhttps:
  • تجنّب دمج المسارات بطريقة هشة باستخدام السلاسل النصية
مراوغات محمّل ESM والفروق بين المسارات وعناوين URL — رسم توضيحي 1

مسار نسبي بالنسبة إلى أساس

يتعامل new URL(relative, base) مع أجزاء المسار والشرطات المائلة بطريقة صحيحة.

// Use URL to resolve "./" against a base
const base = "https://site.com/app/screens/";
const img = new URL("./images/icon.png", base);
console.log("resolved:", img.href);
مراوغات محمّل ESM والفروق بين المسارات وعناوين URL — رسم توضيحي 2

التطبيع باستخدام ..

يزيل المُنشئ ../ بطريقة صحيحة، لذلك لا تحتاج إلى حيل يدوية لمعالجة السلاسل النصية.

// URL resolves "../" segments
const u = new URL("../assets/a.txt", "https://x.com/app/views/page/");
console.log("normalized:", u.href);
مراوغات محمّل ESM والفروق بين المسارات وعناوين URL — رسم توضيحي 3

لمحة عن عنوان file:

تشير عناوين file: إلى ملفات محلية في سياقات شبيهة بـ Node، ولا تستطيع المتصفحات قراءتها مباشرةً من دون إجراء من المستخدم.

// You can also work with file: URLs (no actual file I/O here)
const baseFile = "file:///home/user/project/src/";
const file = new URL("./data/sample.txt", baseFile);
console.log("file url:", file.href);
مراوغات محمّل ESM والفروق بين المسارات وعناوين URL — رسم توضيحي 4

أنواع المحددات

تتعامل محمّلات ESM مع المحددات bare بطريقة مختلفة عن عناوين URL النسبية أو المطلقة. ويساعدك معرفة النوع على التعامل معها.

// Tiny helper: categorize a module specifier
function specKind(s) {
  if (typeof s !== "string") return "unknown";
  if (s.startsWith("./") || s.startsWith("../") || s.startsWith("/")) return "relative-or-absolute";
  if (s.startsWith("http://") || s.startsWith("https://") || s.startsWith("file://")) return "url";
  return "bare"; // like "lodash" or "fs"
}

console.log("kind ./util.js:", specKind("./util.js"));
console.log("kind lodash   :", specKind("lodash"));
console.log("kind https:// :", specKind("https://cdn.site/x.js"));
مراوغات محمّل ESM والفروق بين المسارات وعناوين URL — رسم توضيحي 5

عادات مناسبة للمبتدئين

نصائح:

  • فضّل URL(relative, base) على جمع السلاسل النصية.
  • افهم الفرق بين المحددات bare والنسبية.
  • تجنّب افتراض وجود الملفات في المتصفح.
  • اجعل المسارات قصيرة وسهلة القراءة للمبتدئين.
مراوغات محمّل ESM والفروق بين المسارات وعناوين URL — رسم توضيحي 6

اختبار أساسيات حل عناوين URL

تحقّق سريع: إنشاء عنوان URL بأمان.

مراوغات محمّل ESM والفروق بين المسارات وعناوين URL — رسم توضيحي 7

مراجعة

مراجعة: استخدم مُنشئ URL لحل المسارات النسبية (./ و../)، وميّز بين المحددات bare والنسبية، وتذكّر أن عناوين file: تختلف عن عناوين الويب.

مراوغات محمّل ESM والفروق بين المسارات وعناوين URL — رسم توضيحي 8

الأسئلة الشائعة

هل درس «مراوغات محمّل ESM والفروق بين المسارات وعناوين URL» مجاني؟

نعم — نص درس «مراوغات محمّل ESM والفروق بين المسارات وعناوين URL» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 3 دروس في المجموع.

ماذا ستتعلم في «مراوغات محمّل ESM والفروق بين المسارات وعناوين URL»؟

حلّوا عناوين URL بأمان، وافهموا الفرق بين المحددات النسبية والمجردة، وشاهدوا كيف تختلف عناوين URL للملفات عن عناوين URL للويب. أمثلة صغيرة قابلة للتشغيل تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 3.

كم من الوقت يستغرق درس «مراوغات محمّل ESM والفروق بين المسارات وعناوين URL»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. النطاقات العامة وتوفر fetch وواجهات الملفات والشبكة
  2. مراوغات محمّل ESM والفروق بين المسارات وعناوين URL
  3. متغيرات البيئة وأنماط الإعداد
← العودة إلى JavaScript Academy