Архитектура Javascript/примеры применения?

Есть ли они?

Я долгое время был рабыней к большим строго типизированным языкам OO (Java и С#) и являюсь преданным Мартина Фаулера и его друзей. Javascript, из-за этого свободно типизированный и функциональный характер, кажется, не поддается идиомам, к которым я привык.

Каковы наилучшие методы организации богатого javascript-клиента? Меня интересует все, от чего, чтобы сохранить ваш код (один файл или несколько файлов) в шаблонах MVC для группировки четырех шаблонов для слоев.

Не помещать материал в глобальное пространство имен, кажется, единственный консенсус.

Я использую JQuery как "расширенный API".

Ответы

Ответ 1

Мне нравится использовать некоторую архитектуру на стороне клиента MVC.

  • У меня есть страница CONTROLLER
  • DOM - мой взгляд.
  • Сервер мой MODEL

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

var pageXController = {
  init: function(param) {
    pageXController.wireEvents();
    // something else can go here
  },

  wireEvents : function() {
    // Wire up page events
  }

  // Reactive methods from page events
  // Callbacks, etc
  methodX : function() {}
}

$(document).ready( function() {
  // gather params from querystring, server injection, etc
  pageXController.init(someparams);
});

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

Ответ 2

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

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

enter image description here

Как только у вас есть возможность создавать иерархические модули, это способ создания компонентов пользовательского интерфейса в relavant sub-module. Эти компоненты пользовательского интерфейса также предпочтительно должны быть автономными. Значение каждого с собственным шаблоном, css, локализацией и т.д., Как показано ниже:

enter image description here

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

http://boilerplatejs.org

Ответ 3

Одна вещь, которую вы, возможно, захотите изучить, - Backbone.js, которая дает вам хорошую структуру для создания классов модели для представления этих данных в вашем приложения и привязать их к вашему HTML-интерфейсу. Это предпочтительнее связывать ваши данные с DOM.

В более общем плане, вот отличная статья о лучших примерах JavaScript из блога разработки Opera.