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.5k
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.3k
ThinkPHP #7: Адаптация веб-сайта под различные дисплеи
thinkphp_com_ua
0
2.4k
ThinkPHP #7: Bluz - наш код как музыка
thinkphp_com_ua
0
2.2k
ThinkPHP #6: Usability кода
thinkphp_com_ua
0
1.5k
ThinkPHP #6: Нелёгкий труд интервьюера
thinkphp_com_ua
2
1.5k
ThinkPHP #6: Адаптивный дизайн - время пришло!
thinkphp_com_ua
0
1.5k
ThinkPHP #3: Highload не кусается
thinkphp_com_ua
1
2k
ThinkPHP #3: Оптимизация быстродействия Веб-сайта
thinkphp_com_ua
1
1.9k
ThinkPHP #3: Дизайн пользовательских интерфейсов для разработчиков
thinkphp_com_ua
1
2k
Other Decks in Programming
See All in Programming
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
280
CSC509 Lecture 08
javiergs
PRO
0
240
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
490
Six and a half ridiculous things to do with Quarkus
hollycummins
0
210
AI 駆動開発におけるコミュニティと AWS CDK の価値
konokenj
5
220
One Enishi After Another
snoozer05
PRO
0
150
開発組織の戦略的な役割と 設計スキル向上の効果
masuda220
PRO
8
1.5k
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
360
品質ワークショップをやってみた
nealle
0
620
CSC305 Lecture 10
javiergs
PRO
0
230
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
7
4.9k
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
960
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Producing Creativity
orderedlist
PRO
347
40k
Building an army of robots
kneath
305
46k
The Invisible Side of Design
smashingmag
302
51k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Unsuck your backbone
ammeep
671
58k
The World Runs on Bad Software
bkeepers
PRO
72
11k
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