1. Библиотека GoogleClosureJavaScript Инструменты в руках разработчика

2. Клиентские JavaScriptбиблиотеки jQuery: кросс-браузерныйдвижок CSS-селекторов проход по DOM-дереву, поддержка XPath события манипуляции с CSS визуальные эффекты AJAX-дополнения JavaScript-плагины 2

3. Клиентские JavaScript библиотеки DojoToolkit: CSS-запросы события визуальные эффекты анимация Ajax пакетная система элементы интерфейса 3

4. Клиентские JavaScript библиотеки MooTools: расширяемая и модульная структура компоненты эффектов с переходами манипулирование с DOM манипулирование CSS элементов AJAX-запросы модуль загрузки модулей и зависимостей, которые нужны для конкретного приложения 4

5. GoogleClosureTools ClosureCompiler оптимизатор переписывает JavaScript делает код быстрым и компактным 5

6. GoogleClosureTools ClosureTemplates система шаблонов динамическая генерация HTML интеграция Javaи JavaScript 6

7. GoogleClosureTools ClosureLinter пакет консольных утилит проверяюти корректируют JavaScript соответствиесо стилистическим правилам: размещение операторов отсутствие точки с запятой пробелы наличие JSDocаннотации и т. п. 7

8. GoogleClosureTools JavascriptLibrary модульная архитектура специально под ClosureCompiler манипуляция DOM и CSS события AJAX и JSON объекты интерфейса:виджеты, элементы управления, формы и т. д. 8

9. Google Closure JavaScript Общие принципы каждый тип в отдельном каталоге каждый пакет в отдельном файле функции предоставляет именно пакет нельзя подключить все пакеты типа одной командой только если подключаемый пакет зависит от всех пакетов типа 9

10. Google Closure JavaScript Подключение необходимых пакетов goog.require('goog.dom'); goog.require('goog.dom.classes'); 10

11. Google Closure JavaScriptПоиск элементов в DOM Элемент по id goog.dom.getElement('id'); используя псевдоним goog.dom.$('id'); 11

12. Google Closure JavaScriptПоиск элементов в DOM Первый элемент с определенным className goog.dom.getElementByClass('className'); внутри родителя goog.dom.getElementByClass('className', parentElement); 12

13. Google Closure JavaScriptПоиск элементов в DOM Все элементы с определенным className goog.dom.getElementsByClass('className'); внутри родителя goog.dom.getElementsByClass('className', parentElement); 13

14. Google Closure JavaScriptПоиск элементов в DOM Все дочерние элементы с определенными tagNameи className goog.dom.getElementsByTagNameAndClass( 'tagName', 'className', parentElement); используя псевдоним goog.dom.$$('tagName', 'className', parentElement); 14

15. Google Closure JavaScriptПоиск элементов в DOM Все дочерние элементы с определенными className1или className2 goog.dom.getElementsByTagNameAndClass( null, 'className1, className2', parentElement); 15

16. Google Closure JavaScriptПоиск элементов в DOM Ближайший родитель с определенным className goog.dom.getAncestorByClass(childElement, 'className'); 16

17. Google Closure JavaScriptПоиск элементов в DOM Ближайший родитель с определенными className и tagName goog.dom.getAncestorByTagNameAndClass(childElement, 'tagName', 'className'); 17

