ThinkPHP #2: Управление кодом в JavaScript

Transcript

1. Учимся управлять кодом в JavaScript
   

   View Slide

2. О чем этот доклад?
   Этот доклад о инструментах, парадигмах
   программирования и приемах, которые
   упрощают разработку на JavaScript и позволяют
   повторно использовать Ваш код.
   А именно:
   ●
   jQuery
   ●
   RequireJs
   ●
   OOP
   ●
   Namespacing
   

   View Slide

3. Namespaces
   - Предотвращение столкновения имен
   - Отображение пространства имен на путь на
   файловой системе
   

   View Slide

4. Namespaces
   Плохо: его могут “перетереть”
   var widget = new MyWidget()
   Хорошо:
   var widget = new MyNamespace.Widget()
   Плохо:не понятно где искать сам файл
   baseUrl = “/js/”;
   1. MyWidget = baseUrl+ “/src/allmycode.js”
   2. MyWidget = baseUrl + “/src/widgets/my.js”
   Хорошо:
   MyNamespace.Widget = baseUrl+ “/MyNamespace/Widget.js”
   

   View Slide

5. Manual Namespaces Implementation
   Архинеудобно!
   Создать a.b.c.d (верх юзабилити!):
   var a = {b:{c:{d:{}}}} // хе-хе... сколько скобочек?
   Получить a.b.c.d (не факт что существует):
   If(!a){
   // думаю, смысл понятен
   }
   

   View Slide

6. Namespace with getObject plugin
   http://benalman.com/projects/jquery-getobject-plugin/
   Создать a.b.c.d :
   $.setObject('a.b.c.d',{})
   Получить a.b.c (не факт что существует):
   $.getObject('a.b.c')
   Проверка на существование:
   $.exists('d.e.f')
   

   View Slide

7. RequireJs
   http://requirejs.org/
   Отличное дополнение к setObject:
   ●
   Подгрузка скриптов по требованию
   ●
   Подгрузка шаблонов (text.js plugin)
   ●
   Отслеживание зависимостей
   ●
   1 файл = 1 модуль
   ●
   Система оптимизации/сборки скриптов
   ●
   Интеграция с jQuery
   

   View Slide

8. RequireJs Setup
   

   View Slide

9. Module Definition
   

   View Slide

10. Main.js
    

    View Slide

11. Make Your Own Build With RequireJs
    Что потребуется:
    ●
    Nodejs
    ●
    r.js (можно скачать на сайте requirejs.org)
    ●
    Составить профиль билда
    ●
    Запустить скрипт
    

    View Slide

12. Build Profile: app.build.js
    

    View Slide

13. Run Build&See Results!
    node r.js -o app.build.js
    Выгода:
    ●
    Удобные разработка,поддержка и дебаг
    ●
    Бесболезненные мержи
    ●
    Удобный и быстрый билд
    при релизе
    

    View Slide

14. OOP in JavaScript
    Дает нам:
    ●
    расширяемость
    ●
    повторное использование кода
    Инструменты:
    ●
    better/base/declare – писал Ваш Покорный Слуга
    ●
    https://github.com/dfilatov/jquery-plugins/tree/master/src/jquery.inherit
    

    View Slide

15. Common jQuery Development Process
    ●
    Нагуглить плагин
    ●
    Понять что он не подходит под Ваши нужды
    ●
    Нагуглить плагин....
    ●
    ...................................
    

    View Slide

16. What if we will modify this
    plugin???
    m-m-m.... no=(
    

    View Slide

17. Jquery UI Fails: DatePicker
    Bad Architecture/Code Reuse
    Проблема:
    изменение разметки меняет ВСЕ дейтпикеры
    ●
    Решение:
    Клонировать cам jQuery
    

    View Slide

18. How Frequently You Use This Piece of
    Code?
    Ничего не забыли?
    Например, повесить статус загрузки.
    Обработка ошибок?
    

    View Slide

19. Make a widget!
    

    View Slide

20. What about Dialog?
    

    View Slide

21. And More And More And More...
    ●
    Accordion – коллекция Pane'ов с заголовками
    ●
    Tabs - коллекция из Pane'ов и ассоциированных
    с ними кнопок
    ●
    Wizard widget
    ●
    Slide Show
    

    View Slide

22. Profit?!
    ●
    Максимальное повторное использование кода:
    Pane является предком/составной частью для
    Dialog,Tabs, Accordion etc
    ●
    API легко запомнить. Все виджеты на базе Pane
    или использующие Pane будут реализовывать
    методы класса Pane
    ●
    Все эти виджеты, как и Pane, уведомляют
    пользователя о состоянии загрузки изаботятся об
    обработке ошибок
    

    View Slide

23. Questions?
    

    View Slide

24. Thanks for your Attention
    

    View Slide