Где разместить интерактивные объекты в JavaScript?

Question

Я создаю веб-приложение (например, JavaScript с jQuery и большим количеством SVG), где пользователь взаимодействует с «объектами» на экране (представьте себе DIV, которые можно перетаскивать, изменять размер и соединять с помощью arraows - какпрограмма векторного рисования или язык графического программирования).

Поскольку каждый «объект» содержит индивидуальную информацию, но всегда принадлежит к «классу» элементов, очевидно, что это приложение должно быть запрограммировано с использованием подхода ООП.

Но где лучше хранить «объекты»?

• Должен ли я создать глобальную структуру («реестр») со всеми (собственными) объектами JS и сказать им: «Нарисуйте себя наDOM "?
• Или я должен избегать такой структуры и думать о (соответствующих) узлах DOM как о своих объектах и ​​присоединять к ним соответствующие данные как .data ()?

Первый подход очень MVC - но я думаю, что присоединение всех обработчиков событий будет нетривиальным.

Второй подход будет обрабатывать событиятривиальным способом, и это не создает дублирующую структуру, но я думаю, что обычные ОО-вещи (например, методы) будут более сложными.

Что вы рекомендуете?Я думаю, что ответ будет специфичен для JavaScript и SVG, поскольку «обычные» языки программирования не имеют такого высокоорганизованного «холста» вывода.

Answer 1

В таких обстоятельствах в прошлом (я делал это около 5 раз), я всегда создаю ООП в JS (глобальные «классы», неглобальные структуры данных в зависимости от ситуации).Каждый класс обычно имеет свойство .g, которое указывает на его графическое представление. (И до jQuery .data я использовал свойства expando для экземпляров DOM, указывающих обратно на экземпляр класса, когда обработчики событий или тому подобное должны смотреть в другую сторону.)

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

Я не считаю, что добавление обработчиков событий сложно в этой системе: создание экземпляра нового объекта (в коде) отвечает за создание экземпляра его представления в представлении и присоединение его собственных обработчиков событий, которые инициируют обратные вызовы на основе экземпляра.Этот код отображает специфичные для ввода события (например, mousedown) в логические события на основе состояния (например, selected).Другой код регистрируется в этих логических событиях в экземплярах.

Answer 2

Возможно, вы захотите использовать JSON для определения "объектов", с которыми вы имеете дело. например,

[{
    type: rectangle,
    coordinates: {x: 0, y: 0},
    size: {width: 100, height: 100}
},{
    type: arrow,
    start: {x: 150, y: 150},
    end: {x: 100, y: 100}
}]

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

Это настраивает вас на использование шаблона MVC, как вы заявили, и затем вы можете выполнить обнаружение объектов, чтобы определить, хотите ли вы отобразить это как Canvas, SVG, Flash, HTML и т. Д.

Answer 3

Я бы использовал JSON (в качестве реестра объектов) и сохранил бы все это в вашем блоке скриптов.Затем вы можете легко сохранять и восстанавливать данные без разбора.