Михаил Давыдов "Масштабируемые JavaScript-приложения"
0 likes853 views
Документ обсуждает архитектуру масштабируемых JavaScript-приложений, акцентируя внимание на модульности и взаимодействии между компонентами. Он описывает принципы организации кода, включая использование 'песочниц' и строгую структуру, а также дает примеры синхронного и асинхронного кода. Кроме того, документ подчеркивает важность повторного использования компонентов и модульного тестирования.
![// Синхронный код
var Storage = {
"read": function (key) {
return localStorage[key];
}
};
var data = Storage.read('key'),
pData = process(data);
$.trigger('data', pData);
35](https://image.slidesharecdn.com/davydovekb-120731045216-phpapp02/85/JavaScript-35-320.jpg)
Михаил Давыдов "Масштабируемые JavaScript-приложения"
- 1. Масштабируемые JavaScript-приложения Михаил Давыдов JavaScript разработчик группы разработки Веб-чатов Я.Субботник, Екатеринбург, 2 июля 2011 года
- 2. 2
- 3. Байт 40 JavaScript <a href="javascript: external.AddFavorite (location, 'Мой сайт!') "> Добавить закладку </a> 3
- 4. 4
- 5. Код стал меняться // Lamo code <button onclick="doStuff.call(this, event)" /> // Pro code $('button').click(doStuff); 5
- 6. $(function () { // Типичный код для сайта $('#button').click(function (event) { alert(this.innerHTML); }); $('#list').uberScrollerPluginStart({ "theme": "red" }); $('#lazy_thing').click(function () { $.get('/lazy/thing/body.html', doLazyLoad.bind(this)); }); /* Ещё десяток разных стилей и плагинов */ }); 6
- 7. $(function () { // Типичный код для сайта $('#button').click(function (event) { alert(this.innerHTML); }); $('#list').uberScrollerPluginStart({ "theme": "red" }); Для$.get('/lazy/thing/body.html', { сайта — это хорошо! $('#lazy_thing').click(function () doLazyLoad.bind(this)); }); /* Ещё десяток разных стилей и плагинов */ }); 7
- 8. Часто код сайта похож на маленький клубок 8
- 9. 9
- 11. Структура 11
- 12. 12
- 14. Нужна обертка — Ядро Ядро Библиотека 14
- 15. Задачи Ядра 1. Обертка библиотеки 2. Управляет жизнью частей системы 3. Коммуникационный интерфейс 4. Контролирует ошибки 5. Расширяется 15
- 16. Модули 16
- 17. Структура как на МКС 17
- 19. Модуль состоит из JavaScript + HTML + CSS + ... 19
- 20. Модуль «Ростер» Моя задача — отображать список контактов и обновлять статусы. 20
- 21. Модуль «Диалог» Моя задача — отображать сообщения пользователей в чате. 21
- 23. Модуль ограничен 1. Может — вызывать свои методы и песочницы — использовать свой HTML элемент 2. Должен спрашивать разрешения 3. Запрещено — создавать глобалы — использовать нестандартные глобалы — общаться с модулями напрямую 23
- 24. var Module = (function (global) { "use strict"; var $content; return { "init": function ($) { // $=sandbox $content = $.$('<div/>') .appendTo($.box()); $.on("message", function (e) { $content.text(e.data); }); }, "destroy": function () { /*,..,*/ } }; // Тут может быть ещё какой-то код }(this)) 24
- 25. Жесткая архитектура Модули Песочница Ядро Библиотека 25
- 26. Ни один из объектов не знает о всем приложении! 26
- 27. Расширяемая архитектура Модули Песочница Ядро Расширения Библиотека Плагины 27
- 28. Коммуникация 28
- 29. var Module1 = { "someAction": function () { Module2.getSomeValue(); } }; var Module2 = { "getSomeValue": function () { return 'data'; } }; 29
- 30. var Module1 = { "someAction": function () { Module2.getSomeValue(); } }; var Module2 = { "getSomeValue": function () { return 'data'; } }; 30
- 31. // Слабая связанность var Module1 = { "init": function ($) { $.on('event', function (e) { console.log(e.data); }); } }; var Module2 = { "someAction": function ($) { $.trigger('event', 'data'); } }; 31
- 32. // Слабая связанность var Module1 = { "init": function ($) { $.on('event', function (e) { console.log(e.data); }); } }; var Module2 = { "someAction": function ($) { $.trigger('event', 'data'); } }; 32
- 35. // Синхронный код var Storage = { "read": function (key) { return localStorage[key]; } }; var data = Storage.read('key'), pData = process(data); $.trigger('data', pData); 35
- 36. // Асинхронный код var Storage = { "read": function (key, cb) { $.get('/read/' + key, cb); } }; Storage.read('key',function(data) { var pData = processData(data); $.trigger('data', pData); }.bind(this)); 36
- 38. Жесткая и расширяемая архитектура Модули Песочница Ядро Расширения Библиотека Плагины 38
- 41. Можем менять без опасения 41
- 42. События — это по течению 42
- 43. Асинхронность — решение будущих проблем 43
- 44. Вопросы? 44
- 45. Михаил Давыдов JavaScript и Node.js разработчик azproduction@yandex-team.ru Twitter @azproduction Habr http://azproduction.habrahabr.ru 45