JavaScript/import

التعبير البرمجي import يُستخدَم لاستيراد ما صُدِّر من وحدة (module) أخرى.

لاحظ أنَّ دعم هذه الميزة ما يزال محدودًا، لذا انظر إلى قسم «دعم المتصفحات» قبل استخدامها.

البنية العامة

import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";

defaultExport

الاسم الذي يُشير إلى التصدير الافتراضي (default export) من الوحدة.

module-name

اسم الوحدة الذي سنستورد منها، ويكون عادةً مسارًا نسبيًا (relative) أو مطلقًا (absolute) لملف ‎.js الذي يحتوي على الوحدة، لكن دون ذكر الامتداد ‎.js، ولا يُسمَح إلا باستخدام السلاسل النصية المُحاطة بعلامتَي اقتباس مزدوجتين أو مفردتين.

name

اسم كائن الوحدة الذي سيُستخدَم كمجال أسماء (namespace) للإشارة إلى ما تم استيراده.

export, exportN

اسم الذي صُدِّرَ ليستورَد.

alias, aliasN

الأسماء التي ستُشير إلى التصديرات المسماة (named imports).

الوصف

المعامل name هو اسم «كائن الوحدة» (module object) الذي سيُستخدَم بما يُشبِه مجال الأسماء (namespace) للإشارة إلى ما صُدِّر، لاحظ أنَّ التعبير export يمكن أن يُحدِّد أسماءً لما صُدِّر، بينما التعبير import * as name سيستوردها كلها. هذه بعض الأمثلة لتوضيح ما سبق.

استيراد محتويات الوحدة كلها

التعبير البرمجي الآتي يُضيف myModule في المجال الحالي والذي يحتوي على جميع ما صُدِّر من الوحدة في الملف الموجود في ‎/modules/my-module.js:

import * as myModule from '/modules/my-module.js';

لاحظ أنَّ الوصول إلى ما صُدِّر يستوجب استخدام اسم الوحدة (وهو myModule في المثال السابق)، فلو كانت الوحدة التي استوردناها أعلاه تتضمن دالة مُصدَّرةً باسم doAllTheAmazingThings()‎ فيمكننا استدعاؤها كما يلي:

myModule.doAllTheAmazingThings();

استيراد إحدى محتويات الوحدة فقط

ليكن لدينا كائن أو قيمة اسمها myExport وقد صُدِّر من الوحدة my-module ضمنيًا (لأن كامل الوحدة قد صُدِّرَت) أو بوضوح (عبر التعبير البرمجي export)، فإنَّ السطر الآتي يستورد myExport إلى المجال (scope) الحالي:

import {myExport} from '/modules/my-module.js';

استيراد بعض محتويات الوحدة

التعبير البرمجي الآتي سيستورد foo و bar إلى المجال الحالي:

import {foo, bar} from '/modules/my-module.js';

استيراد إحدى محتويات الوحدة مع توفير اسم بديل

يمكنك إعادة تسمية إحدى محتويات الوحدة المُصدَّرة عند استيرادها، فعلى سبيل المثال سيُضيف التعبير البرمجي الآتي shortName في المجال الحالي:

import {reallyReallyLongModuleExportName as shortName}
  from '/modules/my-module.js';

استيراد بعض محتويات الوحدة مع توفير اسم بديل

التعبير البرمجي الآتي سيستورد بعض محتويات الوحدة المُصدَّرة ويوفِّر اسمًا بديلًا لها:

import {
  reallyReallyLongModuleExportName as shortName,
  anotherLongModuleName as short
} from '/modules/my-module.js';

استيراد التأثيرات الجانبية لإحدى الوحدات

من الممكن استيراد الوحدة دون تحديد شيء معيّن ليستورد، مما يؤدي إلى تنفيذ الشيفرات العامة (global code) في الوحدة:

import '/modules/my-module.js';

استيراد التصديرات الافتراضية

من الممكن استخدام التعبير import لاستيراد ما قد صُدِّر افتراضيًا (default export) سواءً كان كائنًا أو دالةً أو صنفًا؛ أبسط شكل للاستيراد هو:

import myDefault from '/modules/my-module.js';

من الممكن استخدام أحد الأشكال السابقة مع التصديرات الافتراضية، وفي هذه الحالة يجب التصريح عن الاستيرادات أولًا. مثلًا:

import myDefault, * as myModule from '/modules/my-module.js';
// myModule used as a namespace

أو:

import myDefault, {foo, bar} from '/modules/my-module.js';
// specific, named imports

أمثلة

من الممكن استيراد دالة من وحدة ما للمساعدة في معالجة طلبية AJAX JSON:

ملف الوحدة: file.js

function getJSON(url, callback) {
  let xhr = new XMLHttpRequest();
  xhr.onload = function () { 
    callback(this.responseText) 
  };
  xhr.open('GET', url, true);
  xhr.send();
}

export function getUsefulContents(url, callback) {
  getJSON(url, data => callback(JSON.parse(data)));
}

البرنامج الرئيسي: main.js

import { getUsefulContents } from '/modules/file.js';

getUsefulContents('http://www.example.com',
    data => { doSomethingUseful(data); });

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	61	54	غير مدعومة	47	10.1

على النقيض من متصفح IE، يدعم المتصفح Edge هذه الميزة.

مصادر ومواصفات

• مسودة المعيار ECMAScript Latest Draft.
• معيار ECMAScript 2015 (6th Edition)‎.