مولدات JavaScript: أنماط متقدمة للتكرار غير المتزامن وآلات الحالة

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

فهم مولدات JavaScript

قبل الخوض في الأنماط المتقدمة، دعنا نلخص بإيجاز أساسيات مولدات JavaScript.

ما هي المولدات؟

المولد هو نوع خاص من الدوال يمكن إيقافه مؤقتًا واستئنافه، مما يسمح لك بالتحكم في تدفق تنفيذ الدالة. يتم تعريف المولدات باستخدام الصيغة function*، وتستخدم الكلمة المفتاحية yield لإيقاف التنفيذ مؤقتًا وإرجاع قيمة.

المفاهيم الأساسية:

• function*: تشير إلى دالة مولدة.
• yield: توقف تنفيذ الدالة مؤقتًا وتعيد قيمة.
• next(): تستأنف تنفيذ الدالة وتمرر اختياريًا قيمة مرة أخرى إلى المولد.
• return(): تنهي المولد وتعيد قيمة محددة.
• throw(): ترمي خطأ داخل الدالة المولدة.

مثال:

            
function* numberGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

const generator = numberGenerator();
console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: undefined, done: true }

            

              
                Copy
              
            
          

التكرار غير المتزامن مع المولدات

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

المشكلة: جحيم الاستدعاءات (Callback Hell) والوعود (Promises)

غالبًا ما تتضمن البرمجة غير المتزامنة التقليدية في JavaScript استدعاءات (callbacks) أو وعود (promises). بينما تعمل الوعود على تحسين الهيكل مقارنة بالاستدعاءات، إلا أن إدارة التدفقات غير المتزامنة المعقدة لا تزال مرهقة.

توفر المولدات، جنبًا إلى جنب مع الوعود أو async/await، طريقة أنظف وأكثر قابلية للقراءة للتعامل مع التكرار غير المتزامن.

المكررات غير المتزامنة (Async Iterators)

توفر المكررات غير المتزامنة واجهة قياسية للتكرار عبر مصادر البيانات غير المتزامنة. وهي تشبه المكررات العادية ولكنها تستخدم الوعود للتعامل مع العمليات غير المتزامنة.

تحتوي المكررات غير المتزامنة على تابع next() يعيد وعدًا (promise) يتم حله إلى كائن بخاصيتي value و done.

مثال:

            
async function* asyncNumberGenerator() {
  yield await Promise.resolve(1);
  yield await Promise.resolve(2);
  yield await Promise.resolve(3);
}

async function consumeGenerator() {
  const generator = asyncNumberGenerator();
  console.log(await generator.next()); // { value: 1, done: false }
  console.log(await generator.next()); // { value: 2, done: false }
  console.log(await generator.next()); // { value: 3, done: false }
  console.log(await generator.next()); // { value: undefined, done: true }
}

consumeGenerator();

            

              
                Copy
              
            
          

حالات الاستخدام الواقعية للتكرار غير المتزامن

• بث البيانات من واجهة برمجة تطبيقات (API): جلب البيانات على شكل أجزاء من الخادم باستخدام ترقيم الصفحات. تخيل منصة وسائط اجتماعية حيث تريد جلب المنشورات على دفعات لتجنب إرهاق متصفح المستخدم.
• معالجة الملفات الكبيرة: قراءة ومعالجة الملفات الكبيرة سطرًا بسطر دون تحميل الملف بأكمله في الذاكرة. هذا أمر حاسم في سيناريوهات تحليل البيانات.
• تدفقات البيانات في الوقت الفعلي: التعامل مع البيانات في الوقت الفعلي من WebSocket أو تدفق أحداث يرسلها الخادم (SSE). فكر في تطبيق لنتائج المباريات الرياضية الحية.

مثال: بث البيانات من واجهة برمجة تطبيقات (API)

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

            
async function* paginatedDataFetcher(url, pageSize = 10) {
  let page = 1;
  let hasMore = true;

  while (hasMore) {
    const response = await fetch(`${url}?page=${page}&pageSize=${pageSize}`);
    const data = await response.json();

    if (data.length === 0) {
      hasMore = false;
      return;
    }

    for (const item of data) {
      yield item;
    }

    page++;
  }
}

async function consumeData() {
  const dataStream = paginatedDataFetcher('https://api.example.com/data');

  for await (const item of dataStream) {
    console.log(item);
    // Process each item as it arrives
  }

  console.log('Data stream complete.');
}

consumeData();

            

              
                Copy
              
            
          

في هذا المثال:

• paginatedDataFetcher هو مولد غير متزامن يجلب البيانات من واجهة برمجة تطبيقات باستخدام ترقيم الصفحات.
• عبارة yield item توقف التنفيذ مؤقتًا وتعيد كل عنصر بيانات.
• تستخدم دالة consumeData حلقة for await...of للتكرار عبر تدفق البيانات بشكل غير متزامن.

يسمح لك هذا النهج بمعالجة البيانات فور توفرها، مما يجعله فعالاً للتعامل مع مجموعات البيانات الكبيرة.

آلات الحالة مع المولدات

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

ما هي آلات الحالة؟

تُستخدم آلات الحالة لنمذجة الأنظمة التي لها عدد محدود من الحالات والانتقالات بين تلك الحالات. وتستخدم على نطاق واسع في هندسة البرمجيات لتصميم الأنظمة المعقدة.

المكونات الرئيسية لآلة الحالة:

• الحالات (States): تمثل ظروفًا أو أوضاعًا مختلفة للنظام.
• الأحداث (Events): تطلق الانتقالات بين الحالات.
• الانتقالات (Transitions): تحدد قواعد الانتقال من حالة إلى أخرى بناءً على الأحداث.

تطبيق آلات الحالة مع المولدات

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

يمكن لكل عبارة yield في المولد أن تمثل حالة، ويمكن استخدام التابع next() لإطلاق الانتقالات بين الحالات.

مثال: آلة حالة بسيطة لإشارة المرور

لنفكر في آلة حالة بسيطة لإشارة المرور بثلاث حالات: RED (أحمر)، YELLOW (أصفر)، و GREEN (أخضر).

            
function* trafficLightStateMachine() {
  let state = 'RED';

  while (true) {
    switch (state) {
      case 'RED':
        console.log('Traffic Light: RED');
        state = yield;
        break;
      case 'YELLOW':
        console.log('Traffic Light: YELLOW');
        state = yield;
        break;
      case 'GREEN':
        console.log('Traffic Light: GREEN');
        state = yield;
        break;
      default:
        console.log('Invalid State');
        state = yield;
    }
  }
}

const trafficLight = trafficLightStateMachine();
trafficLight.next(); // Initial state: RED
trafficLight.next('GREEN'); // Transition to GREEN
trafficLight.next('YELLOW'); // Transition to YELLOW
trafficLight.next('RED'); // Transition to RED

            

              
                Copy
              
            
          

في هذا المثال:

• trafficLightStateMachine هو مولد يمثل آلة حالة إشارة المرور.
• المتغير state يحمل الحالة الحالية لإشارة المرور.
• عبارة yield توقف التنفيذ مؤقتًا وتنتظر انتقال الحالة التالي.
• يُستخدم التابع next() لإطلاق الانتقالات بين الحالات.

أنماط متقدمة لآلات الحالة

1. استخدام الكائنات لتعريف الحالات

لجعل آلة الحالة أكثر قابلية للصيانة، يمكنك تعريف الحالات ككائنات لها إجراءات مرتبطة بها.

            
const states = {
  RED: {
    name: 'RED',
    action: () => console.log('Traffic Light: RED'),
  },
  YELLOW: {
    name: 'YELLOW',
    action: () => console.log('Traffic Light: YELLOW'),
  },
  GREEN: {
    name: 'GREEN',
    action: () => console.log('Traffic Light: GREEN'),
  },
};

function* trafficLightStateMachine() {
  let currentState = states.RED;

  while (true) {
    currentState.action();
    const nextStateName = yield;
    currentState = states[nextStateName] || currentState; // Fallback to current state if invalid
  }
}

const trafficLight = trafficLightStateMachine();
trafficLight.next(); // Initial state: RED
trafficLight.next('GREEN'); // Transition to GREEN
trafficLight.next('YELLOW'); // Transition to YELLOW
trafficLight.next('RED'); // Transition to RED

            

              
                Copy
              
            
          

2. التعامل مع الأحداث عبر الانتقالات

يمكنك تحديد انتقالات صريحة بين الحالات بناءً على الأحداث.

            
const states = {
  RED: {
    name: 'RED',
    action: () => console.log('Traffic Light: RED'),
    transitions: {
      TIMER: 'GREEN',
    },
  },
  YELLOW: {
    name: 'YELLOW',
    action: () => console.log('Traffic Light: YELLOW'),
    transitions: {
      TIMER: 'RED',
    },
  },
  GREEN: {
    name: 'GREEN',
    action: () => console.log('Traffic Light: GREEN'),
    transitions: {
      TIMER: 'YELLOW',
    },
  },
};

function* trafficLightStateMachine() {
  let currentState = states.RED;

  while (true) {
    currentState.action();
    const event = yield;
    const nextStateName = currentState.transitions[event];
    currentState = states[nextStateName] || currentState; // Fallback to current state if invalid
  }
}

const trafficLight = trafficLightStateMachine();
trafficLight.next(); // Initial state: RED

// Simulate a timer event after some time
setTimeout(() => {
  trafficLight.next('TIMER'); // Transition to GREEN
  setTimeout(() => {
    trafficLight.next('TIMER'); // Transition to YELLOW
    setTimeout(() => {
      trafficLight.next('TIMER'); // Transition to RED
    }, 2000);
  }, 5000);
}, 5000);

            

              
                Copy
              
            
          

حالات الاستخدام الواقعية لآلات الحالة

• إدارة حالة مكونات واجهة المستخدم: إدارة حالة مكون واجهة مستخدم، مثل زر (على سبيل المثال، IDLE 'خامل'، HOVER 'تحويم'، PRESSED 'مضغوط'، DISABLED 'معطل').
• إدارة سير العمل: تطبيق تدفقات عمل معقدة، مثل معالجة الطلبات أو الموافقة على المستندات.
• تطوير الألعاب: التحكم في سلوك كيانات اللعبة (على سبيل المثال، IDLE 'خامل'، WALKING 'يمشي'، ATTACKING 'يهاجم'، DEAD 'ميت').

معالجة الأخطاء في المولدات

معالجة الأخطاء أمر حاسم عند العمل مع المولدات، خاصة عند التعامل مع العمليات غير المتزامنة أو آلات الحالة. توفر المولدات آليات للتعامل مع الأخطاء باستخدام كتلة try...catch والتابع throw().

استخدام try...catch

يمكنك استخدام كتلة try...catch داخل دالة مولدة لالتقاط الأخطاء التي تحدث أثناء التنفيذ.

            
function* errorGenerator() {
  try {
    yield 1;
    throw new Error('Something went wrong');
    yield 2; // This line will not be executed
  } catch (error) {
    console.error('Error caught:', error.message);
    yield 'Error handled';
  }
  yield 3;
}

const generator = errorGenerator();
console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // Error caught: Something went wrong
// { value: 'Error handled', done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: undefined, done: true }

            

              
                Copy
              
            
          

استخدام throw()

يسمح لك التابع throw() برمي خطأ إلى المولد من الخارج.

            
function* throwGenerator() {
  try {
    yield 1;
    yield 2;
  } catch (error) {
    console.error('Error caught:', error.message);
    yield 'Error handled';
  }
  yield 3;
}

const generator = throwGenerator();
console.log(generator.next()); // { value: 1, done: false }
console.log(generator.throw(new Error('External error'))); // Error caught: External error
// { value: 'Error handled', done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: undefined, done: true }

            

              
                Copy
              
            
          

معالجة الأخطاء في المكررات غير المتزامنة

عند العمل مع المكررات غير المتزامنة، تحتاج إلى التعامل مع الأخطاء التي قد تحدث أثناء العمليات غير المتزامنة.

            
async function* asyncErrorGenerator() {
  try {
    yield await Promise.reject(new Error('Async error'));
  } catch (error) {
    console.error('Async error caught:', error.message);
    yield 'Async error handled';
  }
}

async function consumeGenerator() {
  const generator = asyncErrorGenerator();
  console.log(await generator.next()); // Async error caught: Async error
  // { value: 'Async error handled', done: false }
}

consumeGenerator();

            

              
                Copy
              
            
          

أفضل الممارسات لاستخدام المولدات

• استخدم المولدات لتدفق التحكم المعقد: المولدات هي الأنسب للسيناريوهات التي تحتاج فيها إلى تحكم دقيق في تدفق تنفيذ الدالة.
• اجمع بين المولدات والوعود أو async/await للعمليات غير المتزامنة: يتيح لك هذا كتابة تعليمات برمجية غير متزامنة بأسلوب أكثر تزامنًا وقابلية للقراءة.
• استخدم آلات الحالة لإدارة الحالات والانتقالات المعقدة: يمكن أن تساعدك آلات الحالة على نمذجة وتطبيق الأنظمة المعقدة بطريقة منظمة وقابلة للصيانة.
• تعامل مع الأخطاء بشكل صحيح: تعامل دائمًا مع الأخطاء داخل المولدات الخاصة بك لمنع السلوك غير المتوقع.
• اجعل المولدات صغيرة ومركزة: يجب أن يكون لكل مولد غرض واضح ومحدد جيدًا.
• وثّق مولداتك: قدم توثيقًا واضحًا لمولداتك، بما في ذلك الغرض منها ومدخلاتها ومخرجاتها. هذا يجعل الكود أسهل في الفهم والصيانة.

الخاتمة

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