Download - Как не утонуть в мегабайтах JS-кода
![Page 1: Как не утонуть в мегабайтах JS-кода](https://reader035.vdocuments.site/reader035/viewer/2022062406/558e93a11a28ab3b108b464d/html5/thumbnails/1.jpg)
![Page 2: Как не утонуть в мегабайтах JS-кода](https://reader035.vdocuments.site/reader035/viewer/2022062406/558e93a11a28ab3b108b464d/html5/thumbnails/2.jpg)
Сайты в 2002 году
– мало javascript– независимость
![Page 3: Как не утонуть в мегабайтах JS-кода](https://reader035.vdocuments.site/reader035/viewer/2022062406/558e93a11a28ab3b108b464d/html5/thumbnails/3.jpg)
Структура проекта
/js /common.js /editor.js
![Page 4: Как не утонуть в мегабайтах JS-кода](https://reader035.vdocuments.site/reader035/viewer/2022062406/558e93a11a28ab3b108b464d/html5/thumbnails/4.jpg)
2005 год
/js
/common.js /editor.js /js-lib.js
![Page 5: Как не утонуть в мегабайтах JS-кода](https://reader035.vdocuments.site/reader035/viewer/2022062406/558e93a11a28ab3b108b464d/html5/thumbnails/5.jpg)
![Page 6: Как не утонуть в мегабайтах JS-кода](https://reader035.vdocuments.site/reader035/viewer/2022062406/558e93a11a28ab3b108b464d/html5/thumbnails/6.jpg)
Проблемы
– Путаница– Растущий размер файла– Нет code reuse
![Page 7: Как не утонуть в мегабайтах JS-кода](https://reader035.vdocuments.site/reader035/viewer/2022062406/558e93a11a28ab3b108b464d/html5/thumbnails/7.jpg)
![Page 8: Как не утонуть в мегабайтах JS-кода](https://reader035.vdocuments.site/reader035/viewer/2022062406/558e93a11a28ab3b108b464d/html5/thumbnails/8.jpg)
Логическое разделение
/js /folder.js /message.js /search.js ...
![Page 9: Как не утонуть в мегабайтах JS-кода](https://reader035.vdocuments.site/reader035/viewer/2022062406/558e93a11a28ab3b108b464d/html5/thumbnails/9.jpg)
Проблемы
– Размер– Подключение– Сопровождение
![Page 10: Как не утонуть в мегабайтах JS-кода](https://reader035.vdocuments.site/reader035/viewer/2022062406/558e93a11a28ab3b108b464d/html5/thumbnails/10.jpg)
Результат
<head> <script></script> <script></script> <script></script> …</had>
![Page 11: Как не утонуть в мегабайтах JS-кода](https://reader035.vdocuments.site/reader035/viewer/2022062406/558e93a11a28ab3b108b464d/html5/thumbnails/11.jpg)
Тег как компонент
<div class="component" onclick="return {type:'folder'}"></div>
![Page 12: Как не утонуть в мегабайтах JS-кода](https://reader035.vdocuments.site/reader035/viewer/2022062406/558e93a11a28ab3b108b464d/html5/thumbnails/12.jpg)
Тег как компонент
<div class="component" onclick="return {type:'folder'}"></div>
![Page 13: Как не утонуть в мегабайтах JS-кода](https://reader035.vdocuments.site/reader035/viewer/2022062406/558e93a11a28ab3b108b464d/html5/thumbnails/13.jpg)
Нужен функционал
– Найти компонент– Определить компонент– Подключить JS файлы– Очередность подключения– Один файл один раз
![Page 14: Как не утонуть в мегабайтах JS-кода](https://reader035.vdocuments.site/reader035/viewer/2022062406/558e93a11a28ab3b108b464d/html5/thumbnails/14.jpg)
Найти компонет
getElementsByCSSSelector('.component');
![Page 15: Как не утонуть в мегабайтах JS-кода](https://reader035.vdocuments.site/reader035/viewer/2022062406/558e93a11a28ab3b108b464d/html5/thumbnails/15.jpg)
Старые браузеры
<div id=“random_12345”> … </div><script>create(“random_12345”)</script>
![Page 16: Как не утонуть в мегабайтах JS-кода](https://reader035.vdocuments.site/reader035/viewer/2022062406/558e93a11a28ab3b108b464d/html5/thumbnails/16.jpg)
Тип компонента
<div class="component" onclick="return {type:'folder'}"></div>
var type = div.onclick().type;
![Page 17: Как не утонуть в мегабайтах JS-кода](https://reader035.vdocuments.site/reader035/viewer/2022062406/558e93a11a28ab3b108b464d/html5/thumbnails/17.jpg)
Генерация тега script
createScript = function (src, charset){ script = document.createElement('script'); ... head.insertBefore(script, head.firstChild);}
![Page 18: Как не утонуть в мегабайтах JS-кода](https://reader035.vdocuments.site/reader035/viewer/2022062406/558e93a11a28ab3b108b464d/html5/thumbnails/18.jpg)
require
require( // зависимость от других файлов ['file1', 'file2' ...], // уведомление о загрузке (callback) function(){ // инициализация loaded('file'); });
![Page 19: Как не утонуть в мегабайтах JS-кода](https://reader035.vdocuments.site/reader035/viewer/2022062406/558e93a11a28ab3b108b464d/html5/thumbnails/19.jpg)
require дерево
Folders -> Dates -> Strings
Folders.jsrequire('Dates', function(){loaded('Folders')});Dates.jsrequire('Strings', function(){loaded('Dates')});Strings.js/* Strings staff */ loaded('Strings')
![Page 20: Как не утонуть в мегабайтах JS-кода](https://reader035.vdocuments.site/reader035/viewer/2022062406/558e93a11a28ab3b108b464d/html5/thumbnails/20.jpg)
Запуск компонента
component = getElsBySelector('.component');type = component.onclick().type;
require( [getFileName(type)], function(){ window[type].init(); });
![Page 21: Как не утонуть в мегабайтах JS-кода](https://reader035.vdocuments.site/reader035/viewer/2022062406/558e93a11a28ab3b108b464d/html5/thumbnails/21.jpg)
Тег как компонент
<div class="component" onclick="return {type:'folder'}"></div>
![Page 22: Как не утонуть в мегабайтах JS-кода](https://reader035.vdocuments.site/reader035/viewer/2022062406/558e93a11a28ab3b108b464d/html5/thumbnails/22.jpg)
События
![Page 23: Как не утонуть в мегабайтах JS-кода](https://reader035.vdocuments.site/reader035/viewer/2022062406/558e93a11a28ab3b108b464d/html5/thumbnails/23.jpg)
Календарь разработчика
![Page 24: Как не утонуть в мегабайтах JS-кода](https://reader035.vdocuments.site/reader035/viewer/2022062406/558e93a11a28ab3b108b464d/html5/thumbnails/24.jpg)
Календарь заказчиков
![Page 25: Как не утонуть в мегабайтах JS-кода](https://reader035.vdocuments.site/reader035/viewer/2022062406/558e93a11a28ab3b108b464d/html5/thumbnails/25.jpg)
Календарь заказчиков
![Page 26: Как не утонуть в мегабайтах JS-кода](https://reader035.vdocuments.site/reader035/viewer/2022062406/558e93a11a28ab3b108b464d/html5/thumbnails/26.jpg)
Календарь заказчиков
![Page 27: Как не утонуть в мегабайтах JS-кода](https://reader035.vdocuments.site/reader035/viewer/2022062406/558e93a11a28ab3b108b464d/html5/thumbnails/27.jpg)
События
CB.observe (type, listener, object);
CB.dispatch (type, object, event);
![Page 28: Как не утонуть в мегабайтах JS-кода](https://reader035.vdocuments.site/reader035/viewer/2022062406/558e93a11a28ab3b108b464d/html5/thumbnails/28.jpg)
Очереди
CB.dispatch (type, object, event, 1);
CB.observe (type, listener, object);
![Page 29: Как не утонуть в мегабайтах JS-кода](https://reader035.vdocuments.site/reader035/viewer/2022062406/558e93a11a28ab3b108b464d/html5/thumbnails/29.jpg)
Календарь заказчиков