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

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