2. Клиентские JavaScriptбиблиотеки jQuery: кросс-браузерныйдвижок CSS-селекторов проход по DOM-дереву, поддержка XPath события манипуляции с CSS визуальные эффекты AJAX-дополнения JavaScript-плагины 2
3. Клиентские JavaScript библиотеки DojoToolkit: CSS-запросы события визуальные эффекты анимация Ajax пакетная система элементы интерфейса 3
4. Клиентские JavaScript библиотеки MooTools: расширяемая и модульная структура компоненты эффектов с переходами манипулирование с DOM манипулирование CSS элементов AJAX-запросы модуль загрузки модулей и зависимостей, которые нужны для конкретного приложения 4
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
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
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