أفضل الممارسات مع كود ربط نموذج jQuery في التطبيق

Question

لدينا تطبيق يحتوي على قدر لا بأس به من مكالمات jQuery JSON إلى الكود الجانبي للخادم.ولهذا السبب، لدينا كمية كبيرة من التعليمات البرمجية الملزمة لتحليل الاستجابات وربط القيم المناسبة بالنموذج.هذا سؤال من قسمين.

1. ما هو الأسلوب الموصى به للتعامل مع عدد كبير من النماذج التي تحتوي جميعها على بيانات مختلفة.نحاول الآن اتباع نهج منظم في إعداد "فئة" js لكل صفحة، باستخدام init وwireClickEvents وما إلى ذلك.لمحاولة جعل كل شيء مطابقًا.

2. هل هناك أي "أفضل الممارسات" لإنشاء كود jQuery متكرر أو أي نوع من البنية الموصى بها بخلاف مجرد إلقاء مجموعة من الوظائف في ملف js؟

Answer 1

لست متأكدًا بنسبة 100٪ مما تطلبه، ولكن شخصيًا، وأنا أستخدم MochiKit، أقوم بإنشاء "فئات" JavaScript (أو عناصر واجهة المستخدم، إذا كنت تفضل ذلك) لكل بنية مهمة لواجهة المستخدم من جانب العميل.وهؤلاء يعرفون، بالطبع، كيفية ملء أنفسهم بالبيانات.

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

هل أنا مستيقظ في الليل على هذا؟:)

---

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

Answer 2

ربما ينبغي عليك النظر في إطار عمل مثل knockout.js بهذه الطريقة يمكنك فقط تحديث النماذج الخاصة بك وسيتم تحديث النماذج تلقائيًا.

Answer 3

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

form1validate
form1aftersubmit
form2validate
form2aftersubmit

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

(function() {
  var foo = 1;
})();

(function() {
  if(foo == 1) alert("namespace separation failed!")
})();

أنا أعتقد ذلك دخول بلوق هي مقدمة جيدة.

السؤال الثاني الذي تواجهه هو كيفية تجنب كل التكرار في كود جافا سكريبت.لديك بضعة أسلحة ضد هذا.

1. الوظائف - هذه الطبقات واضحة ولكن غالبًا ما يتم نسيان إعادة هيكلة التعليمات البرمجية الشائعة إلى وظائف يمكن القيام بها.في حالتك ستكون هذه وظائف لنسخ القيم من استجابة json إلى النماذج وما شابه
2. وظيفة ذات ترتيب أعلى - أو وظائف كبيانات - أو رد اتصال، كما يطلق عليها غالبًا في جافا سكريبت.هذه هي أقوى الأسلحة في جافا سكريبت.في حالة التعامل مع النماذج والأجاكس، يمكنك استخدام رد الاتصال لتجنب التكرار في تدفق التحكم في النماذج الخاصة بك.

اسمحوا لي أن أقوم بإنشاء مثال من رأسي (باستخدام jquery للإقناع)

// this is a validator for one form
   var form1validator = function() {
     if($("input[name=name]",this).attr("value").length < 1 &&
        $("input[name=organisation]",this).attr("value").length < 1)
       return "Either name or organisation required" 
   }

   // and this for a second form
   var form2validator = function() {
     if($("input[name=age]",this).attr("value").length < 21
       return "Age of 21 required"
   }

   // and a function to display a validation result
   var displayResult = function(r) {
     $(this).prepend("<span></span>").text(r);
   }

   // we use them as higher order functions like that

   $("#form1").onSubmit(validator(form1validator, displayResult, function() {
     //on submit
     ...send some xhr request or like that
   });

   $("#form2").onSubmit(validator(form2validator, displayResult, function() {
     this.submit() // simply submit form
   });

   $("#form1b").onSubmit(validator(form1validator, function(r) {
     alert("There was an validation error " + r);
   }, function() {
     //on submit
     ...send some xhr request or like that
   });


   // the validator function itself would be defined as

   function validator(formValidator, displayResult, onSubmit) {
     var r = formValidator.apply(this)
     if(typeof(r) === 'undefined')
       onSubmit(this)
     else
       displayResult(r)
   }