Рекомендации по использованию кода привязки формы jQuery в приложении

Question

У нас есть приложение с большим количеством вызовов jQuery JSON для кода на стороне сервера.Из-за этого у нас есть большой объем кода привязки для анализа ответов и привязки соответствующих значений к форме.Это вопрос, состоящий из двух частей.

1. Каков рекомендуемый подход для работы с большим количеством форм, все из которых содержат разные данные?Прямо сейчас мы пытаемся использовать структурированный подход при настройке js "класса" для каждой страницы, с инициализацией, wireClickEvents и т.д..постараться, чтобы все соответствовало действительности.

2. Есть ли какие-либо "лучшие практики" по созданию повторяющегося кода jQuery или любого типа рекомендуемой структуры, отличной от простого добавления набора функций в js-файл?

Answer 1

Не на 100% уверен, что вы спрашиваете, но лично, и я использую MochiKit, я создаю JavaScript " классы " (или виджеты, если хотите) для каждой существенной структуры пользовательского интерфейса на стороне клиента. Они, конечно, знают, как заполнить себя данными.

Я не знаю, что еще можно сказать - написание кода пользовательского интерфейса для браузера на JavaScript ничем не отличается от написания кода пользовательского интерфейса для других типов приложений, насколько мне известно. Создавайте классы и создавайте их экземпляры по мере необходимости, заполняйте их данными, заставляйте их создавать события и т. Д.

Я не сплю по ночам? :) <Ч>

РЕДАКТИРОВАТЬ: Другими словами, да - делать то, что вы делаете, по большей части. Я вижу, что слишком много начинающих хакеров JavaScript пишут кучу плохо связанных функций, которые, кажется, не являются частью чего-то особенного, кроме того, что все они находятся в одном файле. Надеюсь, что это имеет смысл.

Answer 2

Вероятно, вам следует изучить такой фреймворк, как knockout.js Таким образом, вы можете просто обновить свои модели, и формы обновятся автоматически.

Answer 3

Я думаю, что у вас есть несколько проблем. Первый вопрос заключается в том, как структурировать код javascript, т. Е. Как построить пространства имен, чтобы вы не боролись со столкновениями имен или не называли свои функции как

form1validate
form1aftersubmit
form2validate
form2aftersubmit

Одним из проверенных шаблонов для модулей в javascript является использование анонимной функции для создания новой области именования. Основная идея показана в следующем коде

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

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

Я думаю, что эта запись в блоге является хорошей введение.

Второй вопрос, с которым вы сталкиваетесь, - как избежать повторений в коде JavaScript. У вас есть пара оружия против этого.

<Ол>

функции - это очевидно, но часто забывают реорганизовать общий код в функции, где это можно сделать. В вашем случае это будут функции для копирования значений из ответа json в формы и тому подобное

функция более высокого порядка - или функции как данные - или обратный вызов, как их часто называют в javascript. Это самое мощное оружие в javascript. В случае обработки форм и ajax вы можете использовать обратный вызов, чтобы избежать повторения в потоке управления вашими формами.

Позвольте мне создать пример из моей головы (используя 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)
   }