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

by https://speakerdeck.com/thinkphp_com_ua

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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”

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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')

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

RequireJs Setup

Slide 9

Slide 9 text

Module Definition

Slide 10

Slide 10 text

Main.js

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Build Profile: app.build.js

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Make a widget!

Slide 20

Slide 20 text

What about Dialog?

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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