$30 off During Our Annual Pro Sale. View Details »

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

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

thinkphp_com_ua

July 06, 2012
Tweet

More Decks by thinkphp_com_ua

Other Decks in Programming

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