Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ThinkPHP #2: Управление кодом в JavaScript
Search
thinkphp_com_ua
July 06, 2012
Programming
1
3.4k
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.2k
ThinkPHP #7: Адаптация веб-сайта под различные дисплеи
thinkphp_com_ua
0
2.3k
ThinkPHP #7: Bluz - наш код как музыка
thinkphp_com_ua
0
2.1k
ThinkPHP #6: Usability кода
thinkphp_com_ua
0
1.4k
ThinkPHP #6: Нелёгкий труд интервьюера
thinkphp_com_ua
2
1.4k
ThinkPHP #6: Адаптивный дизайн - время пришло!
thinkphp_com_ua
0
1.5k
ThinkPHP #3: Highload не кусается
thinkphp_com_ua
1
1.9k
ThinkPHP #3: Оптимизация быстродействия Веб-сайта
thinkphp_com_ua
1
1.9k
ThinkPHP #3: Дизайн пользовательских интерфейсов для разработчиков
thinkphp_com_ua
1
1.9k
Other Decks in Programming
See All in Programming
watsonx.ai Dojo #6 継続的なAIアプリ開発と展開
oniak3ibm
PRO
0
170
アクターシステムに頼らずEvent Sourcingする方法について
j5ik2o
6
700
どうして手を動かすよりもチーム内のコードレビューを優先するべきなのか
okashoi
3
870
為你自己學 Python
eddie
0
510
shadcn/uiを使ってReactでの開発を加速させよう!
lef237
0
290
歴史と現在から考えるスケーラブルなソフトウェア開発のプラクティス
i10416
0
300
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
430
functionalなアプローチで動的要素を排除する
ryopeko
1
190
Fixstars高速化コンテスト2024準優勝解法
eijirou
0
190
ゼロからの、レトロゲームエンジンの作り方
tokujiros
3
1k
AWS re:Invent 2024個人的まとめ
satoshi256kbyte
0
100
AWSのLambdaで PHPを動かす選択肢
rinchoku
2
390
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
173
51k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Designing for Performance
lara
604
68k
Side Projects
sachag
452
42k
Site-Speed That Sticks
csswizardry
2
250
Mobile First: as difficult as doing things right
swwweet
222
9k
Measuring & Analyzing Core Web Vitals
bluesmoon
5
210
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Statistics for Hackers
jakevdp
797
220k
Become a Pro
speakerdeck
PRO
26
5.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Fireside Chat
paigeccino
34
3.1k
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