18. Google Closure JavaScriptИзменение DOM Создаем элемент varnewBox = goog.dom.createDom('div', {'style':'border:1px solidred;','class': 'box‘},'Textonbox‘); используя псевдоним varnewBox = goog.dom.$dom('div', {'style':'border:1px solidred;','class': 'box‘},'Textonbox'); 18

19. Google Closure JavaScriptИзменение DOM Добавляем в DOM goog.dom.appendChild(document.body, newBox); 19

20. Google Closure JavaScriptРабота с классами Задание имя класса элементу goog.dom.classes.set(element, 'className'); Получение всех классов элемента goog.dom.classes.get(element); Проверка наличия класса goog.dom.classes.has(element, 'className'); 20

21. Google Closure JavaScriptРабота с классами Добавление классов или нескольких goog.dom.classes.add(element, 'className1', 'className2'); Удаление класса или нескольких goog.dom.classes.remove(element,'className1', 'className2'); 21

22. Google Closure JavaScriptРабота с классами Переключение между классами goog.dom.classes.swap(element, 'fromClass', 'toClass'); Добавление и удаление классов за один подход goog.dom.classes.addRemove(element, 'addClass', ['removeClass']); 22

23. Google Closure JavaScriptРабота с классами Добавление/удаление класса по флагу goog.dom.classes.enable(element, 'className', true||false); Если класс – удалить, если нет – добавить goog.dom.classes.toggle(element, 'className'); 23

24. Google Closure JavaScriptРабота со стилями Подключение пакета goog.require('goog.style'); 24

25. Google Closure JavaScriptРабота со стилями Получение значения атрибута goog.style.getStyle(element, 'border') ; установка значения goog.style.setStyle(element, 'border-color', 'red'); или goog.style.setStyle(element, {'padding-top': '5px', 'padding-bottom': '5px'}); 25

26. Google Closure JavaScriptРабота со стилями Прозрачность и видимость элементов: Получение значения opacity goog.style.getOpacity(element); Установка значения opacity goog.style.setOpacity(element, .5); 26

27. Google Closure JavaScriptРабота со стилями Прозрачность и видимость элементов: Сокрытие элемента goog.style.showElement(element, false); и показ goog.style.showElement(element, true); 27

28. Google Closure JavaScriptРабота с событиями Подключаем пакет goog.require('goog.events'); goog.require('goog.events.EventType'); 28

29. Google Closure JavaScriptРабота с событиями Вешаем хендлер события на элемент: goog.events.listen(element, 'click', function(event){ … }); Вешаем одноразовый хендлер события на элемент: goog.events.listenOnce(element, 'click', function(event){ … }); 29

30. Google Closure JavaScriptРабота с событиями Удаляем все обработчики с элемента goog.events.removeAll(element); Удаляем все обработчики со всего goog.events.removeAll(); 30

31. Google Closure JavaScriptРабота с событиями Вызываем clickна другом объектес передачей текущего объекта-события (event) goog.events.listen(element, 'click', function(event){ goog.events.fireListeners(newElement, 'click',false, event); }); 31

32. Google Closure JavaScriptРабота с событиями Вызываем clickна другом объектевчистую goog.events.listen(element, 'click', function(event){ goog.events.fireListeners(newElement, 'click',false, new goog.events.Event('click')); }); 32

33. Проблемы c Google Closure JavaScriptи решения Issues Документация Проблемы «мобилизации» приложения Сложность упаковки проекта Порядок подключения пакетов Solutions Исходники, публикации Компиляция Компиляция Исходники 33

34. jQuery jquery.js Mootools mootools-core.js Dojo Toolkit dojo.js Google Closure JS base.js Сравнение фреймворков с дополнениями 34

35. Сравнение фреймворков jQuery jquery.js Mootools mootools-core.js Dojo Toolkit dojo.js Google Closure JS base.js с дополнениями 35

36. Сравнение фреймворков jQuery jquery.js Mootools mootools-core.js Dojo Toolkit dojo.js Google Closure JS base.js с дополнениями 36

37. Ссылки: Home: http://code.google.com/p/closure-library/ Downloads: http://code.google.com/p/closure-library/downloads/list API Documentation: http://closure-library.googlecode.com/svn/docs/index.html GoogleClosure руководство для начинающих: http://anton.shevchuk.name/javascript/google-closure-for-beginners-with-examples/ Контакты: Skype: vladfrandom Email: volodymyr_forfutdinov@epam.com Спасибо за внимание. Вопросы? 37