كيفية استيراد وتصدير الوظائف في JavaScript

اليوم ، تلعب JavaScript دورًا كبيرًا في تطوير مواقع الويب. يستخدم مطورو الواجهة الأمامية JavaScript لإنشاء تطبيقات ويب تفاعلية. نتيجة لذلك ، كان هناك زيادة في الطلب على مطوري جافا سكريبت.

بالتأكيد ، تطورت JavaScript على مر السنين. قدم ES6 العديد من الميزات الجديدة للغة. إحدى هذه الطرق هي طريقة لمشاركة الأكواد بسهولة بين ملفات JavaScript.

يعد استيراد وتصدير الوظائف لجافا سكريبت من الميزات الجديدة التي ستجعلك مطورًا أفضل. إليك كيفية عمل هذه الميزات.

ما هي وحدة جافا سكريبت؟

وحدة JavaScript هي ملف JavaScript يحتوي على مجموعة من التعليمات البرمجية لتستخدمها. عادةً ما تتم كتابة الوحدات النمطية في ملفات منفصلة ويتم استيرادها باستخدام امتداد يستورد كلمة رئيسية. إنه يوفر الوقت والجهد لأنه يمكنك إعادة استخدامه لاحقًا.

على سبيل المثال ، إذا كان لديك وظيفة تسمى احسب المجموع ()، يمكنك تضمينه في ملف آخر وإتاحته في أي مكان في مشروعك باستخدام امتداد يصدّر و يستورد يعمل JavaScript دون أي ضجة.

تتمثل إحدى فوائد استخدام الوحدات في أنها تساعد في الحفاظ على تنظيم التعليمات البرمجية الخاصة بك. كما أنه يجعل شفرتك أكثر قابلية للإدارة وأسهل في تصحيح الأخطاء.

من أجل استخدام ملف JavaScript كوحدة نمطية ، تحتاج إلى إنشاء برنامج نصي في مستند HTML الخاص بك بامتداد اكتب = "وحدة".

<نوع البرنامج النصي ="وحدة" src ="fileName.js"></script>

هناك نوعان من الوحدات:

1. وحدات ECMAScript: وحدات JavaScript قياسية وتدعمها جميع المتصفحات الرئيسية.
2. الوحدات النمطية CommonJS: أقدم ، وليست مدعومة على نطاق واسع.

سنركز على وحدات ECMAScript هنا. إذا لزم الأمر ، راجع مقدمة لجافا سكريبت لصقل الأساسيات.

كيفية تصدير الوظائف في JavaScript

في JavaScript ، الوظائف هي كائنات من الدرجة الأولى يمكن تمريرها كوسائط بالإضافة إلى استخدامها بمفردها. يعد تصدير الوظائف طريقة جيدة لنقلها إلى برامج أخرى. يتم استخدامه أيضًا عندما تريد إنشاء مكتبات قابلة لإعادة الاستخدام.

يتم تصدير وظائف JavaScript باستخدام امتداد يصدّر وظيفة. ال يصدّر تقوم الدالة بتصدير دالة معينة ليتم استخدامها بواسطة ملف أو برنامج نصي آخر. عن طريق التصدير وظائفنا الخاصة، يمكننا استخدامها بحرية في ملفات أو نصوص أخرى دون القلق بشأن مشكلات الترخيص.

هناك طريقتان لاستخدام يصدّر تعمل بكفاءة. سنستعرض هذه الأمثلة مع التعليمات البرمجية.

افترض أن لديك ملف getPersonalDetails.js الذي يحتوي على وظيفة تُرجع الاسم الكامل للمستخدم بعد إدخال سريع. تبدو الوظيفة كما يلي:

وظيفةgetFullName(الاسم الكامل){
 fullName = موجه ('ما هو اسمك الأول');
وحدة التحكم.log (fullName) ؛
 }

1. يمكنك تصدير هذه الوظيفة ببساطة عن طريق استخدام ملف يصدّر الكلمة الأساسية متبوعة باسم الوظيفة بين قوسين معقوفين. تبدو هكذا:

   يصدّر {getFullName} ،

2. الطريقة الثانية هي إضافة يصدّر الكلمة الأساسية قبل التصريح عن الوظيفة.

   يصدّروظيفةgetFullName (الاسم الكامل){...}

يمكنك تصدير وظائف متعددة باستخدام الطريقة الأولى. يتم ذلك عن طريق تضمين أسماء الوظائف المطلوبة في القوس المتعرج. الوظائف مفصولة بفاصلة.

على سبيل المثال: افترض أن لديك ثلاث وظائف في getPersonalDetails.js ملف - getFullName () ،getEmail (), getDob (). يمكنك تصدير الوظائف عن طريق إضافة السطر التالي من التعليمات البرمجية:

تصدير {getFullName، getEmail، getDob} ؛

كيفية استيراد الوظائف في JavaScript

من أجل استخدام وحدة ، تحتاج أولاً إلى استيرادها. يمكن استيراد أي دالة باستخدام مرجع المسار الكامل.

استيراد الوظائف بسيط للغاية. تحتوي JavaScript على ميزة مضمنة لاستيراد وظائفك الخاصة من ملفات أخرى. إذا كنت ترغب في الوصول إلى هذه الوظائف من الوحدات النمطية الأخرى ، فمن الجيد تضمين إعلان وظيفة لكل من الأدوات المساعدة الخاصة بك.

تم بالفعل تصدير الوظيفة المراد استيرادها في ملفها الأصلي.

يمكنك استيراد وظائف من ملف مختلف باستخدام امتداد يستورد وظيفة الكلمات الرئيسية. يستورد يسمح لك باختيار الجزء المراد تحميله من الملف أو الوحدة النمطية.

إليك كيفية استيراد ملف getFullName وظيفة من getPersonalDetails.js:

يستورد {getFullName} من "./getPersonalDetails.js"

هذا سيجعل هذه الوظيفة متاحة للاستخدام في ملفنا الحالي.

لاستيراد وظائف متعددة ، يتم تضمين الوظائف المراد استيرادها في الأقواس المتعرجة. يتم فصل كل منها بفاصلة (،).

يستورد {getFullName، getEmail، getDob} من "./getPersonalDetails.js"

هناك طريقة أخرى لاستخدام يستورد وظائف. هذا يسمح لنا باستيراد جميع الصادرات في ملف معين. يتم ذلك باستخدام ملف استيراد * بصيغة بناء الجملة.

يمكنك استيراد جميع الصادرات في منطقتنا getPersonalDetails.js عن طريق إضافة السطر التالي من التعليمات البرمجية:

يستورد * مثل PersonalDetailsModule من "./getPersonalDetails.js"

ما سبق سيخلق كائنًا يسمى PersonalDetailsModule.

هذا مجرد اسم متغير ، يمكنك تسميته بأي شيء.

يحتوي هذا الكائن على جميع عمليات التصدير في ملف getPersonalDetails.js. يتم تخزين الوظائف في هذا الكائن ويمكن الوصول إليها بالطريقة التي تصل بها إلى أي خاصية كائن.

على سبيل المثال ، يمكننا الوصول إلى ملف getFullName تعمل عن طريق إضافة السطر التالي من التعليمات البرمجية

PersonalDetailsModule.getFullName();

ما هو التصدير الافتراضي؟

تصدير افتراضي هي وظيفة تصدير استثنائية. يستخدم هذا في حالة تصدير متغير واحد فقط من ملف. يتم استخدامه أيضًا لإنشاء قيمة احتياطية لملف أو وحدة نمطية.

يوجد أدناه مثال استخدمنا فيه ملف getFullName تعمل كخيار افتراضي:

يصدّرتقصيروظيفةgetFullName (الاسم الكامل){...}

لا يمكن أن يكون لديك أكثر من قيمة واحدة كقيمة افتراضية في كل وحدة أو ملف.

يتم استيراد الدالة المستخدمة كوظيفة افتراضية بشكل مختلف. إليك كيفية استيراد ملف getFullName الوظيفة المستخدمة كإعداد افتراضي:

يستورد الاسم الكامل من "./getPersonalDetails.js"

فيما يلي الاختلافات:

1. لا توجد أقواس معقوفة حول القيمة المستوردة ، الاسم الكامل.
2. الاسم الكامل هنا مجرد اسم متغير. يخزن قيمة الوظيفة الافتراضية مهما كانت.

عزز وظائف JavaScript الخاصة بك

وحدات JavaScript النمطية هي أجزاء من التعليمات البرمجية التي يمكن إعادة استخدامها في أجزاء أخرى من التعليمات البرمجية الخاصة بك ، باستخدام وظائف استيراد وتصدير JavaScript. وعادة ما تتم كتابتها في ملفات منفصلة ، ويتم استيرادها باستخدام الكلمة الأساسية للاستيراد. تتمثل إحدى فوائد استخدام الوحدات في أنها تساعد في الحفاظ على تنظيم التعليمات البرمجية الخاصة بك. كما أنه يجعل شفرتك أكثر قابلية للإدارة وأسهل في تصحيح الأخطاء.