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

الوحدة(module) هي كمية من الشفرة البرمجية تخدم غرضاً ما محدداً ويمكن إعادة إستخدامها, وعادةً يتم إستخدام الوحدات لتقسيم البرنامج إلى أجزاء صغيرة من الوحدات بالإضافة لإنشاء أجزاء من الشفرة البرمجية القابلة لإعادة الإستخدام

بالنسبة للأمثلة التي وضعتها:

فبدلاً من وضع البرنامج كله في ملف واحد كبير مما يصعب من وجود الأخطاء وفهم الشفرة البرمجية بشكل أصعب كما في الشكل التالي

const secret = 'SUPER SECRET'
// share
const john = 'john'
const peter = 'peter'
const sayHi = (name) => {
    console.log(`Hello there ${name}`)
  }
 sayHi('susan')
sayHi('john')
sayHi('peter')

قمنا بتقسيم البرنامج إلي ثﻻث ملفات, ملف names الذي يحمل البيانات التي نحتاجها في البرنامج حتى يعمل بشكل صحيح(الأسماء) , وملف utils الذي يحتوي على الدوال التي تمثل الوظائف للبرنامج , وملف appالذي يقوم بعمل إستيراد للملفين السابقين ويستدعي وظائفهم حتى يعمل البرنامج.

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

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

يمكنك مراجعة المقالة:  أنماط التصميم في JavaScript: الوحدات

طيب اريد ان اعرف على ماذا تدل علامة => فى الكود الموجود فى 5-utils.js

وهل يوجد تعبير اخر لكتابة الكود بطريقة اخرى

const sayHi = (name) => {

بتاريخ 1 ساعة قال Mohamed Abdalla6:

طيب اريد ان اعرف على ماذا تدل علامة => فى الكود الموجود فى 5-utils.js

وهل يوجد تعبير اخر لكتابة الكود بطريقة اخرى

const sayHi = (name) => {

هذه تدعى arrow function في جافاسكربت اقرأ عنها أكثر، وهي طريقة تختصر كتابة الدوال،الشيفرة لديك تكافئ تعريف دالة باسم sayHi وتستقبل معامل name..

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

بتاريخ الآن قال Mohamed Abdalla6:

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

سيكون هكذا:

const sayHi = (name) => {
    console.log(`Hello there ${name}`)
}




function sayHi (name) {
	console.log(`Hello there ${name}`)
}


sayHi ("wael") // wael

طيب منكن تشرح لى  arrow function  وصيغة كتبتها من الكود الموجود فى المثال ؟

بتاريخ 11 دقائق مضت قال Mohamed Abdalla6:

طيب منكن تشرح لى  arrow function  وصيغة كتبتها من الكود الموجود فى المثال ؟

يوجد عدة شروحات من الأكاديمية لها، أرجو قرائهم، ومعظمهم يحوي أمثلة

طيب هى سميت بالدوال السهمية عشان تم استخدام <= وهى تشبه السهم ؟

بتاريخ 39 دقائق مضت قال Mohamed Abdalla6:

طيب هى سميت بالدوال السهمية عشان تم استخدام <= وهى تشبه السهم ؟

نعم صحيح، بهذه البساطة

طيب اريد شرح لهذه الجمل  :

 CommonJS, every file is module (by default)

Modules - Encapsulated Code (only share minimum)

بتاريخ 24 دقائق مضت قال Mohamed Abdalla6:

طيب اريد شرح لهذه الجمل  :

 CommonJS, every file is module (by default)

Modules - Encapsulated Code (only share minimum)

 

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

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

بتاريخ 15 دقائق مضت قال Wael Aljamal:

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

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

منكن توضح لى امثلة مع الكود

بتاريخ منذ ساعة مضت قال Mohamed Abdalla6:

منكن توضح لى امثلة مع الكود

موجود في المقالات امثلة مع شروحاتها،

// CommonJS, every file is module (by default)

// Modules - Encapsulated Code (only share minimum)

const express = require('express')

const names = require('./4-names')

const sayHi = require('./5-utils')

const data = require('./6-alternative-flavor')

require('./7-mind-grenade')

console.log(data)

sayHi('susan')

sayHi(names.john)

sayHi(names.peter)

app.js
 

const num1 = 5

const num2 = 10



function addValues() {

  console.log(`the sum is : ${num1 + num2}`)

}



addValues()

mind-grenade.js

لماذا لم يتم اضافة const فى require('./7-mind-grenade') بخلاف البقية ؟

بتاريخ 37 دقائق مضت قال Mohamed Abdalla6:

لماذا لم يتم اضافة const فى require('./7-mind-grenade') بخلاف البقية ؟

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

على عكس express احيانا نعمل على ضبط إعداداته، او data نقرا منها البيانات..