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

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

4769e8ad10f8a1d453dd6e59ecdbcbe4?s=128

thinkphp_com_ua

July 06, 2012
Tweet

Transcript

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

  2. О чем этот доклад? Этот доклад о инструментах, парадигмах программирования

    и приемах, которые упрощают разработку на JavaScript и позволяют повторно использовать Ваш код. А именно: • jQuery • RequireJs • OOP • Namespacing
  3. Namespaces - Предотвращение столкновения имен - Отображение пространства имен на

    путь на файловой системе
  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”
  5. Manual Namespaces Implementation Архинеудобно! Создать a.b.c.d (верх юзабилити!): var a

    = {b:{c:{d:{}}}} // хе-хе... сколько скобочек? Получить a.b.c.d (не факт что существует): If(!a){ // думаю, смысл понятен }
  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')
  7. RequireJs http://requirejs.org/ Отличное дополнение к setObject: • Подгрузка скриптов по

    требованию • Подгрузка шаблонов (text.js plugin) • Отслеживание зависимостей • 1 файл = 1 модуль • Система оптимизации/сборки скриптов • Интеграция с jQuery
  8. RequireJs Setup

  9. Module Definition

  10. Main.js

  11. Make Your Own Build With RequireJs Что потребуется: • Nodejs

    • r.js (можно скачать на сайте requirejs.org) • Составить профиль билда • Запустить скрипт
  12. Build Profile: app.build.js

  13. Run Build&See Results! node r.js -o app.build.js Выгода: • Удобные

    разработка,поддержка и дебаг • Бесболезненные мержи • Удобный и быстрый билд при релизе
  14. OOP in JavaScript Дает нам: • расширяемость • повторное использование

    кода Инструменты: • better/base/declare – писал Ваш Покорный Слуга • https://github.com/dfilatov/jquery-plugins/tree/master/src/jquery.inherit
  15. Common jQuery Development Process • Нагуглить плагин • Понять что

    он не подходит под Ваши нужды • Нагуглить плагин.... • ...................................
  16. What if we will modify this plugin??? m-m-m.... no=(

  17. Jquery UI Fails: DatePicker Bad Architecture/Code Reuse Проблема: изменение разметки

    меняет ВСЕ дейтпикеры • Решение: Клонировать cам jQuery
  18. How Frequently You Use This Piece of Code? Ничего не

    забыли? Например, повесить статус загрузки. Обработка ошибок?
  19. Make a widget!

  20. What about Dialog?

  21. And More And More And More... • Accordion – коллекция

    Pane'ов с заголовками • Tabs - коллекция из Pane'ов и ассоциированных с ними кнопок • Wizard widget • Slide Show
  22. Profit?! • Максимальное повторное использование кода: Pane является предком/составной частью

    для Dialog,Tabs, Accordion etc • API легко запомнить. Все виджеты на базе Pane или использующие Pane будут реализовывать методы класса Pane • Все эти виджеты, как и Pane, уведомляют пользователя о состоянии загрузки изаботятся об обработке ошибок
  23. Questions?

  24. Thanks for your Attention