TypeScript Academy · درس

أساسيات نمط Builder

أنشئوا كائنات معقدة خطوةً بخطوة

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

لماذا نستخدم Builder؟

تحتاج بعض الكائنات إلى حقول كثيرة، ويكون إنشاؤها باستخدام مُنشئ ضخم مليء بالوسائط الموضعية عرضة للأخطاء. ينشئ نمط Builder كائنًا معقدًا خطوةً بخطوة، باستدعاء مسمّى في كل مرة.

الكائن الذي نريده

تخيلوا طلب HTTP يحتوي على عنوان URL وطريقة وسمات ونص. إن تمرير كل ذلك إلى مُنشئ واحد يصعب قراءته. يتيح لكم Builder ضبط كل جزء باستخدام طريقة ذات اسم واضح.

interface HttpRequest {
  url: string;
  method: string;
  headers: Record<string, string>;
  body?: string;
}

فئة Builder أساسية

يحتفظ Builder بحالة جزئية داخليًا، ويعرض طرق ضبط. وتعدّل كل طريقة ضبط الحالة الداخلية، وتكون مسؤولة عن حقل واحد.

class RequestBuilder {
  private url = "";
  private method = "GET";
  private headers: Record<string, string> = {};
  private body?: string;
}

تعيد سلسلة الطرق this

الحيلة التي تجعل قراءة Builders سلسة هي إرجاع this من كل طريقة ضبط. وبما أن كل طريقة تُرجع Builder نفسه، يمكنكم ربط الاستدعاءات معًا.

class RequestBuilder {
  private url = "";
  setUrl(u: string): this {
    this.url = u;
    return this;
  }
}

إضافة مزيد من الخطوات

تتبع كل خطوة إعداد النمط نفسه: تخزين القيمة، ثم إرجاع this. لاحظوا أن نوع الإرجاع this يحافظ على نوع Builder الفعلي عبر السلسلة.

  setMethod(m: string): this {
    this.method = m;
    return this;
  }
  addHeader(k: string, v: string): this {
    this.headers[k] = v;
    return this;
  }

الطريقة build()

وأخيرًا، تجمع طريقة build() الحالة المتراكمة في الكائن المكتمل. وهذه هي الطريقة الوحيدة التي لا تُرجع Builder.

  build(): HttpRequest {
    return {
      url: this.url,
      method: this.method,
      headers: this.headers,
      body: this.body,
    };
  }

استخدام Builder

تُقرأ عملية الإنشاء الآن كأنها جملة. فكل خطوة مسمّاة، والترتيب مرن، ولا تحتاجون أبدًا إلى التعامل مع وسائط موضعية.

const req = new RequestBuilder()
  .setUrl("https://api.test")
  .setMethod("POST")
  .addHeader("Accept", "application/json")
  .build();
console.log(req.method);

مثال كامل قابل للتشغيل

إليكم نسخة مكتفية ذاتيًا يمكنكم تشغيلها. يجمع Builder الحالة، وتنتج build() الكائن النهائي الذي يبدو غير قابل للتغيير.

interface Req { url: string; method: string }
class B {
  private url = ""; private method = "GET";
  setUrl(u: string): this { this.url = u; return this; }
  setMethod(m: string): this { this.method = m; return this; }
  build(): Req { return { url: this.url, method: this.method }; }
}
const r = new B().setUrl("/users").setMethod("POST").build();
console.log(r.url, r.method);

تحصلون على القيم الافتراضية مجانًا

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

const getReq = new B().setUrl("/health").build();
console.log(getReq.method); // GET (default)

قابلية القراءة في مقابل المُنشئات

قارنوا بين new Req("/x", "POST", {}, undefined) وBuilder المتسلسل. توضح نسخة Builder الهدف في كل خطوة، وتتجنب العناصر النائبة الغامضة undefined.

متى تلجؤون إليه

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

فحص سريع

فحص سريع لهذا الدرس.

مراجعة

يقوم المنشئ ببناء الكائنات المعقدة خطوةً بخطوة. تخزّن دوال التعيين قيمة كل حقل وتعيد this لتمكين التسلسل، بينما تجمع build() الكائن النهائي. تتألق المنشئات عندما تحتوي الكائنات على أجزاء اختيارية كثيرة.

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

هل درس «أساسيات نمط Builder» مجاني؟

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

ماذا ستتعلم في «أساسيات نمط Builder»؟

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

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

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

كم من الوقت يستغرق درس «أساسيات نمط Builder»؟

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

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

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

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

← العودة إلى TypeScript Academy