مقارنة شاملة بين JavaScript في المتصفح و Node.js

مقارنة شاملة بين JavaScript في المتصفح و Node.js

JavaScript


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

١. المقدمه 

مهم: JavaScript لغة برمجة تستخدم في:

المتصفح (Client-side): لإنشاء تفاعلات الويب والتعامل مع صفحة HTML عبر DOM.

Node.js (Server-side): لإنشاء تطبيقات الخادم، التعامل مع نظام الملفات، إدارة العمليات، والعديد من المهام الأخرى.

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

٢. الأساسيات المشتركة

ما المشترك بين المتصفح و Node.js؟

الكتابة الأساسية للغة: يتم كتابة المتغيرات، الدوال، الحلقات، الشروط والتعامل مع البيانات بنفس الطريقة في كلا البيئتين.


const name = "أحمد";

function greet(user) {
    return `مرحبًا، ${user}!`;
}

console.log(greet(name));

التعامل مع الـ asynchronous: استخدام الـ Promises و async/await يكون مماثلاً سواء كنت تعمل على المتصفح أو في Node.js.

٣. الفروقات البيئية

أ. الأدوات والواجهات الخاصة بالبيئة

الميزةJavaScript العادية (المتصفح)Node.js
document و window✅ متاح❌ غير متاح
fs (نظام الملفات)❌ غير متاح✅ متاح
require()❌ غير متاح✅ متاح
import/export✅ متاح✅ متاح (مع ضبط الإعدادات)
fetch()✅ متاح❌ غير متاح افتراضيًا

ب. التحكم في الملفات وعمليات النظام

المتصفح:

❌ لا يمكن الوصول إلى نظام الملفات مباشرة.

❌ لا يوجد دعم لتشغيل أوامر النظام أو إنشاء عمليات فرعية.

Node.js:

✅ يمكن قراءة، كتابة، حذف، وإنشاء ملفات باستخدام وحدة fs.

✅ يمكن تشغيل أوامر النظام وإنشاء عمليات فرعية باستخدام وحدات مثل child_process.

مثال على التحكم في الملفات في Node.js


const fs = require('fs');

fs.writeFileSync('example.txt', 'Hello, Node.js!');
console.log('تم إنشاء الملف بنجاح');

fs.readFile('example.txt', 'utf8', (err, data) => {
  if (err) throw err;
  console.log('محتوى الملف:', data);
});

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

في المتصفح:

يتم استخدام import و export وفق معايير ES6 Modules مباشرة داخل ملفات JavaScript.


// ملف module.js
export function myFunction() {
    console.log('هذه دالة من module.js');
}


// ملف main.js
import { myFunction } from './module.js';
myFunction();

في Node.js:

يمكن استخدام require() لاستيراد الوحدات بنمط CommonJS، كما يدعم Node.js أيضًا import/export مع ضبط الإعدادات المناسبة.


// ملف module.js
module.exports.myFunction = function() {
    console.log('هذه دالة من module.js');
};


// ملف main.js
const { myFunction } = require('./module');
myFunction();

٤. ما يمكن استخدامه في كلا البيئتين بدون تعديل

هناك العديد من الجوانب في لغة JavaScript التي يمكن استخدامها بدون أي تغيير سواء كنت تعمل على المتصفح أو في Node.js:

✅ الأساسيات اللغوية: تعريف المتغيرات، كتابة الدوال، استخدام الشروط والحلقات.

✅ البرمجة الغير متزامنة: استخدام الـ Promises و async/await.

✅ عمليات المعالجة المنطقية والرياضية: إجراء العمليات الحسابية والمنطقية.

مثال على كود يعمل في كلا البيئتين


const numbers = [1, 2, 3, 4, 5];

const squaredNumbers = numbers.map(num => num * num);

console.log(squaredNumbers); // سيطبع [1, 4, 9, 16, 25]

٥. الخلاصة

الأساسيات: تُكتب القواعد الأساسية للغة JavaScript بنفس الطريقة في المتصفح و Node.js.

الفروقات البيئية: تتحدد الفروقات عند استخدام الأدوات الخاصة بكل بيئة؛ حيث يوفر المتصفح واجهات للتعامل مع HTML والـ DOM بينما يوفر Node.js مكتبات للوصول إلى نظام الملفات وإدارة العمليات.

الاستيراد والتصدير: تختلف طرق استيراد الوحدات؛ حيث يستخدم المتصفح عادة ES6 Modules بينما يعتمد Node.js على CommonJS (مع إمكانية استخدام ES6 Modules مع ضبط الإعدادات).

التطبيقات العملية:

🎨 تطوير واجهات المستخدم يتم في المتصفح.

🔧 بناء الخوادم وتطبيقات الخلفية يتم في Node.js.

باختصار، إذا كنت تكتب كود JavaScript عاديًا (المتغيرات، الدوال، الحلقات والشروط) فلن تحتاج إلى تعديل الكود ليعمل في كلا البيئتين. الاختلاف يظهر فقط عند الحاجة للتعامل مع واجهات البيئة الخاصة مثل الوصول إلى نظام الملفات أو التعامل مع الـ DOM.

🚀 إذا كان لديك أي استفسار إضافي أو تحتاج إلى أمثلة تفصيلية أكثر، لا تتردد في السؤال!

Next Post Previous Post
No Comment
Add Comment
comment url