ЗАКЛАДЫВАЕМ ФУНДАМЕНТ В JAVASCRIPT ПРИЛОЖЕНИЕ
- Эволюция написания приложения;
- Закладываем фундамент;
- Финальные штрихи;
- Заключение.
СОДЕРЖАНИЕ
КАК МЫ ПИШЕМ JAVASCRIPT ПРИЛОЖЕНИЕ
ЭВОЛЮЦИЯ ПРИЛОЖЕНИЯ
-
каждый раз все по новому;
-
распухшие файлы с кодом;
-
нет единообразия кода.
ПРОСТО ПИШЕМ КОД
ВЗРОСЛЕЕМ
все тоже, только обернуто функциями
ПОЯВЛЯЮТСЯ ОБЪЕКТЫ
ВЗРОСЛЕЕМ
-
на все подряд пишутся плагины;
-
не вносится ничего нового, те же функции.
ПЛАГИНЫ
ВЗРОСЛЕЕМ
-
в целом ситуация лучше;
-
пишется куча view;
-
появляется "наследование";
-
клубок "вьюшек".
BACKBONE
ПОЧЕМУ ТАК?
МОДУЛЬ
Функционально законченный фрагмент программы, предназначенный для использования в других программах
Модуль состоит из html + css + js
Это модуль навигации
Модуль регистрации
Что-то не так
$('.button').on('click',
function(e) {
module2.refresh(e);
});
$('.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) {
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) {
var controls = sandbox.getControls(),
runControls = {};
runControls.DocumentForm =
new controls.DocumentForm();
runControls.Table = new controls.Table();
...
};
РАБОЧЕЕ ПРОСТРАНСТВО
Рабочее пространство - это настройка/условия
Рабочее пространство определяет доступность функций приложения
Другими словами - рабочее пространство - это условия в которых работает приложение.
РАБОЧЕЕ ПРОСТРАНСТВО
-
что разрешено пользователю в приложении;
-
видоизменение модуля, поведения.
var module = function (sandbox) {
...
if (sandbox.isPaid()) {
// do something
}
...
}
var module = function (sandbox) {
...
if (sandbox.isPaid()) {
// do something
}
...
}
РАБОЧЕЕ ПРОСТРАНСТВО НЕИЗМЕННО НА КЛИЕНТЕ
ПЛЮСЫ
- расширяемость;
- слабая связность модулей;
- легкое написание тестов;
- единые механизмы (загрузки стр., инициализации модулей, обработки ошибок и тд.);
- все внимание только написанию модулей.
МИНУСЫ
- высокий порог вхождения;
- тяжело переходить поэтапно;
- не так эффективно - если не SPA приложение;
- тонкая грань между модулями и контролами управления.
ЗАКЛЮЧЕНИЕ
ССЫЛКИ
- Zakas - Creating a Scalable JavaScript Application Architecture;
- Osmani - Scalable Javascript.
СПАСИБО
Secon-LayingFoundationForJsApplication
By Artyom Prikhodko
Secon-LayingFoundationForJsApplication
- 1,690