Библиотека Google Closure Java Script

Библиотека Google Closure JavaScript

Инструменты в руках разработчика

Клиентские JavaScript библиотеки

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

2


Dojo Toolkit:– CSS-запросы– события– визуальные эффекты– анимация– Ajax– пакетная система– элементы интерфейса

3


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

которые нужны для конкретного приложения

4

Google Closure Tools

Closure Compiler

• оптимизатор • переписывает JavaScript• делает код быстрым и компактным

5


Closure Templates

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

6


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

7


Javascript Library• модульная архитектура• специально под Closure Compiler• манипуляция DOM и CSS• события• AJAX и JSON• объекты интерфейса: виджеты, элементы

управления, формы и т. д.

8

Google Closure JavaScript

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

командой• только если подключаемый пакет зависит

от всех пакетов типа

9


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

goog.require('goog.dom.classes');

10


Поиск элементов в DOM

Элемент по idgoog.dom.getElement('id');

используя псевдонимgoog.dom.$('id');

11



Первый элемент с определенным classNamegoog.dom.getElementByClass('className');

внутри родителяgoog.dom.getElementByClass('className',

parentElement);

12



Все элементы с определенным classNamegoog.dom.getElementsByClass('className');

внутри родителяgoog.dom.getElementsByClass('className',

parentElement);

13



Все дочерние элементы с определенными tagName и className

goog.dom.getElementsByTagNameAndClass('tagName', 'className', parentElement);

используя псевдонимgoog.dom.$$('tagName', 'className',

parentElement);

14



Все дочерние элементы с определенными className1 или className2

goog.dom.getElementsByTagNameAndClass(null, 'className1, className2', parentElement);

15



Ближайший родитель с определенным className

goog.dom.getAncestorByClass(childElement, 'className');

16



Ближайший родитель с определенными className и tagName

goog.dom.getAncestorByTagNameAndClass(childElement, 'tagName', 'className');

17


Изменение 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


Изменение DOM

Добавляем в DOMgoog.dom.appendChild(document.body, newBox);

19


Работа с классами

Задание имя класса элементуgoog.dom.classes.set(element, 'className');

Получение всех классов элементаgoog.dom.classes.get(element);

Проверка наличия классаgoog.dom.classes.has(element, 'className');

20



Добавление классов или несколькихgoog.dom.classes.add(element,

'className1', 'className2');

Удаление класса или несколькихgoog.dom.classes.remove(element,

'className1', 'className2');

21



Переключение между классамиgoog.dom.classes.swap(element,

'fromClass', 'toClass');

Добавление и удаление классов за один подходgoog.dom.classes.addRemove(element,

'addClass', ['removeClass']);

22



Добавление/удаление класса по флагуgoog.dom.classes.enable(element,

'className', true||false);

Если класс – удалить, если нет – добавитьgoog.dom.classes.toggle(element, 'className');

23


Работа со стилями

Подключение пакетаgoog.require('goog.style');

24



Получение значения атрибутаgoog.style.getStyle(element, 'border') ;

установка значения

goog.style.setStyle(element, 'border-color', 'red');или

goog.style.setStyle(element, {'padding-top': '5px', 'padding-bottom': '5px'});

25



Прозрачность и видимость элементов:

Получение значения opacitygoog.style.getOpacity(element);

Установка значения opacity

goog.style.setOpacity(element, .5);

26



Прозрачность и видимость элементов:

Сокрытие элементаgoog.style.showElement(element, false);

и показgoog.style.showElement(element, true);

27


Работа с событиями

Подключаем пакетgoog.require('goog.events');

goog.require('goog.events.EventType');

28



Вешаем хендлер события на элемент:goog.events.listen(element, 'click', function(event){ … });

Вешаем одноразовый хендлер события на

элемент:goog.events.listenOnce(element,

'click', function(event){ … });29



Удаляем все обработчики с элементаgoog.events.removeAll(element);

Удаляем все обработчики со всегоgoog.events.removeAll();

30



Вызываем click на другом объекте с передачей текущего объекта-события (event)

goog.events.listen(element, 'click', function(event){

goog.events.fireListeners(newElement, 'click',false, event);

});

31



Вызываем 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

Спасибо за внимание. Вопросы?

Documents

Библиотека Google Closure Java Script