Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
ThinkPHP #2: Управление кодом в JavaScript
thinkphp_com_ua
July 06, 2012
Programming
1
3.3k
ThinkPHP #2: Управление кодом в JavaScript
thinkphp_com_ua
July 06, 2012
Tweet
Share
More Decks by thinkphp_com_ua
See All by thinkphp_com_ua
ThinkPHP #7: Оптимизация верстки для High-Density дисплеев
thinkphp_com_ua
0
2.1k
ThinkPHP #7: Адаптация веб-сайта под различные дисплеи
thinkphp_com_ua
0
2.1k
ThinkPHP #7: Bluz - наш код как музыка
thinkphp_com_ua
0
2k
ThinkPHP #6: Usability кода
thinkphp_com_ua
0
1.3k
ThinkPHP #6: Нелёгкий труд интервьюера
thinkphp_com_ua
2
1.3k
ThinkPHP #6: Адаптивный дизайн - время пришло!
thinkphp_com_ua
0
1.4k
ThinkPHP #3: Highload не кусается
thinkphp_com_ua
1
1.9k
ThinkPHP #3: Оптимизация быстродействия Веб-сайта
thinkphp_com_ua
1
1.8k
ThinkPHP #3: Дизайн пользовательских интерфейсов для разработчиков
thinkphp_com_ua
1
1.8k
Other Decks in Programming
See All in Programming
Rによる大規模データの処理
s_uryu
2
610
Spring BootとKubernetesで実現する今どきのDevOps入門
xblood
0
320
量子コンピュータ時代のプログラミングセミナー / 20221222_Amplify_seminar _route_optimization
fixstars
0
240
%q is for Quine
koic
0
390
eBPF와 함께 이해하는 Cilium 네트워킹
hadaney
3
830
PHPDocにおける配列の型定義を少し知る
shimabox
1
110
Milestoner
bkuhlmann
1
240
【DevFest & ADS JP 22】チームで導入する
[email protected]
おいしい健康
kako351
0
210
Kyvernoを利用したKubernetesのポリシー制御
kisokazu
0
170
Git Rebase
bkuhlmann
10
1.2k
量子コンピュータ時代のプログラミングセミナー / 20230119_Amplify_seminar _shift_optimization
fixstars
0
140
僕が考えた超最強のKMMアプリの作り方
spbaya0141
0
170
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
182
15k
Designing for humans not robots
tammielis
245
24k
YesSQL, Process and Tooling at Scale
rocio
159
12k
The Web Native Designer (August 2011)
paulrobertlloyd
76
2.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
239
19k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
6
830
Building Better People: How to give real-time feedback that sticks.
wjessup
346
17k
Infographics Made Easy
chrislema
235
17k
Producing Creativity
orderedlist
PRO
335
37k
The Illustrated Children's Guide to Kubernetes
chrisshort
22
42k
How to Ace a Technical Interview
jacobian
270
21k
The Power of CSS Pseudo Elements
geoffreycrofte
52
4.3k
Transcript
Учимся управлять кодом в JavaScript
О чем этот доклад? Этот доклад о инструментах, парадигмах программирования
и приемах, которые упрощают разработку на JavaScript и позволяют повторно использовать Ваш код. А именно: • jQuery • RequireJs • OOP • Namespacing
Namespaces - Предотвращение столкновения имен - Отображение пространства имен на
путь на файловой системе
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”
Manual Namespaces Implementation Архинеудобно! Создать a.b.c.d (верх юзабилити!): var a
= {b:{c:{d:{}}}} // хе-хе... сколько скобочек? Получить a.b.c.d (не факт что существует): If(!a){ // думаю, смысл понятен }
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')
RequireJs http://requirejs.org/ Отличное дополнение к setObject: • Подгрузка скриптов по
требованию • Подгрузка шаблонов (text.js plugin) • Отслеживание зависимостей • 1 файл = 1 модуль • Система оптимизации/сборки скриптов • Интеграция с jQuery
RequireJs Setup
Module Definition
Main.js
Make Your Own Build With RequireJs Что потребуется: • Nodejs
• r.js (можно скачать на сайте requirejs.org) • Составить профиль билда • Запустить скрипт
Build Profile: app.build.js
Run Build&See Results! node r.js -o app.build.js Выгода: • Удобные
разработка,поддержка и дебаг • Бесболезненные мержи • Удобный и быстрый билд при релизе
OOP in JavaScript Дает нам: • расширяемость • повторное использование
кода Инструменты: • better/base/declare – писал Ваш Покорный Слуга • https://github.com/dfilatov/jquery-plugins/tree/master/src/jquery.inherit
Common jQuery Development Process • Нагуглить плагин • Понять что
он не подходит под Ваши нужды • Нагуглить плагин.... • ...................................
What if we will modify this plugin??? m-m-m.... no=(
Jquery UI Fails: DatePicker Bad Architecture/Code Reuse Проблема: изменение разметки
меняет ВСЕ дейтпикеры • Решение: Клонировать cам jQuery
How Frequently You Use This Piece of Code? Ничего не
забыли? Например, повесить статус загрузки. Обработка ошибок?
Make a widget!
What about Dialog?
And More And More And More... • Accordion – коллекция
Pane'ов с заголовками • Tabs - коллекция из Pane'ов и ассоциированных с ними кнопок • Wizard widget • Slide Show
Profit?! • Максимальное повторное использование кода: Pane является предком/составной частью
для Dialog,Tabs, Accordion etc • API легко запомнить. Все виджеты на базе Pane или использующие Pane будут реализовывать методы класса Pane • Все эти виджеты, как и Pane, уведомляют пользователя о состоянии загрузки изаботятся об обработке ошибок
Questions?
Thanks for your Attention