Я думаю, что у вас есть несколько проблем. Первый вопрос заключается в том, как структурировать код 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)
}