потянув массив объектов

Question

В настоящее время у меня есть сценарий проверки, в котором есть выборка <input> элементов, хранящихся в объектах со свойствами, такими как «id», «type», «isRequired» и «isValid». В настоящее время у меня есть функция setup(), которая выполняет следующие действия:

function setup(obj) {
    obj.getElement().onkeyup = function() {validate(obj)}
} 

Чтобы запустить эту функцию setup() на всех моих входных объектах, мне нужно выполнить следующую addEvents() функцию

function setEvents() {
    setup(firstName)
    setup(lastName)
    setup(email)
    setup(dateOfBirth)
}

Я помогаю создать систему, в которой есть несколько страниц, кроме форм, поэтому я бы предпочел, чтобы мне не приходилось вводить это для каждого объекта. Есть ли способ, которым я могу собрать массив всех объектов, которые основаны на определенном шаблоне объекта? Таким образом, я мог бы перебрать массив и применить настройки к каждому объекту в одной функции. Если нет, есть ли альтернативы?

(p.s. В последнее время я задавал так много объектно-ориентированных (о, иногда я ломаю голову) вопросов, потому что это мой первый раз, когда я возился с объектами)

--- Редактировать ---

шаблон объекта, на который я ссылаюсь, выглядит примерно так:

function input(id,isRequired,type) {
    this.id = id
    this.isRequired = isRequired
    this.type = type
}

затем следует

firstName = new input('firstName',true,'alpha')

Answer 1

Как я уже сказал в своем комментарии, вы можете добавить элемент в массив при его создании:

var inputs = [];
var firstName = new input('firstName',true,'alpha');
inputs.push(firstName);

Это пока не очень удобно. Но вы можете создать другой объект, который управляет всем этим:

var InputManager = {
    elements: [],
    create: function(/* arguments here */) {
        var n = new input(/* arguments here */);
        this.elements.push(n);
        return n;
    },
    setup: function() {
        for(var i = this.elements.length; i--;) {
            (function(obj) {
                obj.getElement().onkeyup = function() {validate(obj)};
            }(this.elements[i]));
        }
    }
};

, с которой вы можете сделать:

var firstName = InputManager.create('firstName',true,'alpha');
// etc.
InputManager.setup();

Что-то в этом роде. Я думаю, что это будет вполне объектно-ориентированный путь. Если у вас есть коллекция объектов, у вас часто есть другой объект, который обрабатывает функции, которые должны выполняться над всеми этими объектами.

Answer 2

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

Вы можетефактически используйте DOM в ваших интересах!

На все формы на вашей странице можно ссылаться с помощью document.forms[index].В качестве альтернативы вы также можете ссылаться на именованную форму с помощью document.formName.

Посмотрите на этот jsfiddle пример использования последнего.

ОБНОВЛЕНИЕ

Чтение вашего обновления и тот факт, что вам нужен способ создания объектов ввода и настройки проверки.Я обновил свою скрипку с другим подходом.

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

Единственное требование - вы должны добавить Valididation первым после загрузки страницы.Поэтому идентификатор сначала обновляется.

Решение также безопасно для JS, а это означает, что если у пользователя нет JS, кроме проверки, никаких других событий не произойдет.

Answer 3

Как и в большинстве вопросов по javascript, самый простой способ сделать это с помощью библиотеки, такой как jQuery. Если у вас есть уникальный способ дифференцировать эти объекты с помощью селектора css (например, все они имеют класс «validate» или они являются единственными полями ввода [type = "text"] на странице или чем-то еще), тогда вы можете сделайте простой выбор, например $('.validate'), чтобы получить массив всех этих объектов. Вы можете получить этот массив, используя JavaScript, конечно, но это немного сложнее. Если у вас есть массив, вы можете зациклить элементы или выполнить простое связывание, например $('.validate').change(validate);, которое будет вызывать метод validate () всякий раз, когда изменяется элемент dom с классом 'validate'.

Редактировать: Очевидно, что я не знаю всего, чего вы пытаетесь достичь, но если вы новичок в веб-программировании, просто отметьте также, что независимо от того, что вы делаете на стороне клиента (т.е. в браузере) вся проверка также должна выполняться на стороне сервера. Проверка Javascript, как правило, используется просто для удобства пользователя, а не для проверки ваших входных данных, поскольку я мог бы просто отключить JavaScript или переопределить проверку как function validate() {} и обойти проверку JavaScript по любой причине.

2-е редактирование: так что я не уверен, что этот ответ на 100% соответствует тому, что вы ищете, но это полезно знать независимо от этого.

Answer 4

Я думаю, что ваша проблема в том, что объект в области действия onkeyup не определен.

function setup(obj) {
    //obj is desired
    obj.getElement().onkeyup = function() {validate(obj) //obj is undefined because onkeyup is the new scope of this function
}

Вместо этого вы можете сделать это:

function setup(obj) {
    obj.getElement().onkeyup = function() {validate(this) 
}