Как организовать мой код JavaScript MVC в модули AMD? - PullRequest
Новая
       24

Как организовать мой код JavaScript MVC в модули AMD?

0 голосов
/ 25 ноября 2011

Я создаю веб-приложение с различными компонентами визуализации, состоящими из моделей и представлений Backbone.js:

Например, «Компонент PopulationVisualization» может иметь:

  • основная модель - сохранение состояния компонента
  • нескольких представлений Backbone (timesliderView, legendView и т. д.) - прослушивание изменений в модели

Все эти компоненты зависят от внешних данныхManagerи объекты dataSource, но в противном случае они должны быть отделены.

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

1) Как бы это выглядело, если бы я попытался принять шаблон модуля AMD?
2) Я бы сделал один модуль из компонента PopulationVisualization или несколько?
3) Я бы выставил методы уровня модуля как API или я бы обеспечил прямое управление внутренними моделями и представлениями?

Спасибо.

1 Ответ

1 голос
/ 08 февраля 2012

Чтобы ответить на ваши вопросы, вот мой совет, отвечая на все три:

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

Вот мой первый удар по чему-то вроде этого: 

// components/populationVisualization/Model.js
define(function (require, exports, module) {
  return Backbone.Model.extend({ /* ... */});
});

// components/populationVisualization/views/Timeslider.js
define(function (require, exports, module) {
  return Backbone.View.extend({ /* ... */});
});

// components/populationVisualization/views/Legend.js
define(function (require, exports, module) {
  return Backbone.View.extend({ /* ... */});
});

// components/populationVisualization/serializer.js
define(function (require, exports, module) {
  exports.setupSerialization = function (model) {
    // ...
  };
});

// components/populationVisualization.js
define(function (require, exports, module) {
  var Model = require("./populationVisualization/Model");
  var TimesliderView = require("./populationVisualization/views/Timeslider");
  var LegendView = require("./populationVisualization/views/Legend");
  var serializer = require("./populationVisualization/serializer");

  exports.createAndRender = function (modelParams, $el) {
    var model = new Model(modelParams);
    serializer.setupSerialization(model);

    var timesliderView = new TimesliderView({ model: model });
    var legendView = new LegendView({ model: model });

    $el.append(timesliderView.el);
    $el.append(legendView.el);
  };
});

В другом месте приложения вы могли бы только require("components/populationVisualization") и вызывать метод createAndRender этого модуля с соответствующими параметрами.

...