Библиотека google closure java script
TRANSCRIPT
Библиотека Google Closure JavaScript
Инструменты в руках разработчика
Клиентские JavaScript библиотеки
jQuery:– кросс-браузерный движок CSS-селекторов– проход по DOM-дереву, поддержка XPath– события– манипуляции с CSS – визуальные эффекты– AJAX-дополнения– JavaScript-плагины
2
Клиентские JavaScript библиотеки
Dojo Toolkit:– CSS-запросы– события– визуальные эффекты– анимация– Ajax– пакетная система– элементы интерфейса
3
Клиентские JavaScript библиотеки
MooTools: – расширяемая и модульная структура– компоненты эффектов с переходами– манипулирование с DOM– манипулирование CSS элементов– AJAX-запросы– модуль загрузки модулей и зависимостей,
которые нужны для конкретного приложения
4
Google Closure Tools
Closure Compiler
• оптимизатор • переписывает JavaScript• делает код быстрым и компактным
5
Google Closure Tools
Closure Templates
• система шаблонов • динамическая генерация HTML• интеграция Java и JavaScript
6
Google Closure Tools
Closure Linter• пакет консольных утилит• проверяют и корректируют JavaScript• соответствие со стилистическим правилам:– размещение операторов– отсутствие точки с запятой– пробелы– наличие JSDoc аннотации и т. п.
7
Google Closure Tools
Javascript Library• модульная архитектура• специально под Closure Compiler• манипуляция DOM и CSS• события• AJAX и JSON• объекты интерфейса: виджеты, элементы
управления, формы и т. д.
8
Google Closure JavaScript
Общие принципы• каждый тип в отдельном каталоге• каждый пакет в отдельном файле• функции предоставляет именно пакет• нельзя подключить все пакеты типа одной
командой• только если подключаемый пакет зависит
от всех пакетов типа
9
Google Closure JavaScript
Подключение необходимых пакетовgoog.require('goog.dom');
goog.require('goog.dom.classes');
10
Google Closure JavaScript
Поиск элементов в DOM
Элемент по idgoog.dom.getElement('id');
используя псевдонимgoog.dom.$('id');
11
Google Closure JavaScript
Поиск элементов в DOM
Первый элемент с определенным classNamegoog.dom.getElementByClass('className');
внутри родителяgoog.dom.getElementByClass('className',
parentElement);
12
Google Closure JavaScript
Поиск элементов в DOM
Все элементы с определенным classNamegoog.dom.getElementsByClass('className');
внутри родителяgoog.dom.getElementsByClass('className',
parentElement);
13
Google Closure JavaScript
Поиск элементов в DOM
Все дочерние элементы с определенными tagName и className
goog.dom.getElementsByTagNameAndClass('tagName', 'className', parentElement);
используя псевдонимgoog.dom.$$('tagName', 'className',
parentElement);
14
Google Closure JavaScript
Поиск элементов в DOM
Все дочерние элементы с определенными className1 или className2
goog.dom.getElementsByTagNameAndClass(null, 'className1, className2', parentElement);
15
Google Closure JavaScript
Поиск элементов в DOM
Ближайший родитель с определенным className
goog.dom.getAncestorByClass(childElement, 'className');
16
Google Closure JavaScript
Поиск элементов в DOM
Ближайший родитель с определенными className и tagName
goog.dom.getAncestorByTagNameAndClass(childElement, 'tagName', 'className');
17
Google Closure JavaScript
Изменение DOM
Создаем элементvar newBox = goog.dom.createDom('div', {'style':
'border:1px solid red;', 'class': 'box‘}, 'Text on box‘); используя псевдоним
var newBox = goog.dom.$dom('div', {'style': 'border:1px solid red;', 'class': 'box‘},'Text on box');
18
Google Closure JavaScript
Изменение DOM
Добавляем в DOMgoog.dom.appendChild(document.body, newBox);
19
Google Closure JavaScript
Работа с классами
Задание имя класса элементуgoog.dom.classes.set(element, 'className');
Получение всех классов элементаgoog.dom.classes.get(element);
Проверка наличия классаgoog.dom.classes.has(element, 'className');
20
Google Closure JavaScript
Работа с классами
Добавление классов или несколькихgoog.dom.classes.add(element,
'className1', 'className2');
Удаление класса или несколькихgoog.dom.classes.remove(element,
'className1', 'className2');
21
Google Closure JavaScript
Работа с классами
Переключение между классамиgoog.dom.classes.swap(element,
'fromClass', 'toClass');
Добавление и удаление классов за один подходgoog.dom.classes.addRemove(element,
'addClass', ['removeClass']);
22
Google Closure JavaScript
Работа с классами
Добавление/удаление класса по флагуgoog.dom.classes.enable(element,
'className', true||false);
Если класс – удалить, если нет – добавитьgoog.dom.classes.toggle(element, 'className');
23
Google Closure JavaScript
Работа со стилями
Подключение пакетаgoog.require('goog.style');
24
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
Google Closure JavaScript
Работа со стилями
Прозрачность и видимость элементов:
Получение значения opacitygoog.style.getOpacity(element);
Установка значения opacity
goog.style.setOpacity(element, .5);
26
Google Closure JavaScript
Работа со стилями
Прозрачность и видимость элементов:
Сокрытие элементаgoog.style.showElement(element, false);
и показgoog.style.showElement(element, true);
27
Google Closure JavaScript
Работа с событиями
Подключаем пакетgoog.require('goog.events');
goog.require('goog.events.EventType');
28
Google Closure JavaScript
Работа с событиями
Вешаем хендлер события на элемент:goog.events.listen(element, 'click', function(event){ … });
Вешаем одноразовый хендлер события на
элемент:goog.events.listenOnce(element,
'click', function(event){ … });29
Google Closure JavaScript
Работа с событиями
Удаляем все обработчики с элементаgoog.events.removeAll(element);
Удаляем все обработчики со всегоgoog.events.removeAll();
30
Google Closure JavaScript
Работа с событиями
Вызываем click на другом объекте с передачей текущего объекта-события (event)
goog.events.listen(element, 'click', function(event){
goog.events.fireListeners(newElement, 'click',false, event);
});
31
Google Closure JavaScript
Работа с событиями
Вызываем click на другом объекте вчистую
goog.events.listen(element, 'click', function(event){
goog.events.fireListeners(newElement, 'click', false, new goog.events.Event('click'));
});
32
Проблемы c Google Closure JavaScript и решения
Issues• Документация• Проблемы
«мобилизации» приложения
• Сложность упаковки проекта
• Порядок подключения пакетов
Solutions• Исходники, публикации• Компиляция
• Компиляция
• Исходники
33
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с дополнениями
Сравнение фреймворков
36
jQuery
jquery.js
Mootools
mootools-core.js
Dojo Toolkit
dojo.js
Google Closure JS
base.jsс дополнениями
Ссылки:Home: http://code.google.com/p/closure-library/Downloads: http://code.google.com/p/closure-library/downloads/listAPI Documentation: http://closure-library.googlecode.com/svn/docs/index.html
Google Closure руководство для начинающих:http://anton.shevchuk.name/javascript/google-closure-for-beginners-with-examples/
Контакты:Skype: vladfrandomEmail: [email protected]
37
Спасибо за внимание. Вопросы?