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