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

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

API Workers Web هو معتمد في جميع المتصفحات تقريبا, لمزيد من المعلومات التفصيلية ، ألقِ نظرة على مستندات CanIUse. قبل الدخول في الشفرة ، دعونا نرى عدة سيناريوهات قد ترغب في استخدام واجهة برمجة التطبيقات هذه حتى تتمكن من الحصول على فكرة عما قصدته مخطوطات الخلفية.

استخدم حالات

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

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

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

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

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

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

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

نطاقات وأنواع العمال

ربما تكون API Workers Web واحدة من أبسط واجهات برمجة التطبيقات للعمل معها. لديها طرق واضحة جدا ل إنشاء المواضيع عامل و التواصل معهم من السيناريو الرئيسي.

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

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

يمكنك أيضا الحصول عليها المواضيع عامل متداخلة: مؤشرات ترابط العامل التي تم إنشاؤها من مؤشر ترابط عامل آخر. العامل الذي أنشأه واحد آخر يسمى أ subworker.

هناك أيضا كثير أنواع العمال. وهما أهمها العمال المتفانين والمشتركة.

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

المثال في هذا البرنامج التعليمي سيكون عن العامل المتفاني, وهو النوع الاكثر شيوعا.

طرق API

انظر الرسم البياني أدناه للحصول على نظرة عامة سريعة على جميع الطرق الرئيسية التي تشكل API Workers Web.

ال عامل() البناء يخلق موضوع عامل مخصص و إرجاع الكائن المرجعي الخاص به. بعد ذلك ، نستخدم هذا الكائن للتواصل مع هذا العامل المحدد.

ال postMessage () يتم استخدام الأسلوب في كل من البرامج النصية الرئيسية والعامل ل إرسال البيانات إلى بعضها البعض. ثم يتم استلام البيانات المرسلة على الجانب الآخر من قبل onmessage معالج الحدث.

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

رمز المثال

الآن ، دعونا نرى بعض التعليمات البرمجية عينة. ال index.html و الصفحة يحمل النصي الرئيسي داخل

نبدأ مع إنشاء مؤشر ترابط العامل من البرنامج الرئيسي.

  w = عامل جديد ('worker.js') ؛ 
 ال عامل() البناء يأخذ عنوان URL للملف العامل كوسيطة له.
 ثم ، نضيف معالج الحدث ل onmessage حدث مثيل العامل المنشأ حديثا ل تلقي البيانات منه. ال البيانات ممتلكات البريد سوف الحدث عقد البيانات الواردة.
  w = عامل جديد ('worker.js') ؛ w.onmessage = (e) => console.log ('مستلمة من العامل: $ e.data') ؛  
 الآن ، نحن نستخدم postMessage () إلى إرسال بعض البيانات إلى مؤشر ترابط العامل بنقرة زر واحدة. ال postMessage () طريقة يمكن أن تأخذ حجتين. يمكن أن يكون الأول من أي نوع (سلسلة ، صفيف ...). إنها البيانات ليتم إرسالها إلى مؤشر ترابط العامل (أو إلى البرنامج النصي الرئيسي ، عندما تكون الطريقة موجودة في مؤشر ترابط العامل).
 المعلمة الثانية الاختيارية هي مجموعة من الكائنات التي يمكن استخدامها من قبل المواضيع عامل (ولكن ليس حسب البرنامج الرئيسي ، أو العكس). وتسمى هذه الأنواع من الكائنات قابلة للتحويل شاء.
  document.querySelector ('button'). onclick = () => w.postMessage ('john')؛  
 أنا فقط أرسل قيمة سلسلة إلى مؤشر ترابط العامل.
 في الخيط العامل ، نحتاج إلى إضافة onmessage معالج الحدث ذلك سوف تتلقى البيانات أرسلت إليها من قبل البرنامج النصي الرئيسي على زر انقر. داخل المعالج ، ونحن سلسل السلسلة المستلمة مع آخر وإرسال النتيجة مرة أخرى إلى البرنامج النصي الرئيسي.
  console.info ('تم إنشاء العامل') ؛ onmessage = (e) => postMessage ('Hi $ e.data') ؛  
 على عكس النص الرئيسي حيث كان علينا استخدام ث كائن مرجعي إلى الرجوع إلى موضوع عامل محدد الذي البرنامج النصي ثم يستخدم onmessage و postMessage طرق ، هناك لا حاجة لكائن مرجعي في مؤشر ترابط العامل للإشارة إلى الموضوع الرئيسي.
 رمز يعمل على النحو التالي. عندما يتم تحميل المتصفح index.html و, وحدة التحكم سوف تظهر "عامل خلق" رسالة في أقرب وقت عامل() يتم تنفيذ المنشئ في الموضوع الرئيسي, خلق عامل جديد.
 عند النقر فوق الزر الموجود في الصفحة ، ستحصل على "وردت من العامل: مرحبا جون" رسالة في وحدة التحكم ، والتي هي السلسلة التي كانت متسلسل في الخيط العامل مع البيانات المرسلة إليها ، ثم كان أرسلت مرة أخرى إلى البرنامج النصي الرئيسي.