Making Scalable JavaScript Application
3 likes1,317 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-111103073042-phpapp02/85/Making-Scalable-JavaScript-Application-35-320.jpg)
Making Scalable JavaScript Application
- 1. Масштабируемые JavaScript-приложения Михаил Давыдов JavaScript разработчик группы разработки Веб-чатов Я.Субботник, Екатеринбург, 2 июля 2011 года
- 2. 2
- 3. <a href="javascript: external.AddFavorite (location, 'Мой сайт!') "> Добавить закладку </a> 3 Байт 40 JavaScript
- 4. 4
- 5. 5 Код стал меняться // Lamo code <button onclick="doStuff.call(this, event)" /> // Pro code $('button').click(doStuff);
- 6. 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)); }); /* Ещё десяток разных стилей и плагинов */ });
- 7. $(function () { // Типичный код для сайта $('#button').click(function (event) { alert(this.innerHTML); }); $('#list').uberScrollerPluginStart({ "theme": "red" }); $('#lazy_thing').click(function () { $.get('/lazy/thing/body.html', doLazyLoad.bind(this)); }); /* Ещё десяток разных стилей и плагинов */ }); 7 Для сайта — это хорошо!
- 8. 8 Часто код сайта похож на маленький клубок
- 9. 9
- 11. Структура 11
- 12. 12
- 14. 14 Ядро Библиотека Нужна обертка — Ядро
- 15. Задачи Ядра 15 1. Обертка библиотеки 2. Управляет жизнью частей системы 3. Коммуникационный интерфейс 4. Контролирует ошибки 5. Расширяется
- 16. Модули 16
- 17. Структура как на МКС 17
- 19. 19 JavaScript + HTML + CSS + ... Модуль состоит из
- 20. 20 Модуль «Ростер» Моя задача — отображать список контактов и обновлять статусы.
- 21. 21 Модуль «Диалог» Моя задача — отображать сообщения пользователей в чате.
- 23. Модуль ограничен 23 1. Может — вызывать свои методы и песочницы — использовать свой HTML элемент 2. Должен спрашивать разрешения 3. Запрещено — создавать глобалы — использовать нестандартные глобалы — общаться с модулями напрямую
- 24. 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))
- 26. Ни один из объектов не знает о всем приложении! 26
- 28. Коммуникация 28
- 29. 29 var Module1 = { "someAction": function () { Module2.getSomeValue(); } }; var Module2 = { "getSomeValue": function () { return 'data'; } };
- 30. 30 var Module1 = { "someAction": function () { Module2.getSomeValue(); } }; var Module2 = { "getSomeValue": function () { return 'data'; } };
- 31. // Слабая связанность var Module1 = { "init": function ($) { $.on('event', function (e) { console.log(e.data); }); } }; var Module2 = { "someAction": function ($) { $.trigger('event', 'data'); } }; 31
- 32. 32 // Слабая связанность var Module1 = { "init": function ($) { $.on('event', function (e) { console.log(e.data); }); } }; var Module2 = { "someAction": function ($) { $.trigger('event', 'data'); } };
- 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
- 41. Можем менять без опасения 41
- 42. События — это по течению 42
- 43. Асинхронность — решение будущих проблем 43
- 44. Вопросы? 44
- 45. Михаил Давыдов JavaScript и Node.js разработчик [email protected] Twitter @azproduction Habr http://azproduction.habrahabr.ru 45