Your SlideShare is downloading. ×
библиотека Google closure java script
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

библиотека Google closure java script

1,002
views

Published on


0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,002
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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