دليل المبتدئين لوحدات جافا سكريبت

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

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

تسمى هذه الأقسام "وحدات" بالطبع. يمكنك استيرادها وتصديرها حسب الحاجة.

إذا كان هذا يبدو مربكا ، فلا تقلق. سنحدد كل ذلك في الأقسام القليلة القادمة. تابع القراءة لمعرفة المزيد حول فوائد استخدام الوحدات وكيفية استخدامها.

مقدمة إلى وحدات جافا سكريبت

أولا ، دعنا نتعامل بسرعة مع ماهية جافا سكريبت. إنها لغة واجهة أمامية قوية تعمل مع كود HTML و CSS.

بينما يوفر HTML و HTML5 الهيكل وراء صفحات الويب ، يوفر CSS التصميم. حسنا ، توفر جافا سكريبت التفاعل. إنه إطار عمل أمامي يستخدمه ما يقرب من 75٪ من مواقع الويب عبر الإنترنت.

إذن ، ما هي الوحدة؟ إنه ببساطة قسم من شفرة JavaScript تم تمكينه للاستيراد إلى وحدات أخرى. تؤدي كل وحدة وظيفة مختلفة ، ويمكن أن تعتمد الوحدات على بعضها البعض.

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

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

فوائد استخدام الوحدات

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

سهولة الصيانة

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

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

إعادة استخدام الوحدات

لنفترض أنك كتبت جزءا من التعليمات البرمجية سيكون مفيدا في مكان آخر في مشروعك ، أو لاحقا في مشروع مختلف. سيكون من الأسهل بكثير تخزين هذا الجزء من التعليمات البرمجية في وحدة نمطية يمكنك استيرادها أينما تريد بدلا من إعادة كتابتها في كل مرة تحتاج إليها بشكل صحيح؟

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

تجنب تلوث مساحة الاسم

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

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

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

هناك طريقة أخرى تتمثل في استخدام الاستيراد العالمي (شائع لدى المكتبات مثل jQuery). وهذا يعني تمرير المتغيرات العالمية كمعلمات. هنا ، يتم تحديد المتغيرات العالمية مقدما ، مما يحسن قابلية القراءة.

هناك طرق أخرى لتجنب تلوث مساحة الاسم ، ولكن دعنا ننتقل. سنستعرض تفسيرات لبعض المفاهيم الأخرى المرتبطة بوحدات JavaScript.

استيراد وتصدير الوحدات

أولا ، دعنا نحدد بعض الكلمات الرئيسية بسرعة.

تسمح لك الكلمة الأساسية للاستيراد باستيراد المتغيرات والوظائف من وحدة نمطية أخرى. تسمح لك الكلمة الأساسية للتصدير بتسمية المتغيرات والوظائف التي تريد إحضارها (استيرادها) إلى وحدة نمطية أخرى. تحدد الكلمة الأساسية الافتراضية المتغير والكائن والفئة وما إلى ذلك. التي ترغب في تحديد أولوياتها أثناء الاستيراد.

التبعيات هي العلاقات بين الوحدات النمطية. سيصبح هذا مهما عند النظر في أفضل الممارسات لوحدات الترميز. 

استيراد الوحدات

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

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

تسمح لك عمليات الاستيراد الديناميكية بتحميل وحدة نمطية بشكل مشروط. ومع ذلك ، فإن المعيار هو استيراد ثابت ، والذي سيقيم جميع التعليمات البرمجية من الوحدة المستوردة في وقت التحميل. 

تتضمن بعض المواقف التي قد تحتاج فيها إلى استخدام عمليات استيراد ديناميكية ما يلي:

• سيؤدي الاستيراد الثابت إلى زيادة وقت التحميل بشكل كبير
• يزيد الاستيراد الثابت من استخدام الذاكرة
• فرصة منخفضة ستحتاج إلى الوحدة المستوردة
• الوحدة النمطية المستوردة غير موجودة في بداية وقت التحميل

وإلا، استخدم عمليات الاستيراد الديناميكية فقط عند الضرورة.

تصدير الوحدات

يمكنك تصدير الوحدات بطريقتين . أولا ، من خلال الصادرات المسماة ، مما يسمح بتصدير صفر أو أكثر لكل وحدة. ثانيا ، من خلال عمليات التصدير الافتراضية ، مما يسمح بتصدير واحد فقط لكل وحدة.

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

عندما ترغب في جعل التعليمات البرمجية الخاصة بك افتراضية لوظيفة واحدة ، استخدم عمليات التصدير الافتراضية. على عكس عمليات التصدير المسماة، يمكنك تضمين تصدير افتراضي واحد فقط لكل وحدة نمطية. باستخدام عمليات التصدير الافتراضية، يمكنك تسميتها بالطريقة التي تريدها.

للحصول على أمثلة على التعليمات البرمجية لوحدة تصدير JavaScript ، يمكنك الرجوع إلى مصادر إجابات الترميز أو المكتبات مفتوحة المصدر.

تطبيق الوحدات النمطية على HTML

تشبه عملية تطبيق وحدة نمطية على صفحة HTML الخاصة بك إلى حد كبير تطبيق برنامج نصي عادي. ومع ذلك ، هناك بعض الاختلافات التي تحتاج إلى وضعها في الاعتبار. 

First, ensure that you define the script as a module. This is easily done by coding type=”module” in the <script> element. Otherwise, you can embed the module code directly into the HTML file as long as you place it within the <script> element.

ثانيا ، داخل الوحدات النمطية في ملف HTML ، يمكن استخدام عبارات الاستيراد والتصدير فقط (وليس البرامج النصية العادية).

ما هي الأنواع المختلفة لوحدات جافا سكريبت؟

الوحدات النمطية هي جزء أساسي من كتابة كود جافا سكريبت. لذلك ، قد يفاجئك أنه لم يكن هناك بناء جملة على مستوى اللغة لإدراج الوحدات حتى عام 2015. حتى ذلك الحين ، استخدم المطورون مكتبات مثل CommonJS و AMD و UMD لتنظيم الوحدات النمطية. 

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

CommonJS

CommonJS هو المعيار المستخدم في تطوير Node .js. يستخدم عبارة الطلب بدلا من الاستيراد. كما أنه لا يتضمن الصادرات الافتراضية ، لذلك سيتعين عليك استخدام عمليات التصدير المسماة حصريا عند التعامل مع CommonJS. 

الفرق الآخر هو أن الوظيفة المطلوبة ديناميكية ، بينما الاستيراد ثابت ، كما ناقشنا. 

AMD

يعد تعريف الوحدة النمطية غير المتزامنة (AMD) أحد أقدم أنظمة الوحدات النمطية وقد تم استخدامه لأول مرة بواسطة محمل البرنامج النصي المعياري الذي يتطلبه .js. تم إنشاؤه للإعلان عن تبعيات الوحدات النمطية والتأكد من تحميلها قبل تنفيذ التعليمات البرمجية. 

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

تستخدم AMD وظيفة التعريف لتحميل التبعيات. نظرا لأن الوظيفة يتم تنفيذها بمجرد تحميل التبعيات ، فلا داعي لوظيفة تصدير . يتم تصدير كل شيء يتم إرجاعه بواسطة وظيفة التحديد .

UMD

تعريف الوحدة النمطية العالمي (UMD) متوافق مع كل من AMD و CommonJS. يستخدم مصطلح "عالمي" لأن هدفه هو السماح بتحميل الوحدة النمطية الخاصة بك بواسطة عدة لوادر مختلفة. 

هناك مكونان لتعريف UMD. الأول هو تعبير دالة يتم استدعاؤه على الفور (IIFE) ، والثاني هو دالة مصنع (التي تتلقى التبعيات). 

كما يوحي الاسم ، يتم تشغيل IIFE لحظة تعريفه. هنا ، يأخذ IIFE معلمتين. أولا ، عنصر الجذر لتمكين النطاق العالمي ، وثانيا ، وظيفة المصنع ، والتي هي ببساطة رمز الوحدة النمطية.

أفضل الممارسات لكتابة وحدات جافا سكريبت

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

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

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

لا تنفذ عمليات ثقيلة على نطاق الوحدة النمطية

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

من خلال ترك قرار وقت تشغيل العمليات الثقيلة للمستخدم ، فإنك تقلل من وقت التحميل غير الضروري. 

تأكد من أن الوحدات الخاصة بك عالية التماسك

ما مدى ارتباط المكونات داخل الوحدة النمطية الخاصة بك؟ هل تركز الوحدة على مهمة واحدة فقط أم متعددة؟

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

تعتبر الوحدات التي تحتوي على مكونات غير ذات صلة منخفضة التماسك. تخلق وحدات التماسك المنخفضة تبعيات غير ضرورية ، مما يطيل وقت التشغيل.

إذا لاحظت أن التعليمات البرمجية الخاصة بك تحتوي على وحدات منخفضة التماسك ، فما عليك سوى تقسيمها إلى عدة وحدات عالية التماسك. سيؤدي ذلك إلى تحسين قابلية القراءة وتقليل التبعيات المتعدية.

تفضيل المسارات المطلقة على المسارات النسبية الطويلة

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

كيفية إدارة الوحدات الخاصة بك

الآن بعد أن عرفت أساسيات كيفية كتابة وحدات JavaScript ، كيف يجب عليك إدارتها؟ تتم الإدارة من خلال حزم الوحدات النمطية مثل Webpack. تتكون العملية من جمع جميع الوحدات النمطية الخاصة بك وتجميعها في ملف جافا سكريبت واحد. 

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

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

لماذا يعتبر التطوير الجيد للواجهة الأمامية مهما جدا؟

لقد أثبتنا أن وحدات JavaScript ضرورية لتنظيف التعليمات البرمجية للواجهة الأمامية. لماذا هذا مهم جدا بالرغم من ذلك؟ تجعل التعليمات البرمجية النظيفة الحياة أسهل كثيرا لمطوري الواجهة الأمامية ، الذين تتمثل مهمتهم في تحسين وظيفة موقعك.

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

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