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

Есть ли они?

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

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

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

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

4 ответа

Мне нравится использовать некоторую архитектуру на стороне клиента 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 (объекты передачи данных), которые оптимизированы для решения проблемы. Это не ваша модель домена.


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

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

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

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

http://boilerplatejs.org


Если мы говорим о архитектуре приложений javascript, то подкаст Nicholas Zakas 2011 должен увидеть: Николас Закас: Масштабируемая архитектура приложений JavaScript

Также онлайн-ссылка Addy Osmani:    Шаблоны для крупномасштабной архитектуры приложений JavaScript


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

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

licensed under cc by-sa 3.0 with attribution.