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

Question

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

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

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

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

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

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

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

Answer 1

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

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

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

Answer 2

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

Answer 3

Возможно, вы захотите использовать 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 и т.д.