ЗАКЛАДЫВАЕМ ФУНДАМЕНТ В JAVASCRIPT ПРИЛОЖЕНИЕ

 

  • Эволюция написания приложения;
  • Закладываем фундамент;
  • Финальные штрихи;
  • Заключение.

СОДЕРЖАНИЕ

 

КАК МЫ ПИШЕМ JAVASCRIPT ПРИЛОЖЕНИЕ

ЭВОЛЮЦИЯ ПРИЛОЖЕНИЯ

 

  • каждый раз все по новому;
  • распухшие файлы с кодом;
  • нет единообразия кода.

ПРОСТО ПИШЕМ КОД

 

ВЗРОСЛЕЕМ

 

все тоже, только обернуто функциями

ПОЯВЛЯЮТСЯ ОБЪЕКТЫ

 

ВЗРОСЛЕЕМ

 

  • на все подряд пишутся плагины;
  • не вносится ничего нового, те же функции.

ПЛАГИНЫ

 

ВЗРОСЛЕЕМ

 

  • в целом ситуация лучше;
  • пишется куча view;
  • появляется "наследование";
  • клубок "вьюшек".

BACKBONE

 

 

ПОЧЕМУ ТАК? 

 

МОДУЛЬ

Функционально законченный фрагмент программы, предназначенный для использования в других программах
 

Модуль состоит из html + css + js 


Это модуль навигации 

 

 Модуль регистрации

 

Что-то не так


 

$('.button').on('click',     function(e) {          module2.refresh(e);  });

Общение модулей - порождает сильную связность

 Событийно-ориентированный подход

СОП

sandbox.bind('AddTransferPlayer',             function (e, data) { });
sandbox.trigger('AddTransferPlayer',              { id: 0 });

 

ЗАКЛАДЫВАЕМ ФУНДАМЕНТ 

БИБЛИОТЕКА

 

ЯДРО 

 

  • управление жизненным циклом модулей;
  • обеспечение слабой связности;
  • отслеживание ошибок;
  • иметь возможность к расширению.

ЯДРО

ПЕСОЧНИЦА 

 

ПЕСОЧНИЦА

  • передача запроса модуля в функцию ядра;
  • определяет доступные части для модуля.

Песочница - это фасад

 МОДУЛЬ

 

МОДУЛЬ

  • никаких ссылок на другие модули;
  • не создавать глобальных переменных;
  • не использовать не нативные глобальные переменные;
  • не использовать DOM вне своего бокса;
  • все что нужно - взять у песочницы. 


var module = function (sandbox) {      this.init = function () {};
      this.destroy = function () {};
...
      return this;};

 

 НА ДАННЫЙ МОМЕНТ

ЧТО ЕЩЕ НУЖНО 

ДОБАВИМ


  • декомпозицию модуля;
  • рабочее пространство пользователя.

ДЕКОМПОЗИЦИЯ МОДУЛЯ*



* это не разбиение модуля на под модули


 

Контрол - элемент управления страницы

 ОСОБЕННОСТИ


  • как простые контролы так и составные;
  • появляется библиотека контролов;
  • создание модуля сводится к складыванию нужных контролов;
  • модули с контролами становятся зависимыми. 

var module = function (sandbox) {    var controls = sandbox.getControls(),        runControls = {};
    runControls.DocumentForm =                  new controls.DocumentForm();    runControls.Table = new controls.Table();
...
};

РАБОЧЕЕ ПРОСТРАНСТВО 

 

Рабочее пространство - это настройка/условия

 

Рабочее пространство определяет доступность функций приложения

 

Другими словами - рабочее пространство - это условия в которых работает приложение. 

РАБОЧЕЕ ПРОСТРАНСТВО

  • что разрешено пользователю в приложении;
  • видоизменение модуля, поведения. 

var module = function (sandbox) {
...
    if (sandbox.isPaid()) {        // do something    }   
...
}

 

РАБОЧЕЕ ПРОСТРАНСТВО НЕИЗМЕННО НА КЛИЕНТЕ

 

ПЛЮСЫ

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

 

МИНУСЫ

  • высокий порог вхождения;
  • тяжело переходить поэтапно;
  • не так эффективно - если не SPA приложение;
  • тонкая грань между модулями и контролами управления.

 

ЗАКЛЮЧЕНИЕ

 

ССЫЛКИ

 

СПАСИБО