Как не утонуть в мегабайтах js-кода
TRANSCRIPT
Сайты в 2002 году
– мало javascript– независимость
Структура проекта
/js /common.js /editor.js
2005 год
/js
/common.js /editor.js /js-lib.js
Проблемы
– Путаница– Растущий размер файла– Нет code reuse
Логическое разделение
/js /folder.js /message.js /search.js ...
Проблемы
– Размер– Подключение– Сопровождение
Результат
<head> <script></script> <script></script> <script></script> …</had>
Тег как компонент
<div class="component" onclick="return {type:'folder'}"></div>
Тег как компонент
<div class="component" onclick="return {type:'folder'}"></div>
Нужен функционал
– Найти компонент– Определить компонент– Подключить JS файлы– Очередность подключения– Один файл один раз
Найти компонет
getElementsByCSSSelector('.component');
Старые браузеры
<div id=“random_12345”> … </div><script>create(“random_12345”)</script>
Тип компонента
<div class="component" onclick="return {type:'folder'}"></div>
var type = div.onclick().type;
Генерация тега script
createScript = function (src, charset){ script = document.createElement('script'); ... head.insertBefore(script, head.firstChild);}
require
require( // зависимость от других файлов ['file1', 'file2' ...], // уведомление о загрузке (callback) function(){ // инициализация loaded('file'); });
require дерево
Folders -> Dates -> Strings
Folders.jsrequire('Dates', function(){loaded('Folders')});Dates.jsrequire('Strings', function(){loaded('Dates')});Strings.js/* Strings staff */ loaded('Strings')
Запуск компонента
component = getElsBySelector('.component');type = component.onclick().type;
require( [getFileName(type)], function(){ window[type].init(); });
Тег как компонент
<div class="component" onclick="return {type:'folder'}"></div>
События
Календарь разработчика
Календарь заказчиков
Календарь заказчиков
Календарь заказчиков
События
CB.observe (type, listener, object);
CB.dispatch (type, object, event);
Очереди
CB.dispatch (type, object, event, 1);
CB.observe (type, listener, object);
Календарь заказчиков
