0Pricing
JavaScript Academy · درس

تدفقات التحويل

عدّلوا البيانات أثناء مرورها عبر مسار المعالجة.

تدفقات التحويل درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ما المقصود بـ TransformStream؟

يقع TransformStream بين جانب قابل للقراءة وجانب قابل للكتابة. فتُحوَّل الأجزاء المكتوبة إلى الداخل ثم تُصدر إلى الخارج — وهي مرحلة أنبوبية تُعيّن البيانات أو تصفّيها أو تعيد تشكيلها أثناء التدفق.

البنية

له طرفان: writable، حيث تدخل البيانات، وreadable، حيث تخرج البيانات المحوّلة.

const ts = new TransformStream();
console.log(ts.writable, ts.readable);

الطريقة transform

حدّد السلوك باستخدام دالة transform(chunk, controller). واستدعِ controller.enqueue() لإصدار الناتج.

const upper = new TransformStream({
  transform(chunk, controller) {
    controller.enqueue(chunk.toUpperCase());
  }
});

مدخل واحد ومخرجات متعددة

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

const splitter = new TransformStream({
  transform(line, controller) {
    for (const word of line.split(" ")) controller.enqueue(word);
  }
});

التصفية باستخدام التحويلات

ما عليك سوى عدم إدراج الأجزاء التي تريد إسقاطها.

const onlyEven = new TransformStream({
  transform(n, controller) {
    if (n % 2 === 0) controller.enqueue(n);
  }
});

الطريقة flush

تُشغَّل flush(controller) مرة واحدة عند انتهاء الإدخال، وهي مثالية لإصدار البيانات المتبقية المخزنة مؤقتًا أو جزء نهائي.

const ts = new TransformStream({
  transform(c, ctrl) { ctrl.enqueue(c); },
  flush(ctrl) { ctrl.enqueue("[END]"); }
});

التخزين المؤقت عبر الأجزاء

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

let buffer = "";
new TransformStream({
  transform(chunk, ctrl) {
    buffer += chunk;
    const parts = buffer.split("\n");
    buffer = parts.pop();
    for (const line of parts) ctrl.enqueue(line);
  },
  flush(ctrl) { if (buffer) ctrl.enqueue(buffer); }
});

تدفقات التحويل المضمّنة

توفّر المنصة TextDecoderStream وTextEncoderStream وCompressionStream/DecompressionStream كتدفقات تحويل جاهزة.

const gzip = new CompressionStream("gzip");
const compressed = inputStream.pipeThrough(gzip);

الربط باستخدام pipeThrough

يربط readable.pipeThrough(transform) مصدرًا بتحويل، ويعيد ناتج القراءة الخاص بالتحويل، ليكون جاهزًا للمرحلة التالية.

const out = sourceStream
  .pipeThrough(new TextDecoderStream())
  .pipeThrough(upper);

التحويلات غير المتزامنة

قد تكون transform غير متزامنة؛ فاستخدم await داخلها لاستدعاء واجهات API أو تنفيذ عمل غير متزامن لكل جزء. وينتظر التدفق الوعد.

new TransformStream({
  async transform(chunk, ctrl) {
    const result = await process(chunk);
    ctrl.enqueue(result);
  }
});

انتشار الأخطاء

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

new TransformStream({
  transform(chunk, ctrl) {
    if (!valid(chunk)) throw new Error("bad chunk");
    ctrl.enqueue(chunk);
  }
});

اختبار سريع

اختبروا تدفقات التحويل.

مراجعة: تدفقات التحويل

أنشأتم عمليات تحويل باستخدام transform وflush، وطبّقتم التعيين والتصفية والتوسيع على الأجزاء، وخزّنتم البيانات مؤقتًا عبر حدود الأجزاء، واستخدمتم أدوات مدمجة مثل CompressionStream، ووصلتم المراحل باستخدام pipeThrough. التالي: الضغط العكسي وتمرير البيانات.

الأسئلة الشائعة

هل درس «تدفقات التحويل» مجاني؟

نعم — نص درس «تدفقات التحويل» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «تدفقات التحويل»؟

عدّلوا البيانات أثناء مرورها عبر مسار المعالجة. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «تدفقات التحويل»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. التدفقات القابلة للقراءة
  2. استجابات fetch المتدفقة
  3. تدفقات التحويل
  4. الضغط العكسي وتمرير التدفقات
← العودة إلى JavaScript Academy