Javascript архитектура / структура приложения Лучшие практики? - PullRequest
Новая
       2

Javascript архитектура / структура приложения Лучшие практики?

27 голосов
/ 23 марта 2011

Существуют ли они?

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

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

Единственный консенсус - не помещать вещи в глобальное пространство имен.

Я использую JQuery в качестве «Расширенного API».

Ответы [ 4 ]

18 голосов
/ 23 марта 2011

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

  • У меня есть страница КОНТРОЛЛЕР
  • DOM - мой ВИД
  • Сервер - моя МОДЕЛЬ

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

6 голосов
/ 17 августа 2012

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

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

enter image description here

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

enter image description here

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

http://boilerplatejs.org

5 голосов
/ 25 сентября 2013

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

Также онлайн справочник Адди Османи: Шаблоны для крупномасштабной архитектуры приложений JavaScript

5 голосов
/ 23 марта 2011

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

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

...