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

1,123 views
1,051 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,123
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

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

×