10. الوحدات النمطية ES6

تسمح الوحدات النمطية ES6 بإنشاء تطبيقات جافا سكريبت منظمة في وحدات نمطية مستقلة وقابلة لإعادة الاستخدام.

10.1. نصوص برمجية [import-01, export-01]

سيستخدم البرنامج النصي [import-01] الوحدة النمطية [export-01]. ويتم تعريف هذه الوحدة النمطية على النحو التالي:


// تصدير افتراضي لكائن غير مسمى
export default {
  data: 2,
  do() {
    console.log(this.data);
  }
};

تعليقات

تحدد الأسطر [2-7] كائنًا غير مسمى بخصائص [data, do]؛
السطر 2: تقوم التعليمات [export default] بتصدير هذا الكائن. وبالتالي، يمكن استيراد هذا الكائن؛

يتم استخدام الوحدة النمطية [export-01] بواسطة البرنامج النصي [import-01] بالطريقة التالية:


'use strict';
// استيراد كائن تم تصديره افتراضيًا
import export01 from './export-01';
// استخدام هذا الكائن
export01.do();
// يمكن استيراد تصدير افتراضي تحت أي اسم
import data from './export-01';
console.log(data.data);

تعليقات

تستورد السطران 3 و7 الكائن الذي تم تصديره افتراضيًا من الوحدة النمطية [export-01] تحت اسمين مختلفين؛
بمجرد استيراد الكائن، يمكن استخدامه كما لو كان قد تم تعريفه محليًا في البرنامج النصي؛

التنفيذ


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe -r esm "c:\Data\st-2019\dev\es6\javascript\modules\import-01.js"
2
2

10.2. نصوص برمجية [import-02, export-02]

تُظهر هذه البرامج النصية تصدير كائن مسمى.

النص البرمجي [export-02] هو التالي:


// تصدير افتراضي لكائن مسمى
const data = {
  data: 2,
  do() {
    console.log(this.data);
  }
};
// تصدير
export default data;

السطر 9: يتم تصدير الكائن [data]؛

سواء كان الكائن المصدر مسمى أم لا، فإن ذلك لا يغير شيئًا في عملية الاستيراد. النص البرمجي [import-02] هو التالي:


'use strict';
// استيراد كائن تم تصديره افتراضيًا
import module1 from './export-02';
// استخدام هذا الكائن
module1.do();
// يمكن استيراد تصدير افتراضي تحت أي اسم
import module2 from './export-02';
console.log(module2.data);

التنفيذ


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe -r esm "c:\Data\st-2019\dev\es6\javascript\modules\import-02.js"
2
2

10.3. البرامج النصية [import-03, export-03]

يمكن للوحدة النمطية تصدير عدة عناصر.

النص البرمجي [export-03] هو كما يلي:


// تصدير متعدد
// تصدير كائن
const data = {
  data: 2,
  do() {
    console.log(this.data);
  }
};
// وظيفة التصدير
export { data };
function doSomething() {
  console.log("doSomething");
}
export { doSomething };

تعليقات

السطران 10 و 14: تصدير عنصرين. يتم تصدير عنصر باستخدام صيغة [export {élément}]؛

يستخدم البرنامج النصي [import-03] الوحدة النمطية [export-03] بالطريقة التالية:


'use strict';
// استيراد وحدة نمطية [export03]
import {data, doSomething} from './export-03';
// استخدام الاستيرادات
data.do();
doSomething();
// كتابة أخرى
import * as module from './export-03';
// استخدام الاستيراد
console.log(module.data);
module.doSomething();

السطر 3: يتم تنفيذ [imports] باستخدام الأسماء الدقيقة للكائنات المصدرة؛
السطر 8: يمكن استيراد جميع الكائنات المصدرة إلى كائن مسمى (هنا [module])؛

التنفيذ


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe -r esm "c:\Data\st-2019\dev\es6\javascript\modules\import-03.js"
2
doSomething
{ data: 2, do: [Function: do] }
doSomething