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.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.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
1.9k
Other Decks in Programming
See All in Programming
NPOでのDevinの活用
codeforeveryone
0
870
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
21
8.7k
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
110
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
660
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.4k
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
270
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
410
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
740
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
620
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
460
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
Featured
See All Featured
The Language of Interfaces
destraynor
158
25k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Being A Developer After 40
akosma
90
590k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Designing for Performance
lara
610
69k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
320
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
We Have a Design System, Now What?
morganepeng
53
7.7k
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