كيفية إنشاء واجهات بطلاقة الطريق السهل مع الفانيليا جافا سكريبت

واجهات بطلاقة تجعل رمزك أكثر قابلية للقراءة ، والأهم من ذلك ، أكثر متعة للعمل مع. سنبني مكتبة معالجة DOM صغيرة مع واجهة بطلاقة لإظهار كيف يمكن لهذه التقنية البسيطة تحسين نمط الشفرة وفعاليتها.

قد لا تكون هناك حاجة jQuery لمعظم تطبيقات جافا سكريبت الحديثة ، ولكن لا يزال بإمكاننا الاستفادة من ميزات تصميم أفضل في مشاريعنا الخاصة!

واجهات بطلاقة هي شيء جميل.

أعني ، عندما تأخذ شيء مثل هذا:

ومقارنتها بهذا:

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

ألا يبدو المثال الثاني أشبه بجزء HTML الفعلي الذي تنشئه الشفرة؟ حتى إذا لم تكن لديك مشكلة في قراءة المثال الأول ، فإن وجود تعليمات برمجية لإنشاء HTML يقرأ مثل ما يحدث فعليًا والأعشاش مثل عناصر HTML يساعدك على رؤية ما يجري بشكل أكثر وضوحًا في لمحة.

تذكر أن الأمر لا يتعلق فقط بكيف يمكنك إنشاء التعليمات البرمجية الخاصة بك أو ما الحيل الرائعة التي يمكنك القيام بها بها والتي تهمك ؛ مع الأخذ في الاعتبار كيف يمثل الكود الخاص بك المنتج النهائي بوضوح مهم أيضًا. وأود أن أقول element.addId ('id') يصور بشكل حدسي ما يجري وراء الكواليس أكثر من element.id = 'id'.

بالإضافة إلى أنه ليس من الممتع حقًا كتابة كل تلك الإعلانات المتغيرة ، وعلامات المساواة ، والفاصلة المنقوطة.

... من الواضح أن الشيء الأخير هو مجرد رأيي المتواضع (لكن الدقيق) ...

مصدر الصورة: يوتيوب
بالمناسبة ، الأطفال ، دائما استخدام الفاصلة المنقوطة - أندريا جياممارشي ، إعادة صياغة

واجهات بطلاقة ، د

أولا ، ما هي واجهة بطلاقة؟

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

دعنا نقول أن عنصر القائمة يحتوي على أزرار لتنفيذ إجراءات مختلفة لكل مهمة ، مثل وضع علامة عليها كاملة. على افتراض وجود نوع من ثبات البيانات على الواجهة الخلفية ، فإليك ما يمكن أن يبدو عليه هذا مع jQuery:

تجعل الواجهة بطلاقة الشفرة أكثر إحكاما وقراءة بكثير مما لو كانت غير ذلك.

كيفية إنشاء واجهة بسيطة بطلاقة

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

سنبني مكتبة صغيرة لإضافة عناصر HTML إلى مستند وتعديلها لأن العمل مع DOM يمثل حالة استخدام كبيرة لهذا النوع من الأشياء.

الخطوة 1: تحديد المنشئ

أفضل استخدام مُنشئ النمط القديم مع الأساليب المُعلنة في النموذج الأولي إلى بناء جملة فئة ES2015 ، لأن النزول من الحديقة الخاصة بي ، والأهم من ذلك ، لأنني أتفق مع Eric Elliott في أن هذه الفئة في JavaScript معيبة بشكل أساسي.

سنقوم فقط بصنع غلاف حول عنصر HTML عادي للبساطة. إذا كانت الوسيطة التي تم تمريرها إلى المُنشئ هي مثيل لواجهة HTMLElement DOM من المستوى الثاني ، فسنقوم فقط بلفها بالكائن. وإلا ، يجب أن تكون سلسلة بحيث نستخدم document.createElement لعملها.

سنضيف أيضًا طريقة إنشاء للاتصال بالمنشئ والسماح بسلسلة فورية.

إن استخدام HtmlElement.create لا يسمح لك بسلسلة إنشاء العنصر الخاص بك في المثال أعلاه فحسب ، بل يعفيك أيضًا من الاضطرار إلى تذكر استخدام الجديد ، وهو مصدر شائع للأخطاء.

الخطوة 2: طرق لإضافة سمات ومحتوى نصي

الآن ، دعونا نحدد طرق السمات المستخدمة في المثال. لاحظ استخدام بناء جملة المعلمة بقية ES2015 في addClasses. سنقوم أيضًا بتعيين خاصية textContent الخاصة بالعنصر واستخدام تقييم الاختصار مع || و && عوامل التشغيل للحالات التي تكون فيها الخصائص ذات الصلة غير محددة. سيكون ذلك مناسبًا عندما نضيف طرقًا لإنشاء عناصر فرعية ، في حالة عدم رغبتنا في تحديد جميع الخصائص لكل عنصر فرعي.

الآن يمكنك إنشاء عنصر ومعرف وأي عدد من الفئات سلسلة طريقة واحدة لطيفة.

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

الخطوة 3: إضافة طرق لعشاق العناصر الفرعية

هذه الطرق تفعل بالضبط كما هو معلن ، إضافة عنصر فرعي واحد أو أكثر إلى الأصل.

الخطوة 4: طرق لتحديد وإلحاق العناصر

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

الخطوة 5: ضعها جميعًا معًا

إليك "الفصل" الكامل.

المضي قدما: ماذا بعد؟

الآن وقد رأينا تطبيقًا أساسيًا لواجهة بطلاقة ، أصبح من السهل إجراء إضافات وتحسينات لتوسيع الوظائف.

اسمحوا لي أن أعرف في الردود ما إذا كان هذا مفيدًا ، وكيف يمكنك استخدام واجهات بطلاقة لتحسين مشاريعك في المستقبل!