Verification of complex forms

خلفية

عندما نقوم بتنفيذ أنظمة إدارة الواجهة الخلفية، غالبًا ما نواجه أشكالًا معقدة للغاية:

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

الخيار 1: في ملف vue

يتم تجميع جميع عناصر العرض والإخفاء والتحقق من الصحة والحصول على البيانات والإرسال والتخصيص والمنطق الآخر معًا

• وفقًا لنوع النموذج، استخدم v-if/v-show للتعامل مع عرض عناصر النموذج وإخفائها.
• في التحقق المخصص من elementui ، حدد ما إذا كان قد تم التحقق من صحة عنصر النموذج بناءً على نوع النموذج
• وفقًا لنوع النموذج، احصل على بيانات مختلفة وأرسلها إلى واجهات مختلفة
• كل المنطق المخصص الآخر

عيب

• فوضى
• فوضى
• لا تزال فوضوية
• يمكن أن يحتوي ملف vue بسهولة على 2000 سطر
• عندما حاولت إضافة نوع نموذج جديد، اكتشفت أنه ليس لدي أي نوع. من. تحت. يُسلِّم.

الخيار 2: مكونات منفصلة

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

1. المكونات الفرعية

يجب أن تحتوي جميع المكونات الفرعية على طريقتين validate و getData حتى يتمكن المكون الأصلي من الاتصال بها.

(١) طريقة validate

يستخدم للتحقق من عناصر النموذج الخاصة بمكوناته وإرجاع كائن promise

 vaildate ( ) {
    // 返回`elementUI`表单验证的结果（为`promise`对象）
    return this . $refs [ "ruleForm" ] . validate ( ) ;
} ,
    

(2) طريقة getData

توفير البيانات من المكونات الفرعية

 getData ( ) {
    // 返回子组件的form
    return this . ruleForm ;
} ,

2. المكون الأصلي

(1) وضع الاستراتيجية

استخدم نمط الإستراتيجية لتخزين والحصول على ref النموذج الفرعي (الطريقة المستخدمة للحصول على النموذج الفرعي) ووظيفة الإرسال . تم حذف الكثير من أحكام if-else .

data: {
  // type和ref名称的映射
  typeRefMap : {
      1 : "message" ,
      2 : "mail" ,
      3 : "apppush"
  } ,
  // type和提交函数的映射。不同类型，接口可能不同
  typeSubmitMap : {
      1 : data => alert ( `短信模板创建成功${ JSON . stringify ( data ) } ` ) ,
      2 : data => alert ( `邮件模板创建成功${ JSON . stringify ( data ) } ` ) ,
      3 : data => alert ( `push模板创建成功${ JSON . stringify ( data ) } ` )
  } ,
} 

(2) طريقة submit

يُستخدم للتحقق من صحة نموذج المكون الأصلي والفرعي، والحصول على البيانات الإجمالية، واستدعاء وظيفة إرسال النوع الحالي لإرسال البيانات

نظرًا لأن طريقة التحقق validate التحقق من نموذج elementUI يمكن أن تُرجع نتيجة promise ، فيمكنك استخدام خصائص promise للتعامل مع التحقق من النماذج الأصلية والفرعية. على سبيل المثال، يمكن للدالة then أن تُرجع كائن promise آخر، ويمكن catch الحصول reject والوعد Promise.all من كل then فوقه.

• لن يتم التحقق من النموذج الفرعي إلا بعد التحقق من النموذج الأصلي، ويكون هناك تسلسل.

   // 父表单验证通过才会验证子表单，存在先后顺序
  submitForm ( ) {
      const templateType = this . typeRefMap [ this . indexForm . type ] ;
      this . $refs [ "indexForm" ]
      . validate ( )
      . then ( res => {
          // 父表单验证成功后，验证子表单
          return this . $refs [ templateType ] . vaildate ( ) ;
      } )
      . then ( res => {
          // 全部验证通过
          // 获取整体数据
          const reqData = {
              // 获取子组件数据
              ... this . $refs [ templateType ] . getData ( ) ,
              ... this . indexForm
          } ;
          // 获取当前表单类型的提交函数，并提交
          this . typeSubmitMap [ this . indexForm . type ] ( reqData ) ;
      } )
      . catch ( err => {
          console . log ( err ) ;
      } ) ;
  } ,

• يتم التحقق من نموذج الوالدين ونموذج الطفل معًا

   submitForm1 ( ) {
    const templateType = this . typeRefMap [ this . indexForm . type ] ;
    const validate1 = this . $refs [ "indexForm" ] . validate ( ) ;
    const validate2 = this . $refs [ templateType ] . vaildate ( ) ;
    // 父子表单一起验证
    Promise . all ( [ validate1 , validate2 ] )
      . then ( res => {
        // 都通过时，发送请求
        const reqData = {
          ... this . $refs [ templateType ] . getData ( ) ,
          ... this . indexForm
        } ;
        this . typeSubmitMap [ this . indexForm . type ] ( reqData ) ;
      } )
      . catch ( err => {
        console . log ( err ) ;
      } ) ;
  } , 

عرض المشاريع عبر الإنترنت، ومشروع جيثب وأكواد المكونات

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

خارج الموضوع: بعد قراءة حساب مهندس الواجهة الأمامية: سؤال وجواب N حول مسار نمو مهندس الواجهة الأمامية، ألهمني كثيرًا. عندما تكون في حيرة من أمرك بشأن اتجاهك الفني وآفاقك، أو عندما تشتكي من أن مشروعك منخفض جدًا، أو عندما تشتكي من أنك تقوم بأعمال متكررة كل يوم، أو عندما يغمرك الظهور اللامتناهي للتقنيات الجديدة كل يوم ، يمكنك أيضًا إلقاء نظرة جادة على مشروعك .

• هل من الممكن إعادة اختراع عجلة المهام التي تتكرر كل يوم؟
• كومة التكنولوجيا منخفضة للغاية. هل يمكننا الانتقال بسلاسة إلى التقنيات الجديدة وتحسين كفاءة التطوير؟
• بغض النظر عن عدد التقنيات الجديدة التي تتعلمها، فسوف تعود في النهاية وتطبقها في المشاريع.

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

---

مشاعري تجاه كتابة هذا المقال: صعوبة التعبير عن هذه الأمور >> الصعوبة الفنية التي يتضمنها المقال نفسه