إنشاء Web Worker
أنشئوا خيطًا في الخلفية لتنفيذ المهام.
إنشاء Web Worker درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.
لماذا Web Workers؟
يعمل JavaScript على خيط رئيسي واحد. وأي عملية حسابية طويلة تعطل كل شيء: تتجمد واجهة المستخدم وتتوقف النقرات عن الاستجابة. تعمل Web Workers على خيط في الخلفية، مما يحافظ على استجابة الصفحة.
إنشاء Worker
أنشئ عاملًا بتمرير عنوان URL لملف نصي إلى الباني Worker. فيحمّل المتصفح ذلك الملف ويشغّله على خيط منفصل.
const worker = new Worker('worker.js');
// The code in worker.js now runs on its own thread.نص Worker
ملف العامل عبارة عن JavaScript عادي، لكنه يعمل في نطاق عام خاص به، فلا يتوفر فيه window ولا document. ولا يتواصل إلا من خلال الرسائل.
// worker.js
console.log('worker started');
// This runs off the main thread.نطاقان عامان منفصلان
تملك الصفحة الرئيسية والعامل نطاقًا عامًا وذاكرةً خاصين بكل منهما. ولا يمكنهما مشاركة المتغيرات مباشرةً؛ بل يتبادلان نسخًا من البيانات عبر الرسائل.
- الخيط الرئيسي:
windowوDOM وواجهة المستخدم - خيط العامل:
selfوالحسابات، من دون DOM
self داخل Worker
يكون الكائن العام داخل العامل هو self، أي DedicatedWorkerGlobalScope. ويمكنك إرفاق معالجات واستدعاء واجهات برمجة التطبيقات عليه، مع أن self يكون ضمنيًا غالبًا.
// worker.js
self.addEventListener('message', (e) => {
console.log('worker got:', e.data);
});Workers الوحداتية
يمكنك إنشاء عامل يستخدم import الخاص بوحدات ES من خلال تمرير الخيار type: 'module'. ويتيح ذلك للعامل استيراد الوحدات الأخرى بطريقة مرتبة.
const worker = new Worker('worker.js', { type: 'module' });
// Inside worker.js you can now use import statements.استيراد النصوص البرمجية (التقليدي)
في العامل التقليدي غير المعتمد على الوحدات، استخدم importScripts لتحميل النصوص البرمجية الإضافية بشكل متزامن إلى نطاق العامل.
// Inside a classic worker:
importScripts('math-utils.js', 'helpers.js');
// Their globals are now available in the worker.إنهاء Worker
أوقف العامل من الخيط الرئيسي باستخدام worker.terminate()، أو من داخله باستخدام self.close(). ويحرر ذلك الخيط والذاكرة التي يستخدمها.
// From the main thread:
worker.terminate();
// From inside the worker:
// self.close();معالجة أخطاء Worker
استمع إلى حدث error على العامل لالتقاط الاستثناءات غير المعالجة التي تُطرح داخله. ويحمل الحدث الرسالة واسم الملف ورقم السطر.
worker.addEventListener('error', (e) => {
console.log('worker error:', e.message, 'at line', e.lineno);
});متطلب الأصل نفسه
يجب تقديم نص العامل من الأصل نفسه الذي قُدّمت منه الصفحة، أو عبر عنوان URL من نوع Blob. ولا يمكنك تحميل عامل مباشرةً من عنوان URL عشوائي ذي أصل مختلف.
// Same-origin file path - works:
const w1 = new Worker('/js/worker.js');
// You can also build one from a Blob URL when needed.Dedicated مقابل Shared
يكون Worker مخصصًا، أي مرتبطًا بالصفحة التي أنشأته. أما SharedWorker فيمكن لصفحات متعددة من الأصل نفسه الوصول إليه. ويركز هذا الدرس على العمال المخصصين.
اختبار سريع
اختبر مدى فهمك لإنشاء Web Workers.
مراجعة
لقد تعلّمت إنشاء Web Workers:
- ينشئ
new Worker('worker.js')خيطًا في الخلفية. - للعامل نطاق عام خاص به، هو
self، ولا يملك DOM. - استخدم
type: 'module'للاستيراد، أوimportScriptsفي العمال التقليديين. - يوقفه
terminate()/self.close(). - يجب أن تكون العمال من الأصل نفسه.
بعد ذلك، سنتناول تبادل الرسائل بين الخيوط.
الأسئلة الشائعة
هل درس «إنشاء Web Worker» مجاني؟
نعم — نص درس «إنشاء Web Worker» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.
ماذا ستتعلم في «إنشاء Web Worker»؟
أنشئوا خيطًا في الخلفية لتنفيذ المهام. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟
لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «إنشاء Web Worker»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟
نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